// Hero — cinematic, with 3 layout variants toggled by Tweaks.
// Variant A: cinematic full-bleed (default)
// Variant B: split left copy / right character
// Variant C: wide atmospheric background with centered large title

function Hero({ variant = 'cinematic' }) {
  return (
    <section id="hero" style={{ padding: 0, minHeight: '100vh', position: 'relative', overflow: 'hidden' }}>
      <HeroBackdrop />
      {variant === 'cinematic' && <HeroCinematic />}
      {variant === 'split'     && <HeroSplit />}
      {variant === 'wide'      && <HeroWide />}

      {/* Bottom marquee */}
      <div style={heroStyles.marquee}>
        <div style={heroStyles.marqueeTrack}>
          {Array.from({ length: 2 }).map((_, i) => (
            <div key={i} style={heroStyles.marqueeInner}>
              <span>✦ Chapter 1 — Shellstown · Free Demo</span>
              <span>✦ Chapter 2 — Syrup Village · Patreon</span>
              <span>✦ Chapter 3 — Baratie & Cocoyashi · In Development</span>
              <span>✦ Dating System · Early Access</span>
              <span>✦ Ren'Py · EN / ES / FR / IT / PT</span>
              <span>✦ v0.1.5 · Public Demo Live</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Shared atmospheric backdrop ---------- */
function HeroBackdrop() {
  return (
    <div style={heroStyles.backdrop} aria-hidden>
      {/* Night sky gradient */}
      <div style={heroStyles.sky} />
      {/* Distant moon */}
      <div style={heroStyles.moon}>
        <div style={heroStyles.moonGlow} />
        <div style={heroStyles.moonDisc} />
      </div>
      {/* Far silhouette ship */}
      <svg viewBox="0 0 1600 400" style={heroStyles.shipSvg} preserveAspectRatio="xMidYMax meet">
        <g fill="#05122E" opacity=".9">
          <path d="M1100 260 L1180 260 L1200 285 L1080 285 Z" />
          <path d="M1140 260 L1140 130 L1205 180 L1140 180 Z" fill="#0B0B14" />
          <path d="M1140 130 L1140 100 M1140 100 L1120 108 L1160 108 Z" stroke="#0B0B14" strokeWidth="2" />
        </g>
      </svg>
      {/* Wave layers */}
      <div style={heroStyles.waves}>
        <svg viewBox="0 0 2000 200" preserveAspectRatio="none" style={{ width: '200%', height: '100%', animation: 'waves 22s linear infinite' }}>
          <path d="M0,120 Q250,80 500,120 T1000,120 T1500,120 T2000,120 L2000,200 L0,200 Z" fill="#002254" opacity=".6" />
          <path d="M0,140 Q300,110 600,140 T1200,140 T1800,140 T2400,140 L2400,200 L0,200 Z" fill="#001434" opacity=".8" transform="translate(-200,0)" />
          <path d="M0,160 Q400,140 800,160 T1600,160 T2400,160 L2400,200 L0,200 Z" fill="#000a1f" transform="translate(-100,0)" />
        </svg>
      </div>
      {/* Vignette */}
      <div style={heroStyles.vignette} />
    </div>
  );
}

/* ---------- Variant A: Cinematic ---------- */
function HeroCinematic() {
  return (
    <div style={heroStyles.cineWrap}>
      <div style={{ ...heroStyles.cineContent, animation: 'rise .9s ease both' }}>
        <div className="eyebrow" style={{ marginBottom: 14, color: 'var(--beige)', opacity: .75 }}>
          ✦ Wicked Tales Interactive ·  Ren'Py Visual Novel · v0.1.5
        </div>
        <h1 style={heroStyles.cineTitle}>
          Pirate <span style={{ color: 'var(--gold)' }}>Privates</span>
          <br />
          <span style={heroStyles.cineTitle2}>Loot</span>
        </h1>
        <div className="ornament" style={{ margin: '22px auto', maxWidth: 440 }}>
          <Icon.Compass style={{ width: 16, height: 16 }} />
        </div>
        <p style={heroStyles.cineTag}>
          A tale of seduction, mutiny, and consequence on the Grand Line.<br />
          Chart your course, court the infamous, and loot what the tide refuses to return.
        </p>
        <div style={heroStyles.cineCTAs}>
          <a className="btn btn-primary" href="#download">
            <Icon.Play /> Play the Free Demo
          </a>
          <a className="btn btn-gold" href="#members">
            <Icon.Patreon /> Support on Patreon
          </a>
        </div>
        <div style={heroStyles.cineMeta}>
          <HeroStat label="Out Now" value="Ch. 1 · Ch. 2" />
          <HeroStat label="Decisions" value="Few. Heavy." />
          <HeroStat label="Languages" value="EN · ES · FR · IT · PT" />
          <HeroStat label="Rating" value="18+ · Adults Only" />
        </div>
      </div>

      {/* Right-side character silhouette */}
      <div style={heroStyles.cineCharacter}>
        <CharacterSilhouette />
      </div>
    </div>
  );
}

/* ---------- Variant B: Split ---------- */
function HeroSplit() {
  return (
    <div style={heroStyles.splitWrap}>
      <div style={heroStyles.splitLeft}>
        <div className="eyebrow" style={{ color: 'var(--gold)' }}>✦ v0.1.5 · Public Demo</div>
        <h1 style={heroStyles.splitTitle}>
          Pirate<br />
          <em style={{ color: 'var(--gold)', fontStyle: 'normal' }}>Privates</em><br />
          Loot
        </h1>
        <p style={{ fontFamily: 'var(--f-serif)', fontSize: 19, fontStyle: 'italic', color: 'var(--cream)', opacity: .85, maxWidth: 480, lineHeight: 1.5 }}>
          An adult visual novel set in the Grand Line. A Dating System, minigames, and a handful of decisions that arrive when they matter most — and never come back.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="#download"><Icon.Play /> Play Demo</a>
          <a className="btn btn-gold" href="#members"><Icon.Patreon /> Patreon</a>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 36, flexWrap: 'wrap' }}>
          <span className="chip chip-live"><Icon.Check style={{ width: 10, height: 10 }} /> Ch. 1 Public</span>
          <span className="chip chip-dev">Ch. 2 · Patreon</span>
          <span className="chip chip-dev">Ch. 3 · In Dev</span>
        </div>
      </div>
      <div style={heroStyles.splitRight}>
        <div style={heroStyles.splitFrame} className="card">
          <CharacterPortrait src="assets/characters/nami-portrait.webp" alt="Nami" />
          <div style={heroStyles.splitFrameLabel}>
            <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.25em', fontSize: 10, color: 'var(--gold)' }}>Dossier · 01</div>
            <div style={{ fontFamily: 'var(--f-display)', fontSize: 22, color: 'var(--cream)', marginTop: 4 }}>The Navigator</div>
            <div style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--beige)', opacity: .8, marginTop: 4 }}>
              "I read the tides, and I read you just fine."
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Variant C: Wide atmospheric ---------- */
function HeroWide() {
  return (
    <div style={heroStyles.wideWrap}>
      <div style={heroStyles.wideContent}>
        <div style={{ fontFamily: 'var(--f-caps)', letterSpacing: '.4em', fontSize: 12, color: 'var(--gold)', marginBottom: 22 }}>
          ✦  Wicked Tales Interactive  ✦
        </div>
        <h1 style={heroStyles.wideTitle}>
          PIRATE<br />
          <span style={{ color: 'var(--gold)', fontFamily: 'var(--f-display)' }}>PRIVATES</span><br />
          LOOT
        </h1>
        <div className="ornament" style={{ margin: '30px auto', maxWidth: 520 }}>
          <Icon.Anchor style={{ width: 18, height: 18 }} />
        </div>
        <p style={{ fontFamily: 'var(--f-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--cream)', maxWidth: 720, margin: '0 auto', lineHeight: 1.5 }}>
          The sea keeps no secrets — but it will sell them to the highest bidder.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 40, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="#download"><Icon.Play /> Play the Demo</a>
          <a className="btn btn-gold" href="#members"><Icon.Patreon /> Become a Patron</a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Small pieces ---------- */
function HeroStat({ label, value }) {
  return (
    <div style={heroStyles.stat}>
      <div style={heroStyles.statLabel}>{label}</div>
      <div style={heroStyles.statValue}>{value}</div>
    </div>
  );
}

function CharacterSilhouette() {
  // Real character art — Nami, backlit with a warm rim-light glow.
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      {/* Warm rim-light aura behind her */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 55% 45%, rgba(212,175,55,.35), rgba(212,175,55,.12) 35%, transparent 65%)',
        filter: 'blur(8px)',
      }} />
      {/* Character */}
      <img
        src="assets/characters/nami-portrait.webp"
        alt="Nami — The Navigator"
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'contain',
          objectPosition: 'center bottom',
          filter: 'drop-shadow(0 0 40px rgba(212,175,55,.25)) drop-shadow(0 20px 40px rgba(0,0,0,.6))',
        }}
      />
      {/* Bottom fade into page */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: '22%',
        background: 'linear-gradient(180deg, transparent, rgba(11,11,20,.7) 60%, #0B0B14)',
        pointerEvents: 'none',
      }} />
    </div>
  );
}

function CharacterPortrait({ src = 'assets/characters/nami-portrait.webp', alt = 'Character' }) {
  // Dossier portrait — cropped + framed.
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: 380, overflow: 'hidden' }}>
      {/* Warm atmospheric backdrop */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `
          radial-gradient(ellipse at 50% 30%, rgba(212,175,55,.2), transparent 60%),
          linear-gradient(180deg, #1a1208 0%, #0B0B14 100%)
        `,
      }} />
      <img
        src={src}
        alt={alt}
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%',
          objectFit: 'cover',
          objectPosition: 'center top',
        }}
      />
      {/* Subtle vignette + frame tint */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 45%, rgba(11,11,20,.4) 100%)',
        pointerEvents: 'none',
      }} />
    </div>
  );
}

const heroStyles = {
  backdrop: { position: 'absolute', inset: 0, zIndex: 0 },
  sky: {
    position: 'absolute', inset: 0,
    background: `
      radial-gradient(ellipse at 70% 20%, rgba(212,175,55,.12), transparent 45%),
      radial-gradient(ellipse at 20% 80%, rgba(0,34,84,.6), transparent 50%),
      linear-gradient(180deg, #0B0B14 0%, #061024 40%, #001434 75%, #000a1f 100%)
    `,
  },
  moon: {
    position: 'absolute', right: '8%', top: '14%',
    width: 160, height: 160, pointerEvents: 'none',
  },
  moonGlow: {
    position: 'absolute', inset: -60,
    background: 'radial-gradient(circle, rgba(212,175,55,.25), transparent 60%)',
  },
  moonDisc: {
    position: 'absolute', inset: 0, borderRadius: '50%',
    background: 'radial-gradient(circle at 35% 35%, #F5F0E8, #D4C4A8 55%, #8a7d5c 100%)',
    boxShadow: '0 0 80px rgba(212,175,55,.35)',
  },
  shipSvg: {
    position: 'absolute', bottom: '18%', left: 0, width: '100%', height: 400,
    animation: 'sway 10s ease-in-out infinite',
  },
  waves: {
    position: 'absolute', bottom: 0, left: 0, right: 0, height: '30%',
    overflow: 'hidden',
  },
  vignette: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at center, transparent 40%, rgba(11,11,20,.6) 100%)',
    pointerEvents: 'none',
  },

  /* Cinematic */
  cineWrap: {
    position: 'relative', zIndex: 2,
    minHeight: '100vh',
    display: 'grid',
    gridTemplateColumns: '1.3fr 1fr',
    gap: 40,
    padding: '140px 64px 120px',
    maxWidth: 1440, margin: '0 auto',
    alignItems: 'center',
  },
  cineContent: { position: 'relative' },
  cineTitle: {
    fontFamily: 'var(--f-display)',
    fontWeight: 500,
    fontStyle: 'italic',
    fontSize: 'clamp(64px, 11vw, 156px)',
    lineHeight: .92,
    color: 'var(--cream)',
    textShadow: '0 2px 40px rgba(0,0,0,.6), 0 0 80px rgba(212,175,55,.15)',
    letterSpacing: '-.02em',
  },
  cineTitle2: {
    fontFamily: 'var(--f-display)',
    fontStyle: 'italic',
    fontWeight: 400,
    color: 'var(--cream)',
    WebkitTextStroke: '1px #D4AF37',
    WebkitTextFillColor: 'transparent',
  },
  cineTag: {
    fontFamily: 'var(--f-serif)',
    fontStyle: 'italic',
    fontSize: 19,
    color: 'var(--cream)',
    opacity: .9,
    maxWidth: 560,
    lineHeight: 1.5,
    marginBottom: 32,
  },
  cineCTAs: {
    display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 56,
  },
  cineMeta: {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
    maxWidth: 620,
    paddingTop: 24,
    borderTop: '1px solid rgba(212,175,55,.2)',
  },
  stat: { minWidth: 0 },
  statLabel: {
    fontFamily: 'var(--f-caps)', letterSpacing: '.2em', fontSize: 10,
    color: 'var(--gold)', marginBottom: 4, textTransform: 'uppercase',
  },
  statValue: {
    fontFamily: 'var(--f-serif)', fontSize: 15,
    color: 'var(--cream)',
  },
  cineCharacter: {
    position: 'relative',
    height: 'min(80vh, 720px)',
    alignSelf: 'center',
  },

  /* Split */
  splitWrap: {
    position: 'relative', zIndex: 2,
    minHeight: '100vh',
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60,
    padding: '140px 64px 120px',
    maxWidth: 1440, margin: '0 auto',
    alignItems: 'center',
  },
  splitLeft: {},
  splitTitle: {
    fontFamily: 'var(--f-display)',
    fontWeight: 500,
    fontStyle: 'italic',
    fontSize: 'clamp(64px, 9.5vw, 132px)',
    lineHeight: .95,
    color: 'var(--cream)',
    margin: '18px 0 28px',
    letterSpacing: '-.02em',
  },
  splitRight: { display: 'flex', alignItems: 'center', justifyContent: 'center' },
  splitFrame: {
    width: '100%', maxWidth: 440, aspectRatio: '3 / 4',
    position: 'relative',
    background: '#05122E',
    padding: 0,
    overflow: 'hidden',
  },
  splitFrameLabel: {
    position: 'absolute', left: 0, right: 0, bottom: 0,
    padding: 22,
    background: 'linear-gradient(180deg, transparent, rgba(11,11,20,.95))',
  },

  /* Wide */
  wideWrap: {
    position: 'relative', zIndex: 2,
    minHeight: '100vh',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: '140px 40px 120px',
    textAlign: 'center',
  },
  wideContent: { maxWidth: 1100, width: '100%', animation: 'rise 1s ease both' },
  wideTitle: {
    fontFamily: 'var(--f-display)',
    fontWeight: 500,
    fontStyle: 'italic',
    fontSize: 'clamp(80px, 15vw, 220px)',
    lineHeight: .88,
    color: 'var(--cream)',
    textShadow: '0 4px 60px rgba(0,0,0,.8), 0 0 100px rgba(212,175,55,.15)',
    letterSpacing: '-.02em',
  },

  /* Marquee */
  marquee: {
    position: 'absolute', bottom: 0, left: 0, right: 0,
    borderTop: '1px solid rgba(212,175,55,.2)',
    borderBottom: '1px solid rgba(212,175,55,.2)',
    background: 'rgba(11,11,20,.85)',
    overflow: 'hidden',
    padding: '14px 0',
    zIndex: 3,
  },
  marqueeTrack: {
    display: 'flex', whiteSpace: 'nowrap',
    animation: 'drift-slow 50s linear infinite',
    width: 'max-content',
  },
  marqueeInner: {
    display: 'inline-flex', gap: 64, paddingRight: 64,
    fontFamily: 'var(--f-caps)', letterSpacing: '.25em', fontSize: 11,
    color: 'var(--beige)',
  },
};

// Responsive adjustments via a small stylesheet injection
if (!document.getElementById('hero-rs')) {
  const s = document.createElement('style'); s.id = 'hero-rs';
  s.textContent = `
    @media (max-width: 900px) {
      #hero [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      #hero .cine-character { display: none; }
    }
  `;
  document.head.appendChild(s);
}

window.Hero = Hero;