/* global React */
const { useState, useEffect, useRef } = React;

/* ============ HERO ============ */
function Hero() {
  const t = window.useT().hero;
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="shell">
        <div className="hero-grid">
          <div>
            <div className="eyebrow reveal r1">{t.eyebrow}</div>
            <h1 className="display reveal r2">
              {t.h1Pre}<span className="accent">{t.h1Accent}</span>{t.h1Post}
            </h1>
            <p className="hero-sub reveal r3">{t.sub}</p>
            <div className="hero-ctas reveal r3">
              <a href="#pricing" className="btn btn-primary">{t.ctaPrimary} <Arrow /></a>
              <a href="#pricing" className="btn btn-ghost">{t.ctaSecondary}</a>
            </div>
            <div className="hero-trust reveal r4">
              {t.trust.map((item, i) => (
                <span key={i} className="hero-trust-item"><span className="dot" />{item}</span>
              ))}
            </div>
          </div>
          <HeroVisual />
        </div>
      </div>
    </section>
  );
}

function HeroVisual() {
  const t = window.useT().hero;
  const bars = Array.from({ length: 64 });
  return (
    <div className="hero-visual reveal r2">
      <div className="waveform" aria-hidden="true">
        {bars.map((_, i) => {
          const h = 12 + Math.abs(Math.sin(i * 0.45)) * 140 + (i % 5) * 6;
          return (
            <div key={i} className="bar" style={{ '--h': `${h}px`, animationDelay: `${(i * 0.04).toFixed(2)}s` }} />
          );
        })}
      </div>

      {/* Spotify for Artists card */}
      <div className="floating-card fc-track">
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <SpotifyIcon />
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em' }}>SPOTIFY FOR ARTISTS</div>
        </div>
        <div className="fc-row">
          <div className="fc-art indie" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="fc-title">Midnight Static</div>
            <div className="fc-sub">NOVA RAINE · 3:28</div>
          </div>
          <PlayIcon />
        </div>
        <div className="fc-bar" style={{ marginTop: 10 }}><div style={{ width: '64%' }} /></div>
        <div className="fc-meta">
          <span style={{ color: 'var(--green)' }}>{t.cardAdded}</span>
          <span>↑ 312%</span>
        </div>
      </div>

      {/* Monthly Listeners card */}
      <div className="floating-card fc-analytics">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div className="fc-sub">{t.cardStreams}</div>
            <div className="display" style={{ fontSize: 32, marginTop: 4 }}>184,209</div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--green)', padding: '4px 10px', background: 'rgba(30,215,96,0.12)', borderRadius: 999 }}>
            ↑ 312%
          </div>
        </div>
        <div style={{ display: 'flex', gap: 16, margin: '8px 0', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)' }}>
          <span>STREAMS <span style={{ color: 'var(--ink)' }}>847K</span></span>
          <span>SAVES <span style={{ color: 'var(--ink)' }}>21.4%</span></span>
          <span>{t.cardPlaylists} <span style={{ color: 'var(--green)' }}>23</span></span>
        </div>
        <Sparkline />
      </div>

      {/* Curator acceptance card */}
      <div className="floating-card fc-curator">
        <div className="fc-row">
          <div className="fc-art lofi" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="fc-title">Late Night Lo-fi</div>
            <div className="fc-sub">{t.cardFollowers}</div>
          </div>
        </div>
        <div style={{ marginTop: 12, padding: '6px 10px', background: 'rgba(30,215,96,0.12)', color: 'var(--green)', fontFamily: 'var(--font-mono)', fontSize: 10, borderRadius: 6, textAlign: 'center' }}>
          {t.cardAccepted}
        </div>
      </div>
    </div>
  );
}

function Sparkline() {
  const pts = [10, 14, 12, 18, 22, 19, 28, 26, 35, 42, 38, 50, 58, 54, 68, 72];
  const max = Math.max(...pts);
  const w = 240, h = 40;
  const step = w / (pts.length - 1);
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${i * step} ${h - (p / max) * h}`).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="sparkFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#1ED760" stopOpacity="0.4" />
          <stop offset="100%" stopColor="#1ED760" stopOpacity="0" />
        </linearGradient>
        <linearGradient id="sparkLine" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#6D28D9" />
          <stop offset="100%" stopColor="#1ED760" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#sparkFill)" />
      <path d={path} stroke="url(#sparkLine)" strokeWidth="2" fill="none" strokeLinecap="round" />
    </svg>
  );
}

function SpotifyIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="#1ED760">
      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.622.622 0 01-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.622.622 0 11-.277-1.215c3.809-.87 7.077-.495 9.712 1.115a.624.624 0 01.207.857zm1.223-2.722a.78.78 0 01-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.78.78 0 01-.973-.519.781.781 0 01.52-.972c3.632-1.102 8.147-.568 11.233 1.328a.78.78 0 01.257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.937.937 0 11-.543-1.794c3.532-1.072 9.404-.865 13.115 1.338a.937.937 0 01-.954 1.614z"/>
    </svg>
  );
}

function Arrow() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PlayIcon() {
  return (
    <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--green)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, boxShadow: '0 0 16px var(--green-glow)' }}>
      <svg width="10" height="12" viewBox="0 0 10 12" fill="#04150a"><path d="M0 0v12l10-6L0 0z" /></svg>
    </div>
  );
}

/* ============ TRUST ============ */
function CountUp({ to, suffix = '', duration = 1800 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val.toLocaleString()}{suffix}</span>;
}

function Trust() {
  const t = window.useT().trust;
  const statData = [
    { to: 14820, delta: '↑ 12.4%', delta30: '+421 this month' },
    { to: 2840, suffix: '+', delta: '↑ 4.1%', delta30: '+108 verified' },
    { to: 94, suffix: '%', delta: 'Avg.', delta30: '147 reviewed' },
    { to: 48, unit: 'M', delta: '↑ 22%', delta30: '4.2M last 30d' },
  ];
  return (
    <section id="trust" data-screen-label="02 Trust">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="section-title">
            {t.titlePre}<span className="accent">{t.titleAccent}</span>{t.titlePost}
          </h2>
          <p className="section-lede">{t.lede}</p>
          <div className="trust-audit mono">
            <span className="trust-audit-pulse"></span>
            {t.audit}
          </div>
        </div>

        <div className="stats">
          {statData.map((s, i) => (
            <div key={i} className="stat glass">
              <div className="stat-delta">{s.delta}</div>
              <div className="stat-value">
                <CountUp to={s.to} suffix={s.suffix || ''} />
                {s.unit && <span className="unit">{s.unit}</span>}
              </div>
              <div className="stat-label">{t.stats[i].label}</div>
              <div className="stat-foot mono">{s.delta30}</div>
            </div>
          ))}
        </div>

        <div className="trust-strip">
          {t.badges.map((b, i) => (
            <div key={i} className="trust-badge">
              <div className="trust-badge-icon">
                {b.icon === 'shield' && <ShieldIcon />}
                {b.icon === 'check' && <CheckShieldIcon />}
                {b.icon === 'lock' && <LockIcon />}
                {b.icon === 'refund' && <RefundIcon />}
                {b.icon === 'human' && <HumanIcon />}
              </div>
              <div className="trust-badge-text">
                <div className="trust-badge-title">{b.title}</div>
                <div className="trust-badge-sub">{b.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ShieldIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function CheckShieldIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function LockIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M8 10V7a4 4 0 018 0v3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      <circle cx="12" cy="15.5" r="1.5" fill="currentColor"/>
    </svg>
  );
}
function RefundIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M3 12a9 9 0 1015.7-6.05M21 4v5h-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function HumanIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="8" r="4" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M4 21v-1a8 8 0 0116 0v1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );
}

function Star() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
    </svg>
  );
}

/* ============ HOW IT WORKS ============ */
function HowItWorks() {
  const t = window.useT().how;
  return (
    <section id="how" data-screen-label="03 How it works">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="section-title">
            {t.titlePre}<span className="accent">{t.titleAccent}</span>{t.titlePost}
          </h2>
          <p className="section-lede">{t.lede}</p>
        </div>
        <div className="steps">
          <Step step={t.steps[0]} icon={<UploadIcon />} />
          <Step step={t.steps[1]} icon={<PitchIcon />} />
          <Step step={t.steps[2]} icon={<ChartIcon />} />
        </div>
      </div>
    </section>
  );
}

function Step({ step, icon }) {
  return (
    <div className="step">
      <div className="step-icon">{icon}</div>
      <div className="step-num mono">{step.num}</div>
      <h3>{step.title}</h3>
      <p>{step.desc}</p>
    </div>
  );
}

function UploadIcon() {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <path d="M18 24V8m0 0l-6 6m6-6l6 6" stroke="#1ED760" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="6" y="26" width="24" height="4" rx="2" stroke="#fff" strokeOpacity="0.6" strokeWidth="1.4" />
    </svg>
  );
}
function PitchIcon() {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <circle cx="10" cy="18" r="3" fill="#1ED760" />
      <circle cx="26" cy="10" r="3" stroke="#fff" strokeOpacity="0.6" strokeWidth="1.4" />
      <circle cx="26" cy="26" r="3" stroke="#fff" strokeOpacity="0.6" strokeWidth="1.4" />
      <circle cx="26" cy="18" r="3" stroke="#fff" strokeOpacity="0.6" strokeWidth="1.4" />
      <path d="M13 18h10M13 18l13-8M13 18l13 8" stroke="#8b5cf6" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}
function ChartIcon() {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
      <path d="M6 28V12M14 28V18M22 28v-6M30 28V8" stroke="#1ED760" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M4 30h28" stroke="#fff" strokeOpacity="0.4" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}

/* ============ PLAYLISTS ============ */
const GENRES = ['Lo-fi', 'Indie Pop', 'Hip-Hop', 'EDM', 'Chill', 'Ambient', 'R&B', 'Jazz', 'House', 'Trap', 'Soul', 'Rock', 'Pop', 'Latin', 'Folk', 'Metal'];

function Playlists() {
  const t = window.useT().playlists;
  return (
    <section id="playlists" data-screen-label="04 Playlist network" style={{ padding: '72px 0' }}>
      <div className="shell">
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16, marginBottom: 40 }}>
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="section-title" style={{ maxWidth: 600, margin: 0 }}>
            {t.titlePre}<span className="accent">{t.titleAccent}</span>
          </h2>
          <p style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 13, margin: 0 }}>{t.sub}</p>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center' }}>
          {GENRES.map((g, i) => (
            <span key={i} style={{ padding: '8px 18px', borderRadius: 999, border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.03)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-2)', letterSpacing: '0.08em', backdropFilter: 'blur(10px)' }}>
              {g}
            </span>
          ))}
          <span style={{ padding: '8px 18px', borderRadius: 999, border: '1px solid rgba(30,215,96,0.3)', background: 'rgba(30,215,96,0.08)', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--green)', letterSpacing: '0.08em' }}>
            {t.more}
          </span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Trust, HowItWorks, Playlists, Arrow, SpotifyIcon });