// Direction 7 — MANUFAKTURA
// Workshop heritage warmth. Family workshop feel, dílna fotky, craft story,
// personal first-person voice. References: EREBORWOOD, Truhlářství Houška,
// Truhlářství Sedláček, Heath Ceramics (tone). Vibe: "Já a moji synové od 1995."
//
// Distinct from Dílna (which is editorial classic) and Tradice (which is archive/magazine):
//   - Family/workshop hero photo (not product photo)
//   - "Náš příběh" multi-paragraph section with master+apprentices photo
//   - Process with hand-drawn-style icons (rough stroke SVG)
//   - Realizace with per-project storytelling captions
//   - "Workshop visit" invite (pondělí-pátek 8-16)
//   - First-person, friendly copy ("Já jsem Karel...")

const _mixM = (hex, target, amount) => {
  const h = hex.replace('#', '');
  const t = target.replace('#', '');
  const r = Math.round(parseInt(h.slice(0, 2), 16) * (1 - amount) + parseInt(t.slice(0, 2), 16) * amount);
  const g = Math.round(parseInt(h.slice(2, 4), 16) * (1 - amount) + parseInt(t.slice(2, 4), 16) * amount);
  const b = Math.round(parseInt(h.slice(4, 6), 16) * (1 - amount) + parseInt(t.slice(4, 6), 16) * amount);
  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
};

// Hardcoded — Manufaktura je warm workshop heritage. NE pull z BRAND.palette.
// (Vacek mě naučil: scrape vrátila červenou jako accent → "rodinná dílna" v červené je špatně.)
const manuTokens = {
  bg: '#F8F3EA',
  bgAlt: '#F0E9DC',
  bgDeep: '#3D2E1F',
  ink: '#3D2E1F',
  ink2: '#5D4A3A',
  ink3: '#8B7B65',
  wood: '#8B6B4C',          // warm wood brown (hardcoded)
  woodSoft: _mixM('#8B6B4C', '#F8F3EA', 0.5),
  blue: '#2B3E50',
  brand: '#8B6B4C',
  rule: '#3D2E1F1A',
  ruleStrong: '#3D2E1F33',
};

const mDisplay = (size, italic = false) => ({
  fontFamily: '"Lora", "Source Serif Pro", "Georgia", serif',
  fontWeight: 600, fontSize: size,
  fontStyle: italic ? 'italic' : 'normal',
  lineHeight: size > 56 ? 1.05 : 1.2,
  letterSpacing: '-0.015em',
  margin: 0,
});
const mLabel = {
  fontFamily: '"Inter", -apple-system, sans-serif',
  fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase',
  fontWeight: 600,
};
const mBody = {
  fontFamily: '"Inter", -apple-system, sans-serif',
  fontSize: 16, lineHeight: 1.7, fontWeight: 400,
};

// ============================================================================
// DESKTOP — 1440 wide
// ============================================================================
const ManufakturaDesktop = () => {
  const t = manuTokens;
  return (
    <div style={{ width: 1440, fontFamily: '"Inter", -apple-system, sans-serif', color: t.ink, background: t.bg }}>
      <ManuNav t={t} />
      <ManuHero t={t} />
      <ManuStory t={t} />
      <ManuProcess t={t} />
      <ManuRealizace t={t} />
      <ManuVisit t={t} />
      <ManuFooter t={t} />
    </div>
  );
};

// ── NAV — small logo + family name ─────────────────────────────────────────
const ManuNav = ({ t }) => (
  <nav style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '28px 80px',
    borderBottom: `1px solid ${t.rule}`,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
      <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 56, width: 'auto' }} />
    </div>
    <div style={{ display: 'flex', gap: 36, fontSize: 14, fontWeight: 500 }}>
      {['Náš příběh', 'Jak pracujeme', 'Realizace', 'Návštěva dílny'].map(l => (
        <a key={l} href="#" style={{ color: t.ink, textDecoration: 'none' }}>{l}</a>
      ))}
    </div>
    <a href={`tel:${BRAND.phone}`} style={{
      padding: '12px 24px', background: t.wood, color: t.bg,
      textDecoration: 'none', fontSize: 14, fontWeight: 600, borderRadius: 4,
    }}>
      {BRAND.phoneDisplay}
    </a>
  </nav>
);

// ── HERO — family/workshop photo + warm welcoming headline ─────────────────
const ManuHero = ({ t }) => (
  <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 700 }}>
    <div style={{ padding: '100px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ ...mLabel, color: t.wood, marginBottom: 24 }}>
        {BRAND.location ? `${BRAND.location} ·` : ''} Rodinná dílna {BRAND.since ? `od ${BRAND.since}` : ''}
      </div>
      <h1 style={{ ...mDisplay(72), color: t.ink, marginBottom: 32 }}>
        Vyrábíme nábytek<br /><span style={{ ...mDisplay(72, true), color: t.wood }}>vlastníma rukama.</span>
      </h1>
      <p style={{ ...mBody, fontSize: 18, color: t.ink2, marginBottom: 40, maxWidth: 480, lineHeight: 1.7 }}>
        {BRAND.tagline || `Rodinné truhlářství${BRAND.location ? ` v ${BRAND.location}` : ''}. Děláme kuchyně, vestavěné skříně, dveře a interiéry — vše ve vlastní dílně, s vlastníma rukama.`}
      </p>
      <div style={{ display: 'flex', gap: 16 }}>
        <a href="#navsteva" style={{
          padding: '18px 32px', background: t.wood, color: t.bg,
          textDecoration: 'none', fontSize: 14, fontWeight: 600,
          borderRadius: 4,
        }}>
          Pojďte se podívat
        </a>
        <a href="#realizace" style={{
          padding: '18px 32px', background: 'transparent', color: t.ink,
          textDecoration: 'none', fontSize: 14, fontWeight: 600,
          border: `1px solid ${t.ruleStrong}`, borderRadius: 4,
        }}>
          Naše práce
        </a>
      </div>
      <div style={{ marginTop: 64, paddingTop: 24, borderTop: `1px solid ${t.rule}`, display: 'flex', gap: 32 }}>
        {(BRAND.stats.length ? BRAND.stats : [
          [BRAND.since ? `${new Date().getFullYear() - parseInt(BRAND.since)} let` : 'Léta', 'na trhu'],
          ['Vlastní', 'dílna'],
          ['5 let', 'záruka'],
        ]).map(([big, small]) => (
          <div key={big}>
            <div style={{ ...mDisplay(28), color: t.wood, lineHeight: 1 }}>{big}</div>
            <div style={{ ...mLabel, fontSize: 10, color: t.ink3, marginTop: 6 }}>{small}</div>
          </div>
        ))}
      </div>
    </div>
    <div style={{ position: 'relative', overflow: 'hidden', background: t.bg }}>
      <Img src={BRAND.ownerPhoto || BRAND.heroPhoto} alt={BRAND.owner || BRAND.name} tone={t.woodSoft} style={{ position: 'absolute', inset: 0 }} />
      <div style={{
        position: 'absolute', bottom: 32, left: 32, right: 32,
        background: t.bg, padding: '20px 24px',
        borderLeft: `4px solid ${t.wood}`,
      }}>
        <div style={{ ...mLabel, fontSize: 10, color: t.ink3, marginBottom: 6 }}>V dílně</div>
        <div style={{ fontFamily: '"Lora", serif', fontStyle: 'italic', fontSize: 16, color: t.ink, lineHeight: 1.5 }}>
          „{BRAND.tagline ? BRAND.tagline.slice(0, 80) + '…' : 'Každý kus prochází mýma rukama.'}"
        </div>
      </div>
    </div>
  </section>
);

// ── STORY — multi-paragraph personal narrative ─────────────────────────────
const ManuStory = ({ t }) => (
  <section style={{ padding: '120px 80px', background: t.bgAlt, borderTop: `1px solid ${t.rule}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80, alignItems: 'start' }}>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden' }}>
          <Img src={BRAND.heroPhotos && BRAND.heroPhotos[1] ? BRAND.heroPhotos[1] : BRAND.heroPhoto} alt="" tone={t.woodSoft} style={{ position: 'absolute', inset: 0 }} />
        </div>
        <div style={{
          position: 'absolute', bottom: -24, right: -24,
          background: t.wood, color: t.bg,
          padding: '24px 32px',
          fontFamily: '"Lora", serif', fontStyle: 'italic',
          fontSize: 16, lineHeight: 1.4,
        }}>
          {BRAND.since && (
            <>
              <div style={{ ...mDisplay(36, true), lineHeight: 1, marginBottom: 6 }}>{BRAND.since}</div>
              <div style={{ ...mLabel, fontSize: 10, color: t.bg, opacity: 0.85 }}>Začátek příběhu</div>
            </>
          )}
          {!BRAND.since && (
            <>
              <div style={{ ...mDisplay(28, true), lineHeight: 1.1 }}>Vlastní<br />dílna</div>
            </>
          )}
        </div>
      </div>
      <div>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 20 }}>I · Náš příběh</div>
        <h2 style={{ ...mDisplay(48), color: t.ink, marginBottom: 32 }}>
          Truhlářství <span style={{ ...mDisplay(48, true), color: t.wood }}>v krvi.</span>
        </h2>
        <p style={{ ...mBody, fontSize: 17, color: t.ink2, marginBottom: 20, lineHeight: 1.75 }}>
          {BRAND.owner ? `Jsem ${BRAND.owner}` : 'Jsme rodinné truhlářství'} a&nbsp;již{BRAND.since ? ` od&nbsp;roku ${BRAND.since}` : ' řadu let'} vyrábíme nábytek na míru{BRAND.location ? ` v ${BRAND.location}` : ''}. Začali jsme v&nbsp;malé dílně se&nbsp;třemi stroji a&nbsp;jednou myšlenkou: dělat věci pořádně.
        </p>
        <p style={{ ...mBody, fontSize: 17, color: t.ink2, marginBottom: 20, lineHeight: 1.75 }}>
          Dnes máme vlastní dílnu, vyzkoušené postupy a&nbsp;klienty, kteří se k&nbsp;nám vracejí. Ale princip se nezměnil: <em style={{ fontStyle: 'italic', color: t.wood }}>každý kus prochází našima rukama</em>. Žádné subdodávky, žádné polotovary.
        </p>
        <p style={{ ...mBody, fontSize: 17, color: t.ink2, marginBottom: 40, lineHeight: 1.75 }}>
          Vyrábíme kuchyně, vestavěné skříně, dveře a&nbsp;komplexní interiéry. Pro každého zákazníka navrhneme řešení, které sedí do&nbsp;jeho prostoru — a&nbsp;hlavně do&nbsp;jeho rozpočtu.
        </p>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', paddingTop: 24, borderTop: `1px solid ${t.rule}` }}>
          <div style={{ width: 56, height: 56, borderRadius: '50%', background: t.wood, color: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: '"Lora", serif', fontWeight: 700, fontSize: 22 }}>
            {BRAND.owner ? BRAND.owner.split(' ').map(s => s[0]).slice(0, 2).join('') : BRAND.shortName ? BRAND.shortName.slice(0, 2) : 'T'}
          </div>
          <div>
            <div style={{ ...mDisplay(16), color: t.ink, lineHeight: 1 }}>{BRAND.owner || 'Mistr truhlář'}</div>
            <div style={{ ...mLabel, fontSize: 10, color: t.ink3, marginTop: 4 }}>{BRAND.name}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── PROCESS — hand-drawn style icons (rough stroke SVG circles) ───────────
const ManuProcess = ({ t }) => (
  <section style={{ padding: '120px 80px', borderTop: `1px solid ${t.rule}` }}>
    <div style={{ textAlign: 'center', marginBottom: 80 }}>
      <div style={{ ...mLabel, color: t.wood, marginBottom: 20 }}>II · Jak pracujeme</div>
      <h2 style={{ ...mDisplay(48), color: t.ink, maxWidth: 720, margin: '0 auto' }}>
        Čtyři kroky <span style={{ ...mDisplay(48, true), color: t.wood }}>od poptávky po montáž.</span>
      </h2>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
      {(PROCESS && PROCESS.length ? PROCESS : [
        { n: '01', title: 'Posloucháme', body: 'Sejdeme se u Vás. Posloucháme, jak žijete, co potřebujete. Bez tlaku.' },
        { n: '02', title: 'Navrhujeme', body: 'Připravíme vizualizaci a cenovou nabídku. Doladíme spolu, dokud Vám neseděl.' },
        { n: '03', title: 'Vyrábíme', body: 'V naší dílně. Vlastníma rukama. Bez subdodávek, bez kompromisů.' },
        { n: '04', title: 'Montujeme', body: 'Přijedeme, namontujeme, uklidíme po sobě. Záruka 5 let.' },
      ]).map((step) => (
        <div key={step.n} style={{ textAlign: 'center', padding: '32px 16px' }}>
          <svg width="80" height="80" viewBox="0 0 80 80" style={{ marginBottom: 24 }}>
            <circle cx="40" cy="40" r="36" stroke={t.wood} strokeWidth="2.5" fill="none" strokeDasharray="4 3" strokeLinecap="round" transform="rotate(-15 40 40)" />
            <text x="40" y="48" textAnchor="middle" fill={t.wood} fontSize="22" fontFamily="Lora, serif" fontWeight="600" fontStyle="italic">{step.n.replace('0', '')}</text>
          </svg>
          <h3 style={{ ...mDisplay(22), color: t.ink, marginBottom: 12 }}>{step.title}</h3>
          <p style={{ ...mBody, fontSize: 14, color: t.ink2, maxWidth: 220, margin: '0 auto' }}>{step.body}</p>
        </div>
      ))}
    </div>
  </section>
);

// ── REALIZACE — gallery with per-project storytelling ──────────────────────
const ManuRealizace = ({ t }) => {
  const projects = PROJECTS.length > 0 ? PROJECTS.slice(0, 6) : [
    { id: 'p1', title: 'Kuchyň pro rodinu', year: 2024, place: 'Pardubice', material: 'Dub masiv', img: '' },
    { id: 'p2', title: 'Vestavěná skříň', year: 2024, place: 'Sezemice', material: 'Lamino + dýha', img: '' },
    { id: 'p3', title: 'Interiér chalupy', year: 2023, place: 'Hradec Králové', material: 'Smrk olejovaný', img: '' },
    { id: 'p4', title: 'Vchodové dveře', year: 2023, place: 'Chrudim', material: 'Dub masiv', img: '' },
    { id: 'p5', title: 'Pracovna na klíč', year: 2023, place: 'Pardubice', material: 'Dub + kov', img: '' },
    { id: 'p6', title: 'Dětský pokoj', year: 2022, place: 'Heřmanův Městec', material: 'Bříza', img: '' },
  ];
  return (
    <section id="realizace" style={{ padding: '120px 80px', background: t.bgAlt, borderTop: `1px solid ${t.rule}` }}>
      <div style={{ marginBottom: 64 }}>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 20 }}>III · Realizace</div>
        <h2 style={{ ...mDisplay(48), color: t.ink, maxWidth: 720 }}>
          Co jsme <span style={{ ...mDisplay(48, true), color: t.wood }}>v poslední době postavili.</span>
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
        {projects.map((p) => (
          <a key={p.id} href={`#${p.id}`} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
            <div style={{ position: 'relative', aspectRatio: '4/3', overflow: 'hidden', background: t.bg, marginBottom: 16 }}>
              <Img src={p.img} alt={p.title} tone={t.woodSoft} style={{ position: 'absolute', inset: 0 }} />
            </div>
            <div style={{ ...mLabel, fontSize: 10, color: t.wood, marginBottom: 8 }}>
              {p.place || 'Realizace'} · {p.year}
            </div>
            <h3 style={{ ...mDisplay(22), color: t.ink, marginBottom: 8 }}>{p.title}</h3>
            <p style={{ ...mBody, fontSize: 14, color: t.ink2, fontStyle: 'italic', fontFamily: '"Lora", serif' }}>
              {p.material || 'Na míru pro klienta'}
            </p>
          </a>
        ))}
      </div>
    </section>
  );
};

// ── VISIT — workshop invitation with hours ─────────────────────────────────
const ManuVisit = ({ t }) => (
  <section id="navsteva" style={{
    padding: '120px 80px', background: t.bg,
    borderTop: `1px solid ${t.rule}`,
  }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
      <div>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 20 }}>IV · Návštěva dílny</div>
        <h2 style={{ ...mDisplay(48), color: t.ink, marginBottom: 32 }}>
          Pojďte se <span style={{ ...mDisplay(48, true), color: t.wood }}>podívat.</span>
        </h2>
        <p style={{ ...mBody, fontSize: 17, color: t.ink2, marginBottom: 32, lineHeight: 1.75 }}>
          Nejlepší způsob, jak nás poznat — projít se naší dílnou, vidět rozpracované zakázky, dotknout se materiálů. Konzultace nezávazná, bez nátlaku.
        </p>
        <div style={{ background: t.bgAlt, padding: '24px 28px', borderLeft: `4px solid ${t.wood}`, marginBottom: 40 }}>
          <div style={{ ...mLabel, fontSize: 11, color: t.ink3, marginBottom: 12 }}>Otevírací doba</div>
          <div style={{ ...mDisplay(20), color: t.ink, marginBottom: 6 }}>Pondělí — Pátek</div>
          <div style={{ ...mBody, color: t.ink2, fontSize: 15 }}>8:00 — 16:00 · <em style={{ fontStyle: 'italic', color: t.wood }}>(po domluvě)</em></div>
        </div>
        <div style={{ display: 'flex', gap: 16 }}>
          <a href={`tel:${BRAND.phone}`} style={{
            padding: '18px 32px', background: t.wood, color: t.bg,
            textDecoration: 'none', fontSize: 14, fontWeight: 600, borderRadius: 4,
          }}>
            Zavolejte: {BRAND.phoneDisplay}
          </a>
          <a href={`mailto:${BRAND.email}`} style={{
            padding: '18px 32px', background: 'transparent', color: t.ink,
            textDecoration: 'none', fontSize: 14, fontWeight: 600,
            border: `1px solid ${t.ruleStrong}`, borderRadius: 4,
          }}>
            Napište e-mail
          </a>
        </div>
      </div>
      <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden' }}>
        <Img src={BRAND.heroPhotos && BRAND.heroPhotos[1] ? BRAND.heroPhotos[1] : BRAND.heroPhoto} alt="" tone={t.woodSoft} style={{ position: 'absolute', inset: 0 }} />
      </div>
    </div>
  </section>
);

// ── FOOTER ─────────────────────────────────────────────────────────────────
const ManuFooter = ({ t }) => (
  <footer style={{ background: t.bgDeep, color: t.bg, padding: '64px 80px 32px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 64, marginBottom: 48 }}>
      <div>
        <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 56, width: 'auto', filter: 'brightness(0) invert(1)', opacity: 0.95, marginBottom: 20 }} />
        <div style={{ ...mDisplay(24), color: t.bg, marginBottom: 12 }}>{BRAND.name}</div>
        <p style={{ ...mBody, color: '#F8F3EAaa', fontSize: 14, maxWidth: 360 }}>
          {BRAND.tagline || 'Rodinná truhlářská dílna. Vyrábíme nábytek na míru.'}
        </p>
      </div>
      <div>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 20 }}>Najdete nás</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14, color: '#F8F3EAcc' }}>
          <div>{BRAND.address || BRAND.location || ''}</div>
          <a href={`tel:${BRAND.phone}`} style={{ color: t.bg, textDecoration: 'none' }}>{BRAND.phoneDisplay}</a>
          <a href={`mailto:${BRAND.email}`} style={{ color: t.bg, textDecoration: 'none' }}>{BRAND.email}</a>
        </div>
      </div>
      <div>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 20 }}>Otevřeno</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, color: '#F8F3EAcc' }}>
          <div>Po — Pá: 8:00–16:00</div>
          <div style={{ fontFamily: '"Lora", serif', fontStyle: 'italic', color: t.wood, marginTop: 8 }}>(po domluvě)</div>
        </div>
      </div>
    </div>
    <div style={{ paddingTop: 24, borderTop: '1px solid #F8F3EA22', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: '#F8F3EA88' }}>
      <div>© {BRAND.name} {BRAND.since ? `· od ${BRAND.since}` : ''}</div>
      <div>{BRAND.domain || ''}</div>
    </div>
  </footer>
);

// ============================================================================
// MOBILE
// ============================================================================
const ManufakturaMobile = () => {
  const t = manuTokens;
  return (
    <div style={{ width: 390, fontFamily: '"Inter", -apple-system, sans-serif', color: t.ink, background: t.bg, overflow: 'hidden' }}>
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 20px', borderBottom: `1px solid ${t.rule}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 36 }} />
          <div>
            <div style={{ ...mDisplay(14), lineHeight: 1, color: t.ink }}>{BRAND.shortName || (BRAND.name && BRAND.name.split(' ')[0]) || ''}</div>
            <div style={{ fontSize: 9, color: t.ink3, marginTop: 2 }}>{BRAND.since ? `od ${BRAND.since}` : ''}</div>
          </div>
        </div>
        <a href={`tel:${BRAND.phone}`} style={{ padding: '10px 16px', background: t.wood, color: t.bg, textDecoration: 'none', fontSize: 12, fontWeight: 600, borderRadius: 4 }}>
          Zavolat
        </a>
      </nav>

      <section style={{ padding: '48px 24px' }}>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 16 }}>
          {BRAND.location ? `${BRAND.location} ·` : ''} Rodinná dílna
        </div>
        <h1 style={{ ...mDisplay(40), color: t.ink, marginBottom: 24 }}>
          Vyrábíme nábytek<br /><span style={{ ...mDisplay(40, true), color: t.wood }}>vlastníma rukama.</span>
        </h1>
        <p style={{ ...mBody, color: t.ink2, marginBottom: 32 }}>
          {BRAND.tagline || 'Rodinné truhlářství. Kuchyně, skříně, interiéry.'}
        </p>
        <a href="#navsteva" style={{ padding: '16px 28px', background: t.wood, color: t.bg, textDecoration: 'none', fontSize: 14, fontWeight: 600, borderRadius: 4, display: 'inline-block' }}>
          Pojďte se podívat
        </a>
      </section>

      <div style={{ aspectRatio: '4/3', background: t.bgAlt, position: 'relative', overflow: 'hidden' }}>
        <Img src={BRAND.ownerPhoto || BRAND.heroPhoto} alt="" tone={t.woodSoft} style={{ position: 'absolute', inset: 0 }} />
      </div>

      <section style={{ padding: '48px 24px', background: t.bgAlt, borderTop: `1px solid ${t.rule}` }}>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 12 }}>I · Náš příběh</div>
        <h2 style={{ ...mDisplay(28), color: t.ink, marginBottom: 24 }}>
          Truhlářství <span style={{ ...mDisplay(28, true), color: t.wood }}>v krvi.</span>
        </h2>
        <p style={{ ...mBody, color: t.ink2, lineHeight: 1.7, marginBottom: 16 }}>
          {BRAND.owner ? `Jsem ${BRAND.owner}` : 'Jsme rodinné truhlářství'} a&nbsp;již{BRAND.since ? ` od ${BRAND.since}` : ' řadu let'} vyrábíme nábytek na míru. Každý kus prochází našima rukama.
        </p>
      </section>

      <section style={{ padding: '48px 24px', borderTop: `1px solid ${t.rule}` }}>
        <div style={{ ...mLabel, color: t.wood, marginBottom: 12 }}>IV · Návštěva</div>
        <h2 style={{ ...mDisplay(32), color: t.ink, marginBottom: 24 }}>
          Pojďte se <span style={{ ...mDisplay(32, true), color: t.wood }}>podívat.</span>
        </h2>
        <div style={{ background: t.bgAlt, padding: '20px 24px', borderLeft: `4px solid ${t.wood}`, marginBottom: 24 }}>
          <div style={{ ...mLabel, fontSize: 10, color: t.ink3, marginBottom: 8 }}>Otevřeno</div>
          <div style={{ ...mDisplay(18), color: t.ink }}>Po — Pá · 8:00–16:00</div>
          <div style={{ fontFamily: '"Lora", serif', fontStyle: 'italic', color: t.wood, fontSize: 13, marginTop: 6 }}>(po domluvě)</div>
        </div>
        <a href={`tel:${BRAND.phone}`} style={{ padding: '16px 28px', background: t.wood, color: t.bg, textDecoration: 'none', fontSize: 14, fontWeight: 600, borderRadius: 4, display: 'inline-block' }}>
          {BRAND.phoneDisplay}
        </a>
      </section>
    </div>
  );
};

Object.assign(window, { ManufakturaDesktop, ManufakturaMobile });