// logos.jsx — Logo exploration page (8-10 concepts)

function LogosPage({ tweaks, onNav }) {
  return (
    <main>
      <section style={{ padding: 'clamp(140px, 16vw, 200px) var(--gutter) 0' }}>
        <div className="shell" style={{ padding: 0 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Logo exploration</div>
          <h1 className="h1" style={{ margin: '0 0 32px' }}>
            Desať <em className="italic-script" style={{ color: 'var(--accent)' }}>návrhov.</em><br/>
            Jeden Liptov.
          </h1>
          <p className="lead" style={{ margin: 0, marginBottom: 32 }}>
            Hrubé skice cez rôzne smery — monogram, wordmark, pečať, symbol. Každý koncept ukazujem v
            tmavej a svetlej verzii. Zámerne v rôznych pádoch zložitosti; finálny smer sa vyladí
            po stretnutiach.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 60 }}>
        <div className="shell">
          <div className="logo-grid">
            <LogoCard tag="01 · Refined script" name="Pôvodný script — upravený">
              <LogoScript />
            </LogoCard>
            <LogoCard tag="02 · Geometric monogram" name="L · ostrý, art-deco" tone="toned">
              <LogoGeoL />
            </LogoCard>
            <LogoCard tag="03 · L + štít" name="L s horou v negatíve">
              <LogoLShield />
            </LogoCard>

            <LogoCard tag="04 · Didone wordmark" name="Wordmark — Didone serif" tone="light">
              <LogoDidone />
            </LogoCard>
            <LogoCard tag="05 · Modern sans" name="Wordmark — geometrický sans">
              <LogoSans />
            </LogoCard>
            <LogoCard tag="06 · Tri vrcholy" name="Symbol — 3 hory, 3 doliny" tone="toned">
              <LogoPeaks />
            </LogoCard>

            <LogoCard tag="07 · Lipový list" name="Symbol — list lipy">
              <LogoLeaf />
            </LogoCard>
            <LogoCard tag="08 · Pečať" name="Kruhová pečať" tone="light">
              <LogoSeal />
            </LogoCard>
            <LogoCard tag="09 · Editorial stack" name="Stacked editorial">
              <LogoStack />
            </LogoCard>

            <LogoCard tag="10 · Serif small caps" name="Serif small caps s linkou" tone="toned">
              <LogoSerifCaps />
            </LogoCard>
            <LogoCard tag="Original" name="Pôvodné logo (pre porovnanie)" tone="light">
              <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(56px, 7vw, 120px)', letterSpacing: '-0.02em', color: 'rgba(11,15,13,0.85)', lineHeight: 1 }}>
                Liptove
              </span>
            </LogoCard>
            <LogoCard tag="Bonus · Mono lockup" name="L + Liptove · horizontálny">
              <LogoLockup />
            </LogoCard>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--surface)', borderTop: '1px solid var(--line)' }}>
        <div className="shell">
          <SectionHead
            eyebrow="Reálne použitie"
            title="Ako logá fungujú v živote."
            lead="Náhľad favicon, hlavičky webu a printovej aplikácie pre vybrané koncepty."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            <UseCase title="Favicon · 32 px"><LogoGeoL small /></UseCase>
            <UseCase title="Hlavička webu"><LogoLockup /></UseCase>
            <UseCase title="Pečať na list"><LogoSeal /></UseCase>
          </div>
        </div>
      </section>
    </main>
  );
}

function LogoCard({ tag, name, tone = 'dark', children }) {
  return (
    <div className={`logo-card ${tone}`}>
      <span className="tag">{tag}</span>
      <div style={{ display: 'grid', placeItems: 'center', padding: 40, width: '100%' }}>{children}</div>
      <span className="name">{name}</span>
    </div>
  );
}

function UseCase({ title, children }) {
  return (
    <div style={{ padding: 32, border: '1px solid var(--line)', borderRadius: 'var(--radius-card)', background: 'var(--bg)', display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div className="text-mute" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{title}</div>
      <div style={{ display: 'grid', placeItems: 'center', minHeight: 100 }}>{children}</div>
    </div>
  );
}

// ── 01 · Refined script ─────────────────────────────────────────────────
function LogoScript() {
  return (
    <span style={{ fontFamily: 'Pinyon Script, Cormorant Garamond, cursive', fontStyle: 'italic', fontSize: 'clamp(56px, 7vw, 110px)', letterSpacing: '-0.01em', color: 'var(--text)', lineHeight: 1 }}>
      Liptove
    </span>
  );
}

// ── 02 · Geometric L monogram ──────────────────────────────────────────
function LogoGeoL({ small = false }) {
  const s = small ? 32 : 100;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: small ? 0 : 16 }}>
      <svg width={s} height={s} viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="6" style={{ color: 'var(--accent)' }}>
        <path d="M22 18 L22 78 L78 78" strokeLinecap="square"/>
        <path d="M22 18 L22 50 L52 50" stroke="currentColor" strokeOpacity="0.4"/>
      </svg>
      {!small && (
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--text)' }}>
          Liptove
        </span>
      )}
    </div>
  );
}

// ── 03 · L + mountain shield ───────────────────────────────────────────
function LogoLShield() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <svg width="100" height="110" viewBox="0 0 100 110" fill="none">
        <path d="M50 5 L92 25 L92 65 Q92 90 50 105 Q8 90 8 65 L8 25 Z"
          stroke="var(--accent)" strokeWidth="2" fill="none"/>
        {/* L cut + mountains */}
        <path d="M30 30 L30 75 L70 75" stroke="var(--accent)" strokeWidth="5" strokeLinecap="square"/>
        <path d="M30 75 L42 58 L52 68 L62 50 L75 70 L70 75 Z" fill="var(--accent)" opacity="0.4"/>
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--text-soft)' }}>
        Liptove
      </span>
    </div>
  );
}

// ── 04 · Didone wordmark ───────────────────────────────────────────────
function LogoDidone() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <span style={{ fontFamily: '"Bodoni Moda", "Didot", "Cormorant Garamond", serif', fontWeight: 600, fontSize: 'clamp(48px, 6vw, 92px)', letterSpacing: '-0.02em', color: 'var(--bg)', lineHeight: 0.95 }}>
        LIPTOVE
      </span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 24, height: 1, background: 'rgba(11,15,13,0.4)' }}/>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(11,15,13,0.55)' }}>est. 2018 · Liptov SK</span>
        <span style={{ width: 24, height: 1, background: 'rgba(11,15,13,0.4)' }}/>
      </div>
    </div>
  );
}

// ── 05 · Modern geometric sans ─────────────────────────────────────────
function LogoSans() {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
      <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 'clamp(40px, 5vw, 72px)', letterSpacing: '-0.04em', color: 'var(--text)', lineHeight: 1 }}>liptove</span>
      <span style={{ width: 8, height: 8, background: 'var(--accent)', borderRadius: 999, marginLeft: 4 }} />
    </div>
  );
}

// ── 06 · Three peaks symbol ────────────────────────────────────────────
function LogoPeaks() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <svg width="120" height="80" viewBox="0 0 120 80" fill="none">
        <path d="M5 65 L30 25 L48 50 L60 15 L80 55 L98 30 L115 65 Z" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinejoin="miter"/>
        <line x1="5" y1="68" x2="115" y2="68" stroke="var(--accent)" strokeWidth="2"/>
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '0.04em', color: 'var(--text)', fontStyle: 'italic' }}>Liptove</span>
    </div>
  );
}

// ── 07 · Linden leaf ───────────────────────────────────────────────────
function LogoLeaf() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
      <svg width="90" height="100" viewBox="0 0 90 100" fill="none">
        {/* heart-shaped linden leaf */}
        <path d="M45 12 C 70 18, 82 42, 78 62 C 74 78, 58 92, 45 95 C 32 92, 16 78, 12 62 C 8 42, 20 18, 45 12 Z"
          fill="var(--accent)" opacity="0.85"/>
        <path d="M45 12 L45 95 M45 30 L25 50 M45 30 L65 50 M45 55 L20 70 M45 55 L70 70"
          stroke="var(--bg)" strokeWidth="1.2" strokeOpacity="0.45"/>
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text)' }}>Liptove</span>
    </div>
  );
}

// ── 08 · Circular seal ─────────────────────────────────────────────────
function LogoSeal() {
  const radius = 56;
  const text = ' · LIPTOVE · APARTMÁNY & ZRUBY · LIPTOV SK ';
  return (
    <svg width="160" height="160" viewBox="0 0 160 160" fill="none">
      <defs>
        <path id="sealPath" d={`M 80 80 m -${radius} 0 a ${radius} ${radius} 0 1 1 ${radius * 2} 0 a ${radius} ${radius} 0 1 1 -${radius * 2} 0`} />
      </defs>
      <circle cx="80" cy="80" r="74" stroke="var(--accent)" strokeWidth="1" opacity="0.5" fill="none"/>
      <circle cx="80" cy="80" r="62" stroke="var(--accent)" strokeWidth="1" fill="none"/>
      <text fill="var(--accent)" fontSize="9" letterSpacing="3" fontFamily="var(--font-body)">
        <textPath href="#sealPath" startOffset="0">{text}{text}</textPath>
      </text>
      {/* center mark: monogram L + peak */}
      <path d="M62 60 L62 95 L98 95" stroke="var(--accent)" strokeWidth="3" strokeLinecap="square" fill="none"/>
      <path d="M62 95 L74 80 L82 88 L92 72 L98 80" stroke="var(--accent)" strokeWidth="2" fill="none"/>
      <text x="80" y="118" textAnchor="middle" fill="var(--accent)" fontFamily="var(--font-display)" fontSize="9" letterSpacing="2">EST · 2018</text>
    </svg>
  );
}

// ── 09 · Editorial stacked ─────────────────────────────────────────────
function LogoStack() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, borderBottom: '1px solid var(--text)', paddingBottom: 6 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'clamp(40px, 5vw, 72px)', letterSpacing: '-0.03em', color: 'var(--text)', lineHeight: 1 }}>Liptove</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--accent)' }}>— SK / EST.18</span>
      </div>
      <span style={{ fontFamily: 'var(--font-body)', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--text-mute)' }}>
        Apartmány · Zruby · Atrakcie
      </span>
    </div>
  );
}

// ── 10 · Serif small caps + rule ───────────────────────────────────────
function LogoSerifCaps() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <span style={{ width: 28, height: 1, background: 'var(--accent)' }}/>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--text)' }}>
        Liptove
      </span>
      <span style={{ width: 28, height: 1, background: 'var(--accent)' }}/>
    </div>
  );
}

// ── Bonus · Horizontal lockup ─────────────────────────────────────────
function LogoLockup() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <svg width="44" height="44" viewBox="0 0 100 100" fill="none">
        <path d="M22 18 L22 78 L78 78" stroke="var(--accent)" strokeWidth="6" strokeLinecap="square"/>
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 36, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--text)' }}>Liptove</span>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 9, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--text-mute)', marginTop: 4 }}>apartmány · liptov sk</span>
      </div>
    </div>
  );
}

Object.assign(window, { LogosPage });
