// Direction 2 — TRADICE
// Magazine / archival. Bigger Inter for body, tabular numbers,
// vertical labels, hand-set caption boxes. Warmer ochre palette,
// archival numbering of work. References: Janský, archival catalogues.

// Hex helper — mix two hex colors for derived shades.
const _mixTrad = (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 — Tradice je magazine archive ochre/sepia. NE pull z BRAND.palette.
const tradiceTokens = {
  paper: '#E8DEC8',                                              // warm sepia cream
  paperLight: '#F2EBDC',
  paperDeep: '#C9BA9A',
  ink: '#2A1F12',
  ink2: '#5C4730',
  ochre: '#B8851D',                                              // archive ochre
  ochreDeep: '#8A6314',
  brand: '#7A3C12',                                              // burnished red-brown
  brandDeep: '#5A2C0D',
  rule: '#2A1F1233',
};

// ============================================================================
// DESKTOP
// ============================================================================
const TradiceDesktop = ({ tweaks }) => {
  const t = tradiceTokens;
  const heroLayout = tweaks?.heroLayout || 'full-photo';
  const portfolioStyle = tweaks?.portfolioStyle || 'editorial';
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? PROJECTS : PROJECTS.filter(p => p.cat === filter);

  return (
    <div style={{
      width: 1440, fontFamily: '"Inter", sans-serif',
      color: t.ink, background: t.paper,
      fontFeatureSettings: '"ss01", "cv11", "tnum"',
    }}>
      {/* MASTHEAD */}
      <header style={{ borderBottom: `2px solid ${t.ink}` }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 80px', fontSize: 11, letterSpacing: '.15em', textTransform: 'uppercase', borderBottom: `1px solid ${t.rule}` }}>
          <div>{BRAND.since ? `Est. ${BRAND.since} · ` : ''}{BRAND.location || ''}</div>
          <div>Rodinné truhlářství · {BRAND.location}</div>
          <a href={`tel:${BRAND.phone}`} style={{ color: t.ink, textDecoration: 'none' }}>{BRAND.phoneDisplay}</a>
        </div>
        <div style={{ padding: '24px 80px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 80, width: 'auto', display: 'block' }} />
          <nav style={{ display: 'flex', gap: 36, fontSize: 13, letterSpacing: '.06em', textTransform: 'uppercase' }}>
            {['Co stavíme', 'Realizace', 'Dílna', 'Kontakt'].map(l => (
              <a key={l} href="#" style={{ color: t.ink, textDecoration: 'none' }}>{l}</a>
            ))}
          </nav>
        </div>
      </header>

      {/* HERO */}
      {heroLayout === 'full-photo' && (
        <section style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', borderBottom: `2px solid ${t.ink}` }}>
          <div style={{ position: 'relative', minHeight: 720, overflow: 'hidden', borderRight: `2px solid ${t.ink}` }}>
            <Img src={BRAND.heroPhoto} alt="" tone={t.ochre} style={{ position: 'absolute', inset: 0 }} />
            <div style={{ position: 'absolute', top: 32, left: 32, background: t.paper, padding: '14px 18px', fontSize: 11, letterSpacing: '.15em', textTransform: 'uppercase' }}>
              {CATEGORIES[0]?.label || 'Kuchyně'}{PROJECTS[0]?.title ? ` · ${PROJECTS[0].title}` : ''}
            </div>
          </div>
          <div style={{ padding: '80px 60px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div style={tradKicker(t)}>Úvodník</div>
              <h2 style={{
                fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 80, lineHeight: 0.95, letterSpacing: '-0.025em',
                margin: '24px 0 32px',
              }}>
                Kuchyně<br />jako z <em style={{ fontStyle: 'italic', color: t.ochre }}>pohádky</em>.
              </h2>
              <p style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 22, lineHeight: 1.4, color: t.ink2, marginBottom: 32 }}>
                Skuteční výrobci s vlastními výrobními prostory.
                Zpracování přímo na míru přesně dle Vašich požadavků.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <TradBtn label="Domluvit konzultaci" t={t} primary />
              <TradBtn label="Číst dál ↓" t={t} />
            </div>
          </div>
        </section>
      )}

      {heroLayout === 'split' && (
        <section style={{ padding: '80px 80px 100px', borderBottom: `2px solid ${t.ink}` }}>
          <div style={tradKicker(t)}>Rodinné truhlářství{BRAND.since ? ` od roku ${BRAND.since}` : ''}</div>
          <h2 style={{
            fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 168, lineHeight: 0.88, letterSpacing: '-0.035em',
            margin: '32px 0 48px', textAlign: 'left',
          }}>
            Kuchyně<br /><em style={{ fontStyle: 'italic', color: t.ochre }}>jako z pohádky.</em>
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 48, alignItems: 'start' }}>
            <Img src={BRAND.heroPhoto} alt="" tone={t.ochre} style={{ aspectRatio: '16/10' }} />
            <div style={{ paddingTop: 16 }}>
              <p style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 22, lineHeight: 1.4, marginBottom: 0 }}>
                Skuteční výrobci s vlastní dílnou{BRAND.location ? ` v ${BRAND.location}` : ''}.
              </p>
            </div>
            <div style={{ paddingTop: 16, fontSize: 14, lineHeight: 1.6, color: t.ink2 }}>
              <div style={tradKicker(t)} >Co najdete uvnitř</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '12px 0 0' }}>
                <li>I. Co stavíme — kuchyně, interiéry…</li>
                <li>II. Vybrané realizace</li>
                <li>III. Jak pracujeme</li>
                <li>IV. Spojit se s námi</li>
              </ul>
            </div>
          </div>
        </section>
      )}

      {heroLayout === 'typographic' && (
        <section style={{ padding: '96px 80px', borderBottom: `2px solid ${t.ink}`, position: 'relative' }}>
          <div style={tradKicker(t)}>{BRAND.name} · {BRAND.location}</div>
          <div style={{ marginTop: 48, fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 240, lineHeight: 0.85, letterSpacing: '-0.045em' }}>
            Dřevo
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 24, marginTop: 8 }}>
            <em style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 240, color: t.ochre, fontWeight: 300, lineHeight: 0.85, letterSpacing: '-0.045em' }}>
              na míru.
            </em>
            <Img src={BRAND.heroPhoto} alt="" tone={t.ochre} style={{ width: 320, aspectRatio: '4/5', alignSelf: 'flex-end' }} />
          </div>
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: t.ink2, maxWidth: 480 }}>
              Rodinné truhlářství{BRAND.location ? ` v ${BRAND.location}` : ''}. Skuteční výrobci s vlastními výrobními prostory.
              Žádné subdodávky, žádné mezičlánky.
            </p>
            <div style={{ display: 'flex', gap: 12, alignSelf: 'end' }}>
              <TradBtn label="Domluvit konzultaci" t={t} primary />
              <TradBtn label="Realizace" t={t} />
            </div>
          </div>
        </section>
      )}

      {/* CO STAVÍME — Index list, magazine style */}
      <section style={{ padding: '96px 80px', borderBottom: `2px solid ${t.ink}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 64 }}>
          <div>
            <div style={tradKicker(t)}>I · Co stavíme</div>
            <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 64, letterSpacing: '-0.02em', margin: '16px 0 0' }}>
              Šest <em style={{ fontStyle: 'italic', color: t.ochre }}>oborů</em>.
            </h3>
          </div>
          <div style={{ maxWidth: 360, fontSize: 14, lineHeight: 1.65, color: t.ink2 }}>
            Pracujeme na zakázku — od první konzultace po finální montáž
            je u Vás vždy jeden řemeslník.
          </div>
        </div>

        <div>
          {CATEGORIES.map((c, i) => (
            <a key={c.id} href={`#${c.id}`} style={{
              display: 'grid', gridTemplateColumns: '80px 1fr 1fr 200px', gap: 32, alignItems: 'center',
              padding: '28px 0', borderTop: `1px solid ${t.rule}`,
              textDecoration: 'none', color: 'inherit', cursor: 'pointer',
              ...(i === CATEGORIES.length - 1 ? { borderBottom: `1px solid ${t.rule}` } : {}),
            }}>
              <div style={{ fontFamily: '"Fraunces", serif', fontSize: 32, fontStyle: 'italic', color: t.ochre }}>
                {String(i + 1).padStart(2, '0')}.
              </div>
              <div style={{ fontFamily: '"Fraunces", serif', fontSize: 40, letterSpacing: '-0.01em' }}>
                {c.label}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: t.ink2 }}>
                {c.short}
              </div>
              <Img src={c.img} alt="" tone={t.ochre} style={{ height: 88, width: 160, marginLeft: 'auto' }} />
            </a>
          ))}
        </div>
      </section>

      {/* REALIZACE */}
      <section style={{ padding: '96px 80px', borderBottom: `2px solid ${t.ink}`, background: t.paperLight }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48 }}>
          <div>
            <div style={tradKicker(t)}>II · Z archivu dílny</div>
            <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 80, letterSpacing: '-0.025em', margin: '16px 0 0', lineHeight: 0.95 }}>
              <em style={{ fontStyle: 'italic', color: t.ochre }}>Vybrané</em> realizace.
            </h3>
          </div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', maxWidth: 540, justifyContent: 'flex-end' }}>
            {FILTERS.map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{
                padding: '10px 16px', cursor: 'pointer',
                border: `1px solid ${filter === f.id ? t.ink : t.rule}`,
                background: filter === f.id ? t.ink : 'transparent',
                color: filter === f.id ? t.paperLight : t.ink,
                fontFamily: 'inherit', fontSize: 12, letterSpacing: '.08em', textTransform: 'uppercase',
              }}>{f.label}</button>
            ))}
          </div>
        </div>

        <TradPortfolio items={filtered} style={portfolioStyle} t={t} />
      </section>

      {/* O NÁS — split with quote */}
      <section style={{ padding: '120px 80px', borderBottom: `2px solid ${t.ink}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 96 }}>
          <div>
            <div style={tradKicker(t)}>III · Dílna</div>
            <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 72, letterSpacing: '-0.025em', margin: '16px 0 0', lineHeight: 0.95 }}>
              Skuteční <em style={{ fontStyle: 'italic', color: t.ochre }}>výrobci</em>.
            </h3>
            <Img src={BRAND.ownerPhoto} alt={BRAND.owner} tone={t.ochre} style={{ aspectRatio: '4/5', marginTop: 48 }} />
            <div style={{ marginTop: 16, fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 16, color: t.ink2 }}>
              {BRAND.owner}, majitel a truhlář.
            </div>
          </div>

          <div>
            <div style={{ position: 'relative', paddingLeft: 48 }}>
              <div style={{ position: 'absolute', left: 0, top: -16, fontFamily: '"Fraunces", serif', fontSize: 120, fontStyle: 'italic', color: t.ochre, lineHeight: 0.7 }}>„</div>
              <p style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 36, lineHeight: 1.25, letterSpacing: '-0.01em', margin: 0 }}>
                Jsme menší rodinná firma vážící si každého zákazníka,
                ale především <em style={{ fontStyle: 'italic', color: t.ochre }}>skuteční výrobci</em> s vlastními
                výrobními prostory.
              </p>
              <div style={{ marginTop: 24, fontSize: 13, letterSpacing: '.1em', textTransform: 'uppercase', color: t.ink2 }}>
                — {BRAND.owner}
              </div>
            </div>

            <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, paddingTop: 48, borderTop: `1px solid ${t.rule}` }}>
              {(BRAND.statsAlt.length ? BRAND.statsAlt : [
                ['100%', 'vlastní výroba'],
                ['5 let', 'záruka'],
              ]).map(([big, small]) => (
                <div key={big}>
                  <div style={{ fontFamily: '"Fraunces", serif', fontSize: 56, color: t.ochre, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{big}</div>
                  <div style={{ fontSize: 12, marginTop: 8, color: t.ink2, letterSpacing: '.08em', textTransform: 'uppercase' }}>{small}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 48, fontSize: 16, lineHeight: 1.65, color: t.ink2, maxWidth: 540 }}>
              <p style={{ margin: '0 0 16px' }}>
                Pracujeme na zakázku — předností výroby je zpracování přímo na míru
                podle Vašich požadavků. Nabízíme výběr z mnoha materiálů,
                zaručujeme vysokou kvalitu a dlouhou životnost.
              </p>
              <p style={{ margin: 0 }}>
                Vyrábíme kuchyňské linky a kompletní vybavení interiéru, dále pak
                pergoly, přístřešky a zahradní domky.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* KONTAKT — colophon style */}
      <section style={{ padding: '96px 80px', background: t.ink, color: t.paperLight }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96 }}>
          <div>
            <div style={{ ...tradKicker(t), color: t.ochre, opacity: 1 }}>IV · Kontakt</div>
            <h3 style={{
              fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 96, letterSpacing: '-0.03em',
              margin: '16px 0 32px', lineHeight: 0.95, color: t.paperLight,
            }}>
              Pište,<br /><em style={{ fontStyle: 'italic', color: t.ochre }}>volejte,</em><br />přijeďte.
            </h3>
            <p style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 22, lineHeight: 1.4, opacity: .8, maxWidth: 440 }}>
              První konzultace a cenová nabídka jsou zdarma.
              Žádné peníze předem.
            </p>

            <div style={{ marginTop: 48, paddingTop: 32, borderTop: `1px solid ${t.paperLight}22` }}>
              {[
                ['Telefon', BRAND.phoneDisplay, `tel:${BRAND.phone}`],
                ['E-mail', BRAND.email, `mailto:${BRAND.email}`],
                ['Dílna', BRAND.address, null],
              ].map(([l, v, h]) => (
                <div key={l} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 24, padding: '20px 0', borderBottom: `1px solid ${t.paperLight}11` }}>
                  <div style={{ fontSize: 12, letterSpacing: '.12em', textTransform: 'uppercase', opacity: .5 }}>{l}</div>
                  {h ? <a href={h} style={{ fontFamily: '"Fraunces", serif', fontSize: 24, color: t.paperLight, textDecoration: 'none' }}>{v}</a> : <div style={{ fontFamily: '"Fraunces", serif', fontSize: 24 }}>{v}</div>}
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: t.paperLight, padding: 48, color: t.ink }}>
            <div style={tradKicker(t)}>Poptávka</div>
            <h4 style={{ fontFamily: '"Fraunces", serif', fontSize: 32, margin: '8px 0 24px', lineHeight: 1.1 }}>
              Pošlete nám pár řádků.
            </h4>
            <TradForm t={t} />
          </div>
        </div>

        <div style={{ marginTop: 80, paddingTop: 24, borderTop: `1px solid ${t.paperLight}22`, display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', opacity: .5 }}>
          <div>© {BRAND.name} · 2026</div>
          <div>{BRAND.location}</div>
          <div>Rodinné truhlářství</div>
        </div>
      </section>
    </div>
  );
};

// ── helpers ────────────────────────────────────────────────────────────────
const tradKicker = (t) => ({
  fontSize: 11, letterSpacing: '.2em', textTransform: 'uppercase',
  color: t.ochre, fontWeight: 500,
});

const TradBtn = ({ label, t, primary }) => (
  <button style={{
    padding: '16px 28px', border: primary ? 'none' : `1px solid ${t.ink}`,
    background: primary ? t.ink : 'transparent', color: primary ? t.paper : t.ink,
    fontFamily: 'inherit', fontSize: 13, fontWeight: 500, letterSpacing: '.1em', textTransform: 'uppercase',
    cursor: 'pointer',
  }}>{label}</button>
);

const TradPortfolio = ({ items, style, t }) => {
  if (style === 'masonry') {
    const cols = [[], [], []];
    items.forEach((it, i) => cols[i % 3].push(it));
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {cols.map((col, ci) => (
          <div key={ci} style={{ display: 'flex', flexDirection: 'column', gap: 24, paddingTop: ci === 1 ? 48 : ci === 2 ? 24 : 0 }}>
            {col.map(p => <TradCard key={p.id} p={p} t={t} aspect={ci % 2 === 0 ? '3/4' : '4/3'} />)}
          </div>
        ))}
      </div>
    );
  }
  if (style === 'carousel') {
    return (
      <div style={{ display: 'flex', gap: 24, overflow: 'hidden' }}>
        <div style={{ flex: '0 0 60%' }}>
          <TradCard p={items[0]} t={t} aspect="4/3" large />
        </div>
        <div style={{ flex: '0 0 calc(40% - 24px)', display: 'flex', flexDirection: 'column', gap: 24 }}>
          {items.slice(1, 3).map(p => <TradCard key={p.id} p={p} t={t} aspect="2/1" />)}
        </div>
      </div>
    );
  }
  // editorial — strict grid with archival numbering
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
      {items.map((p, i) => <TradCard key={p.id} p={p} t={t} idx={i} aspect="4/3" />)}
    </div>
  );
};

const TradCard = ({ p, t, idx, aspect = '4/3', large }) => (
  <a href={`#${p.id}`} style={{ display: 'block', textDecoration: 'none', color: 'inherit', background: t.paper, padding: 16 }}>
    <Img src={p.img} alt={p.title} tone={t.ochre} style={{ aspectRatio: aspect, width: '100%' }} />
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 16 }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '.15em', textTransform: 'uppercase', color: t.ochre, marginBottom: 4 }}>
          {p.year} · {CATEGORIES.find(c => c.id === p.cat)?.label || ''}
        </div>
        <div style={{ fontFamily: '"Fraunces", serif', fontSize: large ? 32 : 22, lineHeight: 1.1, letterSpacing: '-0.01em' }}>
          {p.title}
        </div>
        <div style={{ fontSize: 12, marginTop: 4, color: t.ink2 }}>
          {p.material}
        </div>
      </div>
    </div>
  </a>
);

const TradForm = ({ t }) => (
  <form style={{ display: 'flex', flexDirection: 'column', gap: 16 }} onSubmit={e => e.preventDefault()}>
    <TradField label="Jméno" placeholder="Jan Novák" t={t} />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <TradField label="Telefon" placeholder="+420 …" t={t} />
      <TradField label="E-mail" placeholder="vy@email.cz" t={t} />
    </div>
    <TradField label="Co plánujete" placeholder="Stručně, co máte na mysli…" t={t} multi />
    <button type="submit" style={{
      marginTop: 8, padding: '18px 24px', border: 'none', background: t.brand, color: t.paperLight,
      fontFamily: 'inherit', fontSize: 13, fontWeight: 500, letterSpacing: '.12em', textTransform: 'uppercase',
      cursor: 'pointer',
    }}>Odeslat poptávku →</button>
  </form>
);

const TradField = ({ label, placeholder, t, multi }) => (
  <label>
    <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 6, color: t.ink2 }}>
      {label}
    </div>
    {multi ? (
      <textarea placeholder={placeholder} rows={3} style={{
        width: '100%', padding: '12px 14px', border: `1px solid ${t.rule}`,
        background: 'transparent', color: t.ink, fontFamily: 'inherit', fontSize: 15,
        outline: 'none', resize: 'vertical',
      }} />
    ) : (
      <input placeholder={placeholder} style={{
        width: '100%', padding: '12px 14px', border: `1px solid ${t.rule}`,
        background: 'transparent', color: t.ink, fontFamily: 'inherit', fontSize: 15,
        outline: 'none',
      }} />
    )}
  </label>
);

// ============================================================================
// MOBILE
// ============================================================================
const TradiceMobile = ({ tweaks }) => {
  const t = tradiceTokens;
  const heroLayout = tweaks?.heroLayout || 'full-photo';
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? PROJECTS : PROJECTS.filter(p => p.cat === filter);

  return (
    <div style={{
      width: 390, fontFamily: '"Inter", sans-serif',
      color: t.ink, background: t.paper,
    }}>
      <header style={{ borderBottom: `2px solid ${t.ink}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 20px', fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase', borderBottom: `1px solid ${t.rule}` }}>
          <div>{BRAND.since ? `Est. ${BRAND.since}` : ''}</div>
          <div>{BRAND.location}</div>
        </div>
        <div style={{ padding: '20px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 44, width: 'auto', display: 'block' }} />
          <div style={{ fontSize: 16 }}>≡</div>
        </div>
      </header>

      {/* Hero */}
      <section style={{ borderBottom: `2px solid ${t.ink}` }}>
        <Img src={BRAND.heroPhoto} alt="" tone={t.ochre} style={{ aspectRatio: '4/3', width: '100%' }} />
        <div style={{ padding: '32px 20px 40px' }}>
          <div style={tradKicker(t)}>Úvodník · Rodinné truhlářství</div>
          <h2 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.025em', margin: '16px 0 24px' }}>
            Kuchyně<br />jako z <em style={{ fontStyle: 'italic', color: t.ochre }}>pohádky</em>.
          </h2>
          <p style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 18, lineHeight: 1.4, color: t.ink2, margin: '0 0 24px' }}>
            Skuteční výrobci s vlastní dílnou{BRAND.location ? ` v ${BRAND.location}` : ''}.
            Zpracování přímo na míru.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <TradBtn label="Domluvit konzultaci →" t={t} primary />
            <TradBtn label="Číst dál ↓" t={t} />
          </div>
        </div>
      </section>

      {/* Co stavíme */}
      <section style={{ padding: '48px 20px', borderBottom: `2px solid ${t.ink}` }}>
        <div style={tradKicker(t)}>I · Co stavíme</div>
        <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 40, letterSpacing: '-0.02em', margin: '12px 0 32px', lineHeight: 1 }}>
          Šest <em style={{ fontStyle: 'italic', color: t.ochre }}>oborů</em>.
        </h3>
        <div>
          {CATEGORIES.map((c, i) => (
            <a key={c.id} style={{
              display: 'grid', gridTemplateColumns: '40px 1fr 72px', gap: 16, alignItems: 'center',
              padding: '18px 0', borderTop: `1px solid ${t.rule}`,
              textDecoration: 'none', color: 'inherit',
              ...(i === CATEGORIES.length - 1 ? { borderBottom: `1px solid ${t.rule}` } : {}),
            }}>
              <div style={{ fontFamily: '"Fraunces", serif', fontSize: 22, fontStyle: 'italic', color: t.ochre }}>{String(i + 1).padStart(2, '0')}.</div>
              <div>
                <div style={{ fontFamily: '"Fraunces", serif', fontSize: 22, letterSpacing: '-0.01em' }}>{c.label}</div>
                <div style={{ fontSize: 11, color: t.ink2, marginTop: 2 }}>{c.short}</div>
              </div>
              <Img src={c.img} alt="" tone={t.ochre} style={{ height: 52, width: 72 }} />
            </a>
          ))}
        </div>
      </section>

      {/* Realizace */}
      <section style={{ padding: '48px 20px', borderBottom: `2px solid ${t.ink}`, background: t.paperLight }}>
        <div style={tradKicker(t)}>II · Z archivu</div>
        <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 48, letterSpacing: '-0.025em', margin: '12px 0 24px', lineHeight: 0.95 }}>
          <em style={{ fontStyle: 'italic', color: t.ochre }}>Vybrané</em> realizace.
        </h3>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', marginBottom: 20, paddingBottom: 4 }}>
          {FILTERS.map(f => (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{
              flexShrink: 0, padding: '6px 12px', cursor: 'pointer',
              border: `1px solid ${filter === f.id ? t.ink : t.rule}`,
              background: filter === f.id ? t.ink : 'transparent',
              color: filter === f.id ? t.paperLight : t.ink, fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase',
            }}>{f.label}</button>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {filtered.slice(0, 6).map((p, i) => <TradCard key={p.id} p={p} t={t} idx={i} aspect="4/3" />)}
        </div>
      </section>

      {/* O nás */}
      <section style={{ padding: '48px 20px', borderBottom: `2px solid ${t.ink}` }}>
        <div style={tradKicker(t)}>III · Dílna</div>
        <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 400, fontSize: 44, letterSpacing: '-0.025em', margin: '12px 0 24px', lineHeight: 0.95 }}>
          Skuteční <em style={{ fontStyle: 'italic', color: t.ochre }}>výrobci</em>.
        </h3>
        <Img src={BRAND.ownerPhoto} alt={BRAND.owner} tone={t.ochre} style={{ aspectRatio: '4/5', width: '100%', marginBottom: 16 }} />
        <div style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 14, color: t.ink2, marginBottom: 24 }}>
          {BRAND.owner}, majitel a truhlář.
        </div>
        <p style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 22, lineHeight: 1.3, margin: '0 0 24px' }}>
          „Jsme menší rodinná firma vážící si každého zákazníka,
          ale především <em style={{ color: t.ochre }}>skuteční výrobci</em> s vlastními
          výrobními prostory."
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, paddingTop: 24, borderTop: `1px solid ${t.rule}` }}>
          {(BRAND.statsAlt.length ? [...BRAND.statsAlt, ['vlastní', 'dílna']] : [['100%', 'vlastní výroba'], ['5 let', 'záruka'], ['vlastní', 'dílna']]).map(([big, small]) => (
            <div key={big}>
              <div style={{ fontFamily: '"Fraunces", serif', fontSize: 40, color: t.ochre, lineHeight: 1 }}>{big}</div>
              <div style={{ fontSize: 11, marginTop: 4, color: t.ink2, letterSpacing: '.08em', textTransform: 'uppercase' }}>{small}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Kontakt */}
      <section style={{ padding: '48px 20px', background: t.ink, color: t.paperLight }}>
        <div style={{ ...tradKicker(t), color: t.ochre, opacity: 1 }}>IV · Kontakt</div>
        <h3 style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 56, letterSpacing: '-0.03em', margin: '12px 0 24px', lineHeight: 0.95, color: t.paperLight }}>
          Pište,<br /><em style={{ fontStyle: 'italic', color: t.ochre }}>volejte.</em>
        </h3>
        <div style={{ marginBottom: 32 }}>
          {[['Telefon', BRAND.phoneDisplay, `tel:${BRAND.phone}`], ['E-mail', BRAND.email, `mailto:${BRAND.email}`], ['Dílna', BRAND.address, null]].map(([l, v, h]) => (
            <div key={l} style={{ padding: '14px 0', borderTop: `1px solid ${t.paperLight}22` }}>
              <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', opacity: .5, marginBottom: 4 }}>{l}</div>
              {h ? <a href={h} style={{ fontFamily: '"Fraunces", serif', fontSize: 18, color: t.paperLight, textDecoration: 'none' }}>{v}</a> : <div style={{ fontFamily: '"Fraunces", serif', fontSize: 18 }}>{v}</div>}
            </div>
          ))}
        </div>
        <div style={{ background: t.paperLight, padding: 24, color: t.ink, marginBottom: 24 }}>
          <div style={tradKicker(t)}>Poptávka</div>
          <h4 style={{ fontFamily: '"Fraunces", serif', fontSize: 24, margin: '8px 0 16px' }}>Pošlete pár řádků.</h4>
          <TradForm t={t} />
        </div>
        <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', opacity: .5, textAlign: 'center' }}>
          © {BRAND.name} · 2026 · {BRAND.location}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { TradiceDesktop, TradiceMobile });