/* @jsx React.createElement */
/* Hero — 3 variants switchable via Tweaks */

function Hero({ variant }) {
  if (variant === 'fullbleed') return <HeroFullbleed />;
  if (variant === 'poster')    return <HeroPoster />;
  return <HeroSplit />;
}

/* ─────────────────────────────────────────────
   Variant 1 — Split (default, "warm & human")
   ───────────────────────────────────────────── */
function HeroSplit() {
  return (
    <section id="top" style={{
      paddingTop: 120,
      paddingBottom: 64,
    }}>
      <div className="r-grid-2" data-ratio="hero" style={{
        maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        gap: 56, alignItems: 'center',
      }}>
        <div>
          <div className="ims-eyebrow" style={{ marginBottom: 22 }}>
            INDIE Music · School &amp; Studio
          </div>
          <h1 className="ims-display" style={{ fontSize: 'clamp(56px, 7.5vw, 108px)' }}>
            Happiness<br />
            starts <span style={{ color: 'var(--accent-ims)' }}>here.</span>
          </h1>
          <p className="ims-lede" style={{ marginTop: 28, fontSize: 19 }}>
            Sekolah musik anti-mainstream di Gading Serpong. Studio yang estetik, guru yang asik,
            dan cara belajar yang interaktif — bikin musik nggak lagi kayak beban, tapi jadi
            happiness yang dipancarkan tiap minggu.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="#enroll" className="btn btn-primary">Coba kelas gratis</a>
            <a href="#method" className="btn btn-ghost">Liat metodenya dulu</a>
          </div>
          <div className="no-scrollbar" style={{
            display: 'flex', gap: 28, marginTop: 44, alignItems: 'center',
            flexWrap: 'nowrap', overflowX: 'auto', WebkitOverflowScrolling: 'touch',
          }}>
            <HeroStat n="5" label="Instrumen" />
            <DotSep />
            <HeroStat n="6" label="Level" />
            <DotSep />
            <HeroStat n="59" label="Stamp dikumpulin" />
            <DotSep />
            <HeroStat n="2way" label="Feedback" mono />
          </div>
        </div>
        <HeroPlaceholder />
      </div>
    </section>
  );
}

function HeroStat({ n, label, mono }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
      <span className={mono ? 'mono' : ''} style={{
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-display)',
        fontSize: mono ? 22 : 36, fontWeight: mono ? 600 : 400,
        color: 'var(--page-ink)', lineHeight: 1, letterSpacing: mono ? '-0.02em' : '0.01em',
      }}>{n}</span>
      <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 'var(--caps-sm)', color: 'var(--page-ink-3)', fontWeight: 600 }}>{label}</span>
    </div>
  );
}

function DotSep() {
  return <span aria-hidden className="hero-dot-sep" style={{ color: 'var(--accent-ims)', fontWeight: 700, fontSize: 14 }}>·</span>;
}

/* Photo placeholder — labeled, warm, with EQ-bar motif overlay */
function HeroPlaceholder() {
  return (
    <div className="hero-photo" style={{
      position: 'relative',
      aspectRatio: '4 / 5',
      background: 'linear-gradient(160deg, var(--ims-red-tint) 0%, color-mix(in srgb, var(--page-bg) 80%, var(--accent-ims) 12%) 100%)',
      borderRadius: 10,
      overflow: 'hidden',
      border: '1.5px solid var(--page-ink)',
      boxShadow: '8px 8px 0 var(--page-ink)',
    }}>
      {/* Subtle grain */}
      <Grain />
      {/* EQ bars background motif */}
      <EQBars />
      {/* Big circular IMS badge floating */}
      <img src="assets/logos/ims.png" alt="" style={{
        position: 'absolute', right: -40, top: -40, width: 200, height: 200, opacity: 0.18,
      }} />
      {/* Placeholder label */}
      <div style={{
        position: 'absolute', left: 24, bottom: 24, right: 24,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16,
      }}>
        <div>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', fontWeight: 700, color: 'var(--accent-ims)' }}>
            Placeholder · Foto ruang kelas / studio
          </div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, textTransform: 'uppercase', color: 'var(--page-ink)', letterSpacing: '0.01em', lineHeight: 1, marginTop: 8 }}>
            Ganti pakai foto asli
          </div>
          <div style={{ fontSize: 13, color: 'var(--page-ink-2)', marginTop: 8, maxWidth: 280 }}>
            Idealnya: foto wide murid lagi ketawa pas lesson, atau band lagi rekam di live room. Natural light, no pose-pose.
          </div>
        </div>
        <div style={{
          width: 72, height: 72, borderRadius: 6, border: '1.5px solid var(--page-ink)',
          background: 'var(--page-surface)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <CornerIcon />
        </div>
      </div>
      {/* Top tape sticker */}
      <div style={{
        position: 'absolute', top: 18, left: 18,
        padding: '6px 12px', background: 'var(--accent-ims)', color: '#fff',
        fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)',
        borderRadius: 2,
        transform: 'rotate(-2deg)',
      }}>
        IMS · 1 of 1
      </div>
    </div>
  );
}

function Grain() {
  return (
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', mixBlendMode: 'multiply', opacity: 0.18, pointerEvents: 'none' }} aria-hidden>
      <filter id="g">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch" />
      </filter>
      <rect width="100%" height="100%" filter="url(#g)" />
    </svg>
  );
}

function EQBars() {
  return (
    <div style={{
      position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -55%)',
      display: 'flex', alignItems: 'flex-end', gap: 14, height: 220,
    }}>
      {[0.6, 0.95, 0.4, 0.85, 0.55, 1.0, 0.7].map((h, i) => (
        <div key={i} style={{
          width: 22, height: `${h * 100}%`,
          background: 'var(--accent-ims)', opacity: 0.85,
          borderRadius: 2,
          transformOrigin: 'bottom',
          animation: `eq-bar ${1.6 + (i % 3) * 0.3}s ${i * 0.12}s ease-in-out infinite`,
        }} />
      ))}
    </div>
  );
}

function CornerIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="var(--page-ink)" strokeWidth="1.8" strokeLinecap="round" aria-hidden>
      <path d="M6 6 L6 12 M6 6 L12 6" />
      <path d="M26 6 L26 12 M26 6 L20 6" />
      <path d="M6 26 L6 20 M6 26 L12 26" />
      <path d="M26 26 L26 20 M26 26 L20 26" />
    </svg>
  );
}

/* ─────────────────────────────────────────────
   Variant 2 — Full-bleed photo
   ───────────────────────────────────────────── */
function HeroFullbleed() {
  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '88vh',
      paddingTop: 120,
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(155deg, var(--ims-red) 0%, var(--ims-red-deep) 55%, var(--indie-navy-900) 100%)',
      }}>
        <Grain />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(0,25,51,0.7) 100%)' }} />
      </div>
      {/* Faded EQ bars motif on right */}
      <div style={{ position: 'absolute', right: 40, top: '40%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'flex-end', gap: 22, height: 360, opacity: 0.18 }}>
        {[0.5, 0.9, 0.35, 0.75, 0.55, 1, 0.6, 0.85].map((h, i) => (
          <div key={i} style={{ width: 38, height: `${h * 100}%`, background: '#fff', borderRadius: 3 }} />
        ))}
      </div>
      <div style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1240, margin: '0 auto', padding: '120px 32px 80px',
        color: '#fff',
      }}>
        <div className="ims-eyebrow" style={{ color: '#FBEEEB', marginBottom: 22 }}>
          INDIE Music · School &amp; Studio
        </div>
        <h1 className="ims-display" style={{ fontSize: 'clamp(64px, 9vw, 144px)', color: '#fff' }}>
          Happiness<br />
          starts here.
        </h1>
        <p className="ims-lede" style={{ marginTop: 28, color: '#F4F1EA', fontSize: 19, maxWidth: 580 }}>
          Sekolah musik anti-mainstream di Gading Serpong. Studio yang estetik, guru yang asik,
          dan cara belajar yang interaktif — bikin musik nggak lagi kayak beban, tapi jadi
          happiness yang dipancarkan tiap minggu.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
          <a href="#enroll" className="btn btn-primary" style={{ background: '#fff', color: 'var(--page-ink)', borderColor: '#fff', boxShadow: '4px 4px 0 #001933' }}>Coba kelas gratis</a>
          <a href="#method" className="btn btn-ghost" style={{ color: '#fff', borderColor: '#fff' }}>Liat metodenya</a>
        </div>
        <div style={{
          position: 'absolute', right: 32, bottom: 60, padding: '10px 14px',
          background: 'rgba(0,0,0,0.35)', color: '#FBEEEB', fontSize: 11, fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: 'var(--caps-lg)', borderRadius: 4,
        }}>
          Placeholder · Foto hero (studio / kelas)
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────
   Variant 3 — Type poster (no photo, EQ bars)
   ───────────────────────────────────────────── */
function HeroPoster() {
  return (
    <section id="top" style={{
      paddingTop: 120,
      paddingBottom: 64,
      borderBottom: '1px solid var(--page-border)',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px', position: 'relative' }}>
        {/* Animated EQ bars on left, behind */}
        <div style={{
          position: 'absolute', left: 0, top: 64, bottom: 0,
          display: 'flex', alignItems: 'flex-end', gap: 18,
          opacity: 0.16, pointerEvents: 'none',
        }}>
          {[0.4, 0.7, 0.3, 0.85, 0.5, 0.95, 0.4, 0.6].map((h, i) => (
            <div key={i} style={{
              width: 28, height: `${h * 100}%`,
              background: 'var(--accent-ims)', borderRadius: 2,
              animation: `eq-bar ${1.8 + (i % 3) * 0.35}s ${i * 0.1}s ease-in-out infinite`,
              transformOrigin: 'bottom',
            }} />
          ))}
        </div>
        <div style={{ position: 'relative', textAlign: 'left', paddingLeft: 'min(280px, 18vw)' }}>
          <div className="ims-eyebrow" style={{ marginBottom: 26 }}>
            Happiness · 「 hap·pi·ness 」 · n. the music school
          </div>
          <h1 className="ims-display" style={{
            fontSize: 'clamp(80px, 13vw, 220px)', letterSpacing: '-0.005em',
          }}>
            Happiness<br />
            <span style={{ color: 'var(--accent-ims)' }}>starts</span> here.
          </h1>
          <div className="r-grid-2" data-ratio="copy-art" style={{ gap: 48, marginTop: 36, alignItems: 'start' }}>
            <p className="ims-lede" style={{ fontSize: 19 }}>
              Sekolah musik anti-mainstream di Gading Serpong. Studio yang estetik, guru yang asik,
              dan cara belajar yang interaktif — bikin musik nggak lagi kayak beban, tapi jadi
              happiness yang dipancarkan tiap minggu.
            </p>
            <div style={{ display: 'flex', gap: 10, flexDirection: 'column' }}>
              <a href="#enroll" className="btn btn-primary">Coba kelas gratis</a>
              <a href="#method" className="btn btn-ghost">Liat metodenya</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });