// Direction 3 — MISTR (Light variant)
// Cream paper background + burgundy + copper. Asymmetric type,
// oversized numbers, off-axis photos. Modern confidence on light surface
// — matches a typical warm artisan logo (cream + burgundy + dark brown).

// Hex helper — mix two hex colors for derived shades.
const _mixMistr = (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 — Mistr je bold-modern paper s copper accents. NE pull z BRAND.palette.
const mistrTokens = {
  bg: '#EEEBE2',                                                 // refined warm cream
  bg2: '#E4DFD0',                                                // section variation
  paper: '#FFFFFF',
  paperMuted: '#5C4730',
  copper: '#B87333',                                             // warm copper accent
  copperLight: '#D49966',
  brand: '#1F1810',                                              // dark walnut for primary
  brandDeep: '#0F0C08',
  ink: '#1F1810',
  ink2: '#5C4730',
  rule: '#1F18101A',
};

// ============================================================================
// DESKTOP
// ============================================================================
const MistrDesktop = ({ tweaks }) => {
  const t = mistrTokens;
  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.bg, fontFeatureSettings: '"ss01", "cv11"',
    }}>
      <style>{`
        .mistr-bento-card:hover { border-color: ${t.copper} !important; }
      `}</style>
      {/* NAV */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 64px', fontSize: 13, position: 'relative', zIndex: 2,
      }}>
        <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 56, width: 'auto', display: 'block' }} />
        <div style={{ display: 'flex', gap: 8, padding: 4, border: `1px solid ${t.rule}`, borderRadius: 999 }}>
          {['Práce', 'Obory', 'O nás', 'Kontakt'].map(l => (
            <a key={l} href="#" style={{
              padding: '8px 18px', borderRadius: 999, color: t.ink, textDecoration: 'none',
              fontSize: 13, transition: 'background .15s',
            }}>{l}</a>
          ))}
        </div>
        <a href={`tel:${BRAND.phone}`} style={{
          padding: '12px 22px', borderRadius: 999, background: t.brand, color: t.paper,
          textDecoration: 'none', fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 8,
        }}>
          <Icon name="phone" size={14} color={t.paper} />
          {BRAND.phoneDisplay}
        </a>
      </nav>

      {/* HERO */}
      {heroLayout === 'full-photo' && <MistrHeroFull t={t} />}
      {heroLayout === 'split' && <MistrHeroSplit t={t} />}
      {heroLayout === 'typographic' && <MistrHeroType t={t} />}

      {/* MARQUEE strip */}
      <div style={{
        padding: '24px 0', borderTop: `1px solid ${t.rule}`, borderBottom: `1px solid ${t.rule}`,
        overflow: 'hidden', whiteSpace: 'nowrap', fontFamily: '"Fraunces", serif',
        fontSize: 28, color: t.paperMuted, fontStyle: 'italic',
      }}>
        {[...CATEGORIES, ...CATEGORIES.slice(0, 2)].map((c, i, arr) => (
          <React.Fragment key={`${c.id}-${i}`}>
            <span style={{ marginRight: 48, marginLeft: i === 1 ? 48 : 0 }}>{c.label}</span>
            {i < arr.length - 1 && '•'}
          </React.Fragment>
        ))}
      </div>

      {/* CO DĚLÁME — large asymmetric cards */}
      <section style={{ padding: '120px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, marginBottom: 80, alignItems: 'end' }}>
          <div>
            <div style={mistrKicker(t)}>· 01 — Obory</div>
            <h2 style={{
              fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 112, letterSpacing: '-0.035em',
              margin: '24px 0 0', lineHeight: 0.9, color: t.ink,
            }}>
              Co
              <br />
              <em style={{ fontStyle: 'italic', color: t.brand }}>stavíme.</em>
            </h2>
          </div>
          <p style={{ fontSize: 20, lineHeight: 1.5, color: t.ink2, maxWidth: 560, marginBottom: 16 }}>
            Šest oborů, jedna dílna. Od kuchyně přes vestavné skříně až po pergolu —
            všechno vyrobíme sami{BRAND.location ? ` v ${BRAND.location}` : ''}, podle vás.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gridAutoRows: 'minmax(220px, auto)', gap: 16 }}>
          {/* Bento layout */}
          {[
            { cat: CATEGORIES[0], span: { col: 'span 7', row: 'span 2' } },
            { cat: CATEGORIES[1], span: { col: 'span 5', row: 'span 1' } },
            { cat: CATEGORIES[3], span: { col: 'span 5', row: 'span 1' } },
            { cat: CATEGORIES[2], span: { col: 'span 4', row: 'span 1' } },
            { cat: CATEGORIES[4], span: { col: 'span 4', row: 'span 1' } },
            { cat: CATEGORIES[5], span: { col: 'span 4', row: 'span 1' } },
          ].map(({ cat: c, span }, i) => (
            <a key={c.id} className="mistr-bento-card" style={{
              gridColumn: span.col, gridRow: span.row,
              position: 'relative', overflow: 'hidden', borderRadius: 8,
              textDecoration: 'none', color: t.ink, cursor: 'pointer',
              background: t.bg2,
              border: '1px solid transparent', transition: 'border-color .2s',
            }}>
              <Img src={c.img} alt={c.label} tone={t.copper} style={{ position: 'absolute', inset: 0 }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 30%, rgba(31,24,18,.85) 100%)' }} />
              <div style={{ position: 'absolute', inset: 0, padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{
                    fontFamily: '"Fraunces", serif', fontStyle: 'italic',
                    fontSize: 56, fontWeight: 300, color: t.copper, lineHeight: 1,
                    textShadow: '0 2px 12px rgba(0,0,0,.4)',
                  }}>
                    0{i + 1}
                  </div>
                  <div style={{
                    width: 36, height: 36, borderRadius: '50%',
                    border: `1px solid ${t.copper}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: t.copper, background: 'rgba(31,24,18,.4)',
                  }}>↗</div>
                </div>
                <div>
                  <div style={{ fontFamily: '"Fraunces", serif', fontSize: 44, fontWeight: 400, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 12, color: t.paper }}>
                    {c.label}
                  </div>
                  <div style={{ fontSize: 14, color: '#E8DEC8CC', maxWidth: 320 }}>
                    {c.short}
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* REALIZACE */}
      <section style={{ padding: '80px 64px 120px', background: t.bg2 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 56 }}>
          <div>
            <div style={mistrKicker(t)}>· 02 — Realizace</div>
            <h2 style={{
              fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 112, letterSpacing: '-0.035em',
              margin: '24px 0 0', lineHeight: 0.9, color: t.ink,
            }}>
              <em style={{ fontStyle: 'italic', color: t.copper }}>Z naší</em> dílny.
            </h2>
          </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 18px', borderRadius: 999, cursor: 'pointer',
                border: `1px solid ${filter === f.id ? t.copper : t.rule}`,
                background: filter === f.id ? t.copper : 'transparent',
                color: filter === f.id ? t.paper : t.ink,
                fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
              }}>{f.label}</button>
            ))}
          </div>
        </div>
        <MistrPortfolio items={filtered} style={portfolioStyle} t={t} />
      </section>

      {/* PROCES — numbered horizontal */}
      <section style={{ padding: '120px 64px' }}>
        <div style={{ marginBottom: 64 }}>
          <div style={mistrKicker(t)}>· 03 — Jak pracujeme</div>
          <h2 style={{
            fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 96, letterSpacing: '-0.035em',
            margin: '24px 0 0', lineHeight: 0.9,
          }}>
            Čtyři kroky.<br /><em style={{ fontStyle: 'italic', color: t.copper }}>Žádné překvapení.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {PROCESS.map((p, i) => (
            <div key={p.n} style={{ padding: '32px 24px', borderTop: `1px solid ${t.copper}`, position: 'relative' }}>
              <div style={{
                fontFamily: '"Fraunces", serif', fontStyle: 'italic',
                fontSize: 88, fontWeight: 300, color: t.copper, lineHeight: 1,
                marginBottom: 24, opacity: .9,
              }}>{p.n}</div>
              <div style={{ fontFamily: '"Fraunces", serif', fontSize: 28, marginBottom: 12, letterSpacing: '-0.01em' }}>
                {p.title}
              </div>
              <div style={{ fontSize: 15, lineHeight: 1.55, color: t.ink2 }}>
                {p.body}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* O NÁS — DARK accent panel (jediná dark sekce v Mistr = visual hook) */}
      <section style={{
        position: 'relative', padding: 0,
        background: '#1F1812', borderTop: `1px solid #00000033`,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 720 }}>
          <Img
            src={BRAND.ownerPhoto}
            alt={BRAND.owner} tone={t.copper}
            style={{ width: '100%', height: '100%', minHeight: 720 }}
          />
          <div style={{ padding: '96px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontSize: 13, letterSpacing: '.16em', textTransform: 'uppercase', color: t.copper, fontWeight: 500 }}>· 04 — O nás</div>
            <h2 style={{
              fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 88, letterSpacing: '-0.03em',
              margin: '24px 0 32px', lineHeight: 0.95, color: t.copper,
            }}>
              Skuteční<br /><em style={{ fontStyle: 'italic', color: t.copper }}>výrobci.</em>
            </h2>
            <p style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 26, lineHeight: 1.4, marginBottom: 24, color: t.bg }}>
              „Jsme menší rodinná firma vážící si každého zákazníka,
              ale především <em style={{ color: t.copper }}>skuteční výrobci</em> s vlastními
              výrobními prostory."
            </p>
            <div style={{ fontSize: 13, letterSpacing: '.1em', textTransform: 'uppercase', color: '#D9CCB3', marginBottom: 48 }}>
              — {BRAND.owner}, truhlář
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, paddingTop: 40, borderTop: `1px solid ${t.copper}33` }}>
              {(BRAND.stats.length ? BRAND.stats : [['vlastní', 'dílna'], ['5 let', 'záruka']]).map(([big, small]) => (
                <div key={big}>
                  <div style={{ fontFamily: '"Fraunces", serif', fontSize: 56, color: t.copper, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{big}</div>
                  <div style={{ fontSize: 12, marginTop: 8, color: '#D9CCB3', letterSpacing: '.1em', textTransform: 'uppercase' }}>{small}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* KONTAKT */}
      <section style={{ padding: '120px 64px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '5fr 4fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={mistrKicker(t)}>· 05 — Kontakt</div>
            <h2 style={{
              fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 144, letterSpacing: '-0.04em',
              margin: '24px 0 32px', lineHeight: 0.9,
            }}>
              Co<br />stavíme<br /><em style={{ fontStyle: 'italic', color: t.copper }}>Vám?</em>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: t.ink2, maxWidth: 460, marginBottom: 48 }}>
              Zavolejte, napište nebo přijeďte do dílny. První konzultace
              i cenová nabídka jsou zdarma.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {[
                ['Telefon', BRAND.phoneDisplay, `tel:${BRAND.phone}`, 'phone'],
                ['E-mail', BRAND.email, `mailto:${BRAND.email}`, 'mail'],
                ['Dílna', BRAND.address, null, 'pin'],
              ].map(([l, v, h, ic]) => (
                <a key={l} href={h || undefined} style={{
                  display: 'grid', gridTemplateColumns: '40px 110px 1fr', gap: 16, alignItems: 'center',
                  padding: '24px 0', borderBottom: `1px solid ${t.rule}`,
                  color: t.ink, textDecoration: 'none',
                }}>
                  <Icon name={ic} size={20} color={t.copper} />
                  <div style={{ fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: t.ink2 }}>{l}</div>
                  <div style={{ fontFamily: '"Fraunces", serif', fontSize: 22 }}>{v}</div>
                </a>
              ))}
            </div>
          </div>

          <div style={{ background: t.bg2, padding: 48, borderRadius: 16 }}>
            <h4 style={{ fontFamily: '"Fraunces", serif', fontSize: 32, margin: '0 0 8px' }}>Domluvte schůzku</h4>
            <p style={{ fontSize: 14, color: t.ink2, margin: '0 0 32px' }}>Odpovíme zpravidla do 24 hodin.</p>
            <MistrForm t={t} />
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{
        padding: '48px 64px', borderTop: `1px solid ${t.rule}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12, color: t.ink2, letterSpacing: '.08em',
      }}>
        <div>© {BRAND.name} · 2026</div>
        <div style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 18, color: t.copper }}>
          Made in {BRAND.location || BRAND.name}.
        </div>
        <div>Návrh & dílna</div>
      </footer>
    </div>
  );
};

// ── Hero variants ──────────────────────────────────────────────────────────
const MistrHeroFull = ({ t }) => (
  <>
    <section style={{ position: 'relative', height: 760, overflow: 'hidden', margin: '0 24px', borderRadius: 16 }}>
      <Img src={BRAND.heroPhoto} alt="" tone={t.copper} style={{ position: 'absolute', inset: 0 }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,24,16,.7) 0%, rgba(31,24,16,.85) 75%)' }} />
      <div style={{ position: 'absolute', inset: 0, padding: '56px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: t.paper, fontSize: 13, letterSpacing: '.18em', textTransform: 'uppercase' }}>
          <div style={{ width: 32, height: 1, background: t.copper }} />
          Rodinné truhlářství{BRAND.since ? ` · od ${BRAND.since}` : ''}
        </div>
        <div>
          <h1 style={{
            fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 192, lineHeight: 0.85, letterSpacing: '-0.04em',
            margin: 0, color: t.paper,
          }}>
            Dřevo,<br /><em style={{ fontStyle: 'italic', color: t.copper, fontWeight: 300 }}>jak má být.</em>
          </h1>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 48 }}>
            <p style={{ fontSize: 20, color: t.paper, opacity: .9, maxWidth: 440, lineHeight: 1.5 }}>
              Kuchyně, interiéry, vestavné skříně i pergoly.
              Vlastní dílna{BRAND.location ? ` v ${BRAND.location}` : ''}, žádné subdodávky.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <MistrBtn label="Domluvit konzultaci" t={t} primary />
              <MistrBtn label="Vidět realizace" t={t} onDark />
            </div>
          </div>
        </div>
      </div>
    </section>
    {/* Copper signature stripe — vizuální podpis Mistr směru */}
    <div style={{ height: 4, background: t.copper, margin: '24px 24px 0' }} />
  </>
);

const MistrHeroSplit = ({ t }) => (
  <section style={{ padding: '40px 64px 80px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 32, alignItems: 'stretch' }}>
      <div style={{ paddingTop: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: t.ink2, fontSize: 13, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 40 }}>
          <div style={{ width: 32, height: 1, background: t.copper }} />
          Rodinné truhlářství{BRAND.since ? ` · od ${BRAND.since}` : ''}
        </div>
        <h1 style={{
          fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 160, lineHeight: 0.88, letterSpacing: '-0.04em',
          margin: 0,
        }}>
          Dřevo,<br /><em style={{ fontStyle: 'italic', color: t.copper, fontWeight: 300 }}>jak má být.</em>
        </h1>
        <p style={{ fontSize: 20, lineHeight: 1.5, color: t.ink2, maxWidth: 480, margin: '40px 0' }}>
          Kuchyně, interiéry i pergoly. Vlastní dílna{BRAND.location ? ` v ${BRAND.location}` : ''}, žádné subdodávky.
        </p>
        <div style={{ display: 'flex', gap: 12 }}>
          <MistrBtn label="Domluvit konzultaci" t={t} primary />
          <MistrBtn label="Vidět realizace" t={t} />
        </div>
      </div>
      <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', minHeight: 640 }}>
        <Img src={BRAND.heroPhoto} alt="" tone={t.copper} style={{ position: 'absolute', inset: 0 }} />
        <div style={{
          position: 'absolute', bottom: 24, left: 24, right: 24,
          background: 'rgba(31,24,18,.7)', backdropFilter: 'blur(8px)',
          padding: '20px 24px', borderRadius: 8, color: t.paper,
        }}>
          <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: t.copperLight, marginBottom: 4 }}>Vybraná realizace</div>
          <div style={{ fontFamily: '"Fraunces", serif', fontSize: 20 }}>{PROJECTS[0] ? `${CATEGORIES.find(c => c.id === PROJECTS[0].cat)?.label || ''} · ${PROJECTS[0].title} · ${PROJECTS[0].year}` : 'Vybraná realizace'}</div>
        </div>
      </div>
    </div>
  </section>
);

const MistrHeroType = ({ t }) => (
  <section style={{ padding: '64px 64px 80px' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: t.ink2, fontSize: 13, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 64 }}>
      <div style={{ width: 32, height: 1, background: t.copper }} />
      Rodinné truhlářství{BRAND.location ? ` v ${BRAND.location}` : ''}{BRAND.since ? ` · od ${BRAND.since}` : ''}
    </div>
    <h1 style={{
      fontFamily: '"Fraunces", serif', fontWeight: 200, fontSize: 280, lineHeight: 0.82, letterSpacing: '-0.05em',
      margin: 0,
    }}>
      Dřevo, <em style={{ fontStyle: 'italic', color: t.copper, fontWeight: 200 }}>jak</em><br />
      má <em style={{ fontStyle: 'italic', color: t.copper, fontWeight: 200 }}>být.</em>
    </h1>
    <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, alignItems: 'end' }}>
      <p style={{ fontSize: 20, lineHeight: 1.5, color: t.ink2, maxWidth: 360, gridColumn: 'span 2' }}>
        Kuchyně, interiéry, vestavné skříně i pergoly. Vlastní dílna, žádné subdodávky.
        Co se ujme u nás v dílně, drží další generace.
      </p>
      <div style={{ display: 'flex', gap: 12, justifySelf: 'end' }}>
        <MistrBtn label="Konzultace" t={t} primary />
        <MistrBtn label="Realizace" t={t} />
      </div>
    </div>
  </section>
);

// ── helpers ────────────────────────────────────────────────────────────────
const mistrKicker = (t) => ({
  fontSize: 13, letterSpacing: '.16em', textTransform: 'uppercase',
  color: t.copper, fontWeight: 500,
});

const MistrBtn = ({ label, t, primary, onDark }) => (
  <button style={{
    padding: '16px 28px', borderRadius: 999,
    border: primary ? 'none' : `1px solid ${onDark ? `${t.paper}55` : `${t.ink}33`}`,
    background: primary ? t.brand : 'transparent',
    color: primary ? t.paper : (onDark ? t.paper : t.ink),
    fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
    cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8,
  }}>
    {label}
    {primary && <span>→</span>}
  </button>
);

const MistrPortfolio = ({ 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: 16 }}>
        {cols.map((col, ci) => (
          <div key={ci} style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: ci === 1 ? 64 : ci === 2 ? 32 : 0 }}>
            {col.map((p, i) => (
              <MistrCard key={p.id} p={p} t={t} aspect={(ci + i) % 2 === 0 ? '3/4' : '4/3'} />
            ))}
          </div>
        ))}
      </div>
    );
  }
  if (style === 'carousel') {
    return (
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', gap: 24, overflow: 'hidden' }}>
          {items.slice(0, 4).map((p, i) => (
            <div key={p.id} style={{ flex: i === 0 ? '0 0 50%' : '0 0 25%' }}>
              <MistrCard p={p} t={t} aspect="4/3" large={i === 0} />
            </div>
          ))}
        </div>
        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          {['←', '→'].map(a => (
            <button key={a} style={{
              width: 48, height: 48, borderRadius: '50%',
              border: `1px solid ${t.rule}`, background: 'transparent', color: t.ink,
              cursor: 'pointer', fontSize: 18,
            }}>{a}</button>
          ))}
        </div>
      </div>
    );
  }
  // editorial — large hero card on top, grid below
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <MistrCard p={items[0] || PROJECTS[0]} t={t} aspect="21/9" large />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {items.slice(1).map(p => <MistrCard key={p.id} p={p} t={t} aspect="4/3" />)}
      </div>
    </div>
  );
};

const MistrCard = ({ p, t, aspect = '4/3', large }) => (
  <a href={`#${p.id}`} style={{ display: 'block', textDecoration: 'none', color: 'inherit', cursor: 'pointer', position: 'relative', borderRadius: 12, overflow: 'hidden' }}>
    <Img src={p.img} alt={p.title} tone={t.copper} style={{ aspectRatio: aspect, width: '100%' }} />
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(31,24,18,.8) 100%)' }} />
    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: t.copperLight, marginBottom: 6 }}>
          {p.year} · {CATEGORIES.find(c => c.id === p.cat)?.label}
        </div>
        <div style={{ fontFamily: '"Fraunces", serif', fontSize: large ? 36 : 24, lineHeight: 1.1, letterSpacing: '-0.01em', color: t.paper }}>
          {p.title}
        </div>
        <div style={{ fontSize: 13, marginTop: 4, color: '#E8DEC8CC' }}>
          {p.material}
        </div>
      </div>
      <div style={{
        width: 40, height: 40, borderRadius: '50%',
        background: t.brand, color: t.paper, display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>→</div>
    </div>
  </a>
);

const MistrForm = ({ t }) => (
  <form style={{ display: 'flex', flexDirection: 'column', gap: 16 }} onSubmit={e => e.preventDefault()}>
    <MistrField label="Jméno" placeholder="Jan Novák" t={t} />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <MistrField label="Telefon" placeholder="+420 …" t={t} />
      <MistrField label="E-mail" placeholder="vy@email.cz" t={t} />
    </div>
    <MistrField label="O čem mluvíme" placeholder="Stručně, co plánujete…" t={t} multi />
    <button type="submit" style={{
      marginTop: 12, padding: '18px 24px', border: 'none', borderRadius: 999,
      background: t.brand, color: t.paper,
      fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
      cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    }}>Odeslat poptávku <span>→</span></button>
  </form>
);

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

// ============================================================================
// MOBILE
// ============================================================================
const MistrMobile = ({ tweaks }) => {
  const t = mistrTokens;
  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.bg }}>
      {/* Nav */}
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 20px' }}>
        <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 40, width: 'auto', display: 'block' }} />
        <a href={`tel:${BRAND.phone}`} style={{ padding: '8px 14px', borderRadius: 999, background: t.brand, color: t.paper, textDecoration: 'none', fontSize: 12, fontWeight: 500 }}>Zavolat</a>
      </nav>

      {/* Hero */}
      <section style={{ padding: '24px 20px 48px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: t.ink2, fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', marginBottom: 24 }}>
          <div style={{ width: 24, height: 1, background: t.copper }} />
          Rodinné truhlářství{BRAND.since ? ` · ${BRAND.since}` : ''}
        </div>
        <h1 style={{
          fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 72, lineHeight: 0.88, letterSpacing: '-0.04em',
          margin: 0,
        }}>
          Dřevo,<br /><em style={{ fontStyle: 'italic', color: t.copper, fontWeight: 300 }}>jak má být.</em>
        </h1>
        <p style={{ fontSize: 16, lineHeight: 1.5, color: t.ink2, margin: '24px 0' }}>
          Kuchyně, interiéry, pergoly. Vlastní dílna{BRAND.location ? ` v ${BRAND.location}` : ''}.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <MistrBtn label="Domluvit konzultaci" t={t} primary />
          <MistrBtn label="Vidět realizace" t={t} />
        </div>
        <Img src={BRAND.heroPhoto} alt="" tone={t.copper} style={{ aspectRatio: '4/3', width: '100%', marginTop: 32, borderRadius: 12 }} />
      </section>

      {/* Co stavíme */}
      <section style={{ padding: '48px 20px' }}>
        <div style={mistrKicker(t)}>· 01 — Obory</div>
        <h2 style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 56, lineHeight: 0.9, letterSpacing: '-0.035em', margin: '12px 0 32px' }}>
          Co<br /><em style={{ fontStyle: 'italic', color: t.copper }}>stavíme.</em>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
          {CATEGORIES.map((c, i) => (
            <a key={c.id} style={{ position: 'relative', aspectRatio: '5/3', overflow: 'hidden', borderRadius: 12, background: t.bg2 }}>
              <Img src={c.img} alt="" tone={t.copper} style={{ position: 'absolute', inset: 0 }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 30%, rgba(31,24,18,.85) 100%)' }} />
              <div style={{ position: 'absolute', inset: 0, padding: 20, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ fontSize: 11, letterSpacing: '.16em', textTransform: 'uppercase', color: t.copperLight }}>0{i + 1}</div>
                <div>
                  <div style={{ fontFamily: '"Fraunces", serif', fontSize: 28, color: t.paper, lineHeight: 1 }}>{c.label}</div>
                  <div style={{ fontSize: 12, color: '#E8DEC8CC', marginTop: 4 }}>{c.short}</div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Realizace */}
      <section style={{ padding: '48px 20px', background: t.bg2 }}>
        <div style={mistrKicker(t)}>· 02 — Realizace</div>
        <h2 style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 56, lineHeight: 0.9, letterSpacing: '-0.035em', margin: '12px 0 24px' }}>
          <em style={{ fontStyle: 'italic', color: t.copper }}>Z naší</em> dílny.
        </h2>
        <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: '8px 14px', borderRadius: 999, cursor: 'pointer',
              border: `1px solid ${filter === f.id ? t.copper : t.rule}`,
              background: filter === f.id ? t.copper : 'transparent',
              color: filter === f.id ? t.paper : t.ink, fontSize: 12, fontWeight: 500,
            }}>{f.label}</button>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {filtered.slice(0, 6).map(p => <MistrCard key={p.id} p={p} t={t} aspect="4/3" large />)}
        </div>
      </section>

      {/* Proces */}
      <section style={{ padding: '48px 20px' }}>
        <div style={mistrKicker(t)}>· 03 — Postup</div>
        <h2 style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 48, lineHeight: 0.9, letterSpacing: '-0.035em', margin: '12px 0 32px' }}>
          Čtyři kroky.<br /><em style={{ fontStyle: 'italic', color: t.copper }}>Žádné překvapení.</em>
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {PROCESS.map(p => (
            <div key={p.n} style={{ padding: '20px 0', borderTop: `1px solid ${t.copper}` }}>
              <div style={{ fontFamily: '"Fraunces", serif', fontStyle: 'italic', fontSize: 56, fontWeight: 300, color: t.copper, lineHeight: 1, marginBottom: 12 }}>{p.n}</div>
              <div style={{ fontFamily: '"Fraunces", serif', fontSize: 22, marginBottom: 8 }}>{p.title}</div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: t.ink2 }}>{p.body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* O nás — DARK accent panel (mobile) */}
      <section style={{ background: '#1F1812' }}>
        <Img src={BRAND.ownerPhoto} alt={BRAND.owner} tone={t.copper} style={{ aspectRatio: '4/3', width: '100%' }} />
        <div style={{ padding: '40px 20px' }}>
          <div style={{ fontSize: 13, letterSpacing: '.16em', textTransform: 'uppercase', color: t.copper, fontWeight: 500 }}>· 04 — O nás</div>
          <h2 style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 48, lineHeight: 0.95, letterSpacing: '-0.03em', margin: '12px 0 24px', color: t.copper }}>
            Skuteční<br /><em style={{ fontStyle: 'italic', color: t.copper }}>výrobci.</em>
          </h2>
          <p style={{ fontFamily: '"Fraunces", serif', fontSize: 20, lineHeight: 1.4, marginBottom: 16, color: t.bg }}>
            „Jsme menší rodinná firma vážící si každého zákazníka,
            ale především <em style={{ color: t.copper }}>skuteční výrobci</em>."
          </p>
          <div style={{ fontSize: 12, letterSpacing: '.1em', textTransform: 'uppercase', color: '#D9CCB3', marginBottom: 32 }}>— {BRAND.owner}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 24, borderTop: `1px solid ${t.copper}33` }}>
            {(BRAND.stats.length ? BRAND.stats : [['vlastní', 'dílna'], ['5', 'let zár.']]).map(([big, small]) => (
              <div key={big}>
                <div style={{ fontFamily: '"Fraunces", serif', fontSize: 36, color: t.copper, lineHeight: 1 }}>{big}</div>
                <div style={{ fontSize: 11, marginTop: 4, color: '#D9CCB3', letterSpacing: '.08em', textTransform: 'uppercase' }}>{small}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Kontakt */}
      <section style={{ padding: '48px 20px' }}>
        <div style={mistrKicker(t)}>· 05 — Kontakt</div>
        <h2 style={{ fontFamily: '"Fraunces", serif', fontWeight: 300, fontSize: 72, lineHeight: 0.88, letterSpacing: '-0.04em', margin: '12px 0 24px' }}>
          Co<br />stavíme<br /><em style={{ fontStyle: 'italic', color: t.copper }}>Vám?</em>
        </h2>
        <div style={{ marginBottom: 32 }}>
          {[
            ['Telefon', BRAND.phoneDisplay, `tel:${BRAND.phone}`, 'phone'],
            ['E-mail', BRAND.email, `mailto:${BRAND.email}`, 'mail'],
            ['Dílna', BRAND.address, null, 'pin'],
          ].map(([l, v, h, ic]) => (
            <a key={l} href={h || undefined} style={{
              display: 'flex', alignItems: 'center', gap: 16,
              padding: '16px 0', borderBottom: `1px solid ${t.rule}`,
              color: t.ink, textDecoration: 'none',
            }}>
              <Icon name={ic} size={18} color={t.copper} />
              <div>
                <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: t.ink2, marginBottom: 2 }}>{l}</div>
                <div style={{ fontFamily: '"Fraunces", serif', fontSize: 17 }}>{v}</div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ background: t.bg2, padding: 24, borderRadius: 12 }}>
          <h4 style={{ fontFamily: '"Fraunces", serif', fontSize: 22, margin: '0 0 16px' }}>Domluvit schůzku</h4>
          <MistrForm t={t} />
        </div>
      </section>

      <footer style={{ padding: '32px 20px', borderTop: `1px solid ${t.rule}`, fontSize: 11, color: t.ink2, textAlign: 'center', letterSpacing: '.08em' }}>
        © {BRAND.name} · 2026
      </footer>
    </div>
  );
};

Object.assign(window, { MistrDesktop, MistrMobile });