// Direction 4 — STUDIO
// Modern minimal white. Clean off-white background, bold sans typography,
// generous whitespace, product-first showcase. References: NAVO design,
// 3Dwood, TruhláRRRna, Bulthaup. Vibe: 2024 furniture brand × architectural product.
//
// Distinct from Dílna:
//   - Split 50/50 hero (not fullbleed dark)
//   - 4-column light services grid (not 3-col dark gradient cards)
//   - Light kontakt section (not dark warm)
//   - Inter sans throughout (not Fraunces serif)
//   - Modern product-first copy (not heritage)

const _mixS = (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 palette — ne pull z BRAND.palette (která je z loga = nepredikovatelná)
const studioTokens = {
  bg: '#FAFAF7',
  bgAlt: '#F2F0EA',
  ink: '#0A0A0A',
  ink2: '#5A5A5A',
  ink3: '#999999',
  accent: '#1E3128',        // forest dark (modern minimal accent)
  accentSoft: _mixS('#1E3128', '#FFFFFF', 0.7),
  brand: '#0A0A0A',
  rule: '#0A0A0A12',
  ruleStrong: '#0A0A0A24',
  tagline: BRAND.location ? `Truhlářské studio · ${BRAND.location}` : 'Truhlářské studio',
};

const sDisplay = (size) => ({
  fontFamily: '"Inter", -apple-system, sans-serif',
  fontWeight: 800, fontSize: size,
  lineHeight: size > 64 ? 0.96 : 1.05,
  letterSpacing: '-0.04em',
  margin: 0,
});
const sLabel = {
  fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase',
  fontWeight: 600,
};
const sBody = {
  fontFamily: '"Inter", -apple-system, sans-serif',
  fontSize: 16, lineHeight: 1.6, fontWeight: 400,
};

// ============================================================================
// DESKTOP — 1440 wide
// ============================================================================
const StudioDesktop = () => {
  const t = studioTokens;
  return (
    <div style={{
      width: 1440, fontFamily: '"Inter", -apple-system, sans-serif',
      color: t.ink, background: t.bg, fontFeatureSettings: '"ss01", "cv11"',
    }}>
      <StudioNav t={t} />
      <StudioHero t={t} />
      <StudioServices t={t} />
      <StudioWork t={t} />
      <StudioAbout t={t} />
      <StudioContact t={t} />
    </div>
  );
};

// ── Navigation ─────────────────────────────────────────────────────────────
const StudioNav = ({ t }) => (
  <nav style={{
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '32px 80px',
    borderBottom: `1px solid ${t.rule}`,
    background: t.bg,
  }}>
    <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 48, width: 'auto', display: 'block' }} />
    <div style={{ display: 'flex', gap: 48, fontSize: 14, fontWeight: 500 }}>
      {['Práce', 'Studio', 'Proces', 'Kontakt'].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.ink, color: t.bg,
      textDecoration: 'none', fontSize: 14, fontWeight: 600,
      letterSpacing: '-0.01em',
    }}>
      {BRAND.phoneDisplay}
    </a>
  </nav>
);

// ── HERO — split 50/50 with product photo right ────────────────────────────
const StudioHero = ({ t }) => (
  <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 720, borderBottom: `1px solid ${t.rule}` }}>
    <div style={{ padding: '120px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ ...sLabel, color: t.accent, marginBottom: 32 }}>
        {t.tagline}
      </div>
      <h1 style={{ ...sDisplay(96), color: t.ink, marginBottom: 32 }}>
        Kuchyně,<br />
        nábytek<br />
        <span style={{ color: t.accent }}>na míru.</span>
      </h1>
      <p style={{ ...sBody, fontSize: 18, color: t.ink2, maxWidth: 460, marginBottom: 48 }}>
        Navrhujeme a vyrábíme nábytek na míru ve vlastní dílně. Od konzultace
        po montáž — celý proces u nás, žádné subdodávky.
      </p>
      <div style={{ display: 'flex', gap: 16 }}>
        <a href="#kontakt" style={{
          padding: '20px 36px', background: t.ink, color: t.bg,
          textDecoration: 'none', fontSize: 14, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          Konzultace zdarma <span>→</span>
        </a>
        <a href="#prace" style={{
          padding: '20px 36px', background: 'transparent', color: t.ink,
          textDecoration: 'none', fontSize: 14, fontWeight: 600,
          border: `1px solid ${t.ruleStrong}`,
        }}>
          Naše práce
        </a>
      </div>
    </div>
    <div style={{ position: 'relative', background: t.bgAlt, overflow: 'hidden' }}>
      <Img src={BRAND.heroPhoto} alt="" tone={t.accentSoft} style={{ position: 'absolute', inset: 0 }} />
    </div>
  </section>
);

// ── SERVICES — 4-col light minimal grid (NOT dark gradient cards) ──────────
const StudioServices = ({ t }) => {
  const cats = CATEGORIES.length > 0 ? CATEGORIES : [
    { id: 'kuchyne', label: 'Kuchyně' },
    { id: 'skrine', label: 'Skříně' },
    { id: 'interiery', label: 'Interiéry' },
    { id: 'dvere', label: 'Dveře' },
  ];
  return (
    <section style={{ padding: '160px 80px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, marginBottom: 96, alignItems: 'baseline' }}>
        <div>
          <div style={{ ...sLabel, color: t.accent, marginBottom: 20 }}>01 · Co děláme</div>
          <h2 style={{ ...sDisplay(64), color: t.ink }}>
            Vše ze dřeva,<br />ve vlastní dílně.
          </h2>
        </div>
        <p style={{ ...sBody, fontSize: 18, color: t.ink2, maxWidth: 560, alignSelf: 'flex-end' }}>
          {BRAND.tagline || 'Specializujeme se na kuchyně, vestavěné skříně a kompletní interiéry. Pracujeme s masivem, dýhou, laminem podle Vašich preferencí.'}
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${t.rule}` }}>
        {cats.slice(0, 4).map((c, i) => (
          <a key={c.id} href={`#${c.id}`} style={{
            padding: '48px 32px',
            borderRight: i < 3 ? `1px solid ${t.rule}` : 'none',
            borderBottom: `1px solid ${t.rule}`,
            textDecoration: 'none', color: 'inherit',
            background: t.bg, transition: 'background 0.2s',
            display: 'block',
          }}>
            <div style={{
              fontFamily: 'inherit',
              fontSize: 13, fontWeight: 600,
              color: t.ink3, marginBottom: 24,
              letterSpacing: '-0.01em',
            }}>
              0{i + 1}
            </div>
            <h3 style={{ ...sDisplay(28), color: t.ink, marginBottom: 16 }}>
              {c.label}
            </h3>
            <p style={{ ...sBody, fontSize: 14, color: t.ink2, marginBottom: 32 }}>
              {c.short || _serviceCopy(c.id)}
            </p>
            <div style={{ ...sLabel, fontSize: 11, color: t.accent }}>
              Více →
            </div>
          </a>
        ))}
      </div>

      {cats.length > 4 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {cats.slice(4, 8).map((c, i) => (
            <a key={c.id} href={`#${c.id}`} style={{
              padding: '48px 32px',
              borderRight: i < 3 ? `1px solid ${t.rule}` : 'none',
              borderBottom: `1px solid ${t.rule}`,
              textDecoration: 'none', color: 'inherit',
              background: t.bg,
              display: 'block',
            }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: t.ink3, marginBottom: 24 }}>
                0{i + 5}
              </div>
              <h3 style={{ ...sDisplay(28), color: t.ink, marginBottom: 16 }}>
                {c.label}
              </h3>
              <div style={{ ...sLabel, fontSize: 11, color: t.accent, marginTop: 32 }}>
                Více →
              </div>
            </a>
          ))}
        </div>
      )}
    </section>
  );
};

const _serviceCopy = (id) => ({
  kuchyne: 'Kuchyně na míru z masivu, dýhy nebo lamina. Včetně spotřebičů a montáže.',
  skrine: 'Vestavěné skříně do každého prostoru. Posuvné dveře, šatny, garderoby.',
  interiery: 'Kompletní interiérová řešení — od návrhu po finální montáž.',
  dvere: 'Vchodové i interiérové dveře z masivu. Klasika i moderní design.',
  okna: 'Dřevěná okna EURO 68/78/92, špaletová a kastlová okna.',
  reference: 'Naše dosavadní realizace a portfolio dokončených projektů.',
}[id] || 'Práce na míru — jednotlivé poptávky řešíme individuálně.');

// ── WORK — editorial gallery (4-col, no card padding, captions below) ──────
const StudioWork = ({ t }) => {
  const projects = PROJECTS.length > 0 ? PROJECTS.slice(0, 8) : [
    { id: 'p1', title: 'Projekt 1', year: 2024, place: '', material: '', img: '' },
    { id: 'p2', title: 'Projekt 2', year: 2024, place: '', material: '', img: '' },
    { id: 'p3', title: 'Projekt 3', year: 2024, place: '', material: '', img: '' },
    { id: 'p4', title: 'Projekt 4', year: 2024, place: '', material: '', img: '' },
  ];
  return (
    <section id="prace" style={{ padding: '160px 80px', background: t.bgAlt, borderTop: `1px solid ${t.rule}` }}>
      <div style={{ marginBottom: 80 }}>
        <div style={{ ...sLabel, color: t.accent, marginBottom: 20 }}>02 · Vybrané práce</div>
        <h2 style={{ ...sDisplay(64), color: t.ink }}>
          Realizace<br />z poslední doby.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {projects.map((p) => (
          <a key={p.id} href={`#${p.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
            <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden', background: t.bg, marginBottom: 16 }}>
              <Img src={p.img} alt={p.title} tone={t.accentSoft} style={{ position: 'absolute', inset: 0 }} />
            </div>
            <div style={{ ...sBody, fontSize: 11, fontWeight: 600, color: t.ink3, letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 6 }}>
              {p.place || 'Realizace'} · {p.year}
            </div>
            <h3 style={{ ...sDisplay(20), color: t.ink, marginBottom: 4 }}>{p.title}</h3>
            {p.material && (
              <div style={{ ...sBody, fontSize: 13, color: t.ink2 }}>{p.material}</div>
            )}
          </a>
        ))}
      </div>
    </section>
  );
};

// ── ABOUT — clean 2-column with modern copy ────────────────────────────────
const StudioAbout = ({ t }) => (
  <section style={{ padding: '160px 80px', borderTop: `1px solid ${t.rule}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center' }}>
      <div>
        <div style={{ ...sLabel, color: t.accent, marginBottom: 20 }}>03 · Studio</div>
        <h2 style={{ ...sDisplay(64), color: t.ink, marginBottom: 48 }}>
          Vlastní dílna.<br />
          <span style={{ color: t.accent }}>Vlastní výroba.</span>
        </h2>
        <p style={{ ...sBody, fontSize: 18, color: t.ink2, maxWidth: 480, marginBottom: 24 }}>
          {BRAND.name} navrhuje a vyrábí nábytek na míru{BRAND.location ? ` v ${BRAND.location}` : ''}. Žádné
          subdodávky — od první konzultace přes výrobu po finální montáž je
          u Vás vždy stejný řemeslník.
        </p>
        <p style={{ ...sBody, fontSize: 18, color: t.ink2, maxWidth: 480, marginBottom: 48 }}>
          Pracujeme s masivem, dýhou, laminem. Vybíráme materiály podle
          projektu, ne podle marže.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, paddingTop: 32, borderTop: `1px solid ${t.rule}` }}>
          {(BRAND.stats.length ? BRAND.stats : [
            ['Vlastní', 'dílna'],
            ['Bez', 'subdodávek'],
            ['5 let', 'záruka'],
          ]).map(([big, small]) => (
            <div key={big}>
              <div style={{ ...sDisplay(28), color: t.ink, marginBottom: 6 }}>{big}</div>
              <div style={{ ...sBody, fontSize: 13, color: t.ink2 }}>{small}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'relative', aspectRatio: '4/5', background: t.bgAlt, overflow: 'hidden' }}>
        <Img src={BRAND.ownerPhoto || BRAND.heroPhoto} alt={BRAND.owner || BRAND.name} tone={t.accentSoft} style={{ position: 'absolute', inset: 0 }} />
      </div>
    </div>
  </section>
);

// ── CONTACT — light section (NOT dark warm gradient like Dílna) ───────────
const StudioContact = ({ t }) => (
  <section id="kontakt" style={{ padding: '160px 80px', background: t.bgAlt, borderTop: `1px solid ${t.rule}` }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96 }}>
      <div>
        <div style={{ ...sLabel, color: t.accent, marginBottom: 20 }}>04 · Kontakt</div>
        <h2 style={{ ...sDisplay(80), color: t.ink, marginBottom: 32 }}>
          Pojďme<br />
          <span style={{ color: t.accent }}>navrhnout.</span>
        </h2>
        <p style={{ ...sBody, fontSize: 18, color: t.ink2, maxWidth: 460, marginBottom: 64 }}>
          Konzultace a cenová nabídka zdarma. Žádné závazky — pokud to
          nepůjde, řekneme Vám to.
        </p>

        <div style={{ display: 'grid', gap: 32 }}>
          {[
            ['Telefon', BRAND.phoneDisplay, `tel:${BRAND.phone}`],
            ['E-mail', BRAND.email, `mailto:${BRAND.email}`],
            ['Dílna', BRAND.address || (BRAND.location ? `${BRAND.location} · adresa na vyžádání` : 'Adresa na vyžádání'), null],
          ].map(([label, value, href]) => (
            <div key={label} style={{ paddingBottom: 24, borderBottom: `1px solid ${t.rule}` }}>
              <div style={{ ...sLabel, fontSize: 11, color: t.ink3, marginBottom: 8 }}>{label}</div>
              {href ? (
                <a href={href} style={{ ...sDisplay(24), color: t.ink, textDecoration: 'none' }}>
                  {value}
                </a>
              ) : (
                <div style={{ ...sDisplay(24), color: t.ink }}>{value}</div>
              )}
            </div>
          ))}
        </div>
      </div>

      <StudioForm t={t} />
    </div>

    <div style={{
      marginTop: 120, paddingTop: 32, borderTop: `1px solid ${t.rule}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontSize: 12, color: t.ink3,
    }}>
      <div>© {BRAND.name}, {BRAND.location || ''} · 2026</div>
      <div>{BRAND.domain || ''}</div>
    </div>
  </section>
);

const StudioForm = ({ t }) => (
  <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
    <SField label="Jméno" placeholder="Jan Novák" t={t} />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      <SField label="Telefon" placeholder="+420 …" t={t} />
      <SField label="E-mail" placeholder="vy@email.cz" t={t} />
    </div>
    <SField label="O čem chcete mluvit" placeholder="Kuchyně, skříň, interiér…" t={t} multi />
    <button type="submit" style={{
      marginTop: 16, padding: '24px 32px', border: 'none', background: t.ink, color: t.bg,
      fontFamily: 'inherit', fontSize: 14, fontWeight: 600, letterSpacing: '-0.01em',
      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <span>Poslat poptávku</span>
      <span>→</span>
    </button>
  </form>
);

const SField = ({ label, placeholder, t, multi }) => (
  <label style={{ display: 'block' }}>
    <div style={{ ...sLabel, fontSize: 11, color: t.ink3, marginBottom: 10 }}>{label}</div>
    {multi ? (
      <textarea placeholder={placeholder} rows={4} style={_sField(t)} />
    ) : (
      <input placeholder={placeholder} style={_sField(t)} />
    )}
  </label>
);
const _sField = (t) => ({
  width: '100%', padding: '16px 20px',
  background: t.bg, border: `1px solid ${t.rule}`,
  color: t.ink, fontFamily: 'inherit', fontSize: 16, fontWeight: 400,
  resize: 'vertical', outline: 'none',
});

// ============================================================================
// MOBILE — 390 wide
// ============================================================================
const StudioMobile = () => {
  const t = studioTokens;
  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: '24px 24px', borderBottom: `1px solid ${t.rule}` }}>
        <img src={BRAND.logoPath} alt={BRAND.name} style={{ height: 36, width: 'auto' }} />
        <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div style={{ width: 18, height: 1.5, background: t.ink }} />
            <div style={{ width: 18, height: 1.5, background: t.ink }} />
          </div>
        </div>
      </nav>

      <section style={{ padding: '64px 24px 32px' }}>
        <div style={{ ...sLabel, color: t.accent, marginBottom: 20 }}>{t.tagline}</div>
        <h1 style={{ ...sDisplay(56), color: t.ink, marginBottom: 24 }}>
          Kuchyně,<br />nábytek<br /><span style={{ color: t.accent }}>na míru.</span>
        </h1>
        <p style={{ ...sBody, fontSize: 16, color: t.ink2, marginBottom: 32 }}>
          Navrhujeme a vyrábíme ve vlastní dílně. Od konzultace po montáž.
        </p>
        <a href="#kontakt" style={{
          padding: '18px 28px', background: t.ink, color: t.bg,
          textDecoration: 'none', fontSize: 14, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 12,
        }}>
          Konzultace zdarma →
        </a>
      </section>

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

      <section style={{ padding: '64px 24px', borderTop: `1px solid ${t.rule}` }}>
        <div style={{ ...sLabel, color: t.accent, marginBottom: 12 }}>01 · Co děláme</div>
        <h2 style={{ ...sDisplay(40), color: t.ink, marginBottom: 32 }}>
          Vše ze dřeva,<br />ve vlastní dílně.
        </h2>
        <div>
          {(CATEGORIES.length > 0 ? CATEGORIES : [
            { id: 'k', label: 'Kuchyně' }, { id: 's', label: 'Skříně' },
            { id: 'i', label: 'Interiéry' }, { id: 'd', label: 'Dveře' },
          ]).slice(0, 6).map((c, i) => (
            <a key={c.id} style={{
              display: 'block', padding: '24px 0',
              borderBottom: `1px solid ${t.rule}`,
              textDecoration: 'none', color: 'inherit',
            }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: t.ink3, marginBottom: 8 }}>0{i + 1}</div>
              <h3 style={{ ...sDisplay(22), color: t.ink }}>{c.label}</h3>
            </a>
          ))}
        </div>
      </section>

      <section style={{ padding: '64px 24px', background: t.bgAlt, borderTop: `1px solid ${t.rule}` }}>
        <div style={{ ...sLabel, color: t.accent, marginBottom: 12 }}>04 · Kontakt</div>
        <h2 style={{ ...sDisplay(48), color: t.ink, marginBottom: 24 }}>
          Pojďme<br /><span style={{ color: t.accent }}>navrhnout.</span>
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <a href={`tel:${BRAND.phone}`} style={{ ...sDisplay(20), color: t.ink, textDecoration: 'none' }}>
            {BRAND.phoneDisplay}
          </a>
          <a href={`mailto:${BRAND.email}`} style={{ ...sBody, color: t.ink2, textDecoration: 'none' }}>
            {BRAND.email}
          </a>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { StudioDesktop, StudioMobile });