// hero.jsx — soft-tech terrarium hero
// Full viewport, animated SVG ecosystem centerpiece, editorial headline.

const { useEffect: useHeroEffect, useRef: useHeroRef, useState: useHeroState } = React;

function Hero({ motion = true, variant = 'terrarium' }) {
  // Scroll-driven parallax for headline
  const [scrollY, setScrollY] = useHeroState(0);
  useHeroEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Local time for the masthead
  const [time, setTime] = useHeroState('');
  useHeroEffect(() => {
    const upd = () => {
      const d = new Date();
      const t = d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
      setTime(t);
    };
    upd();
    const id = setInterval(upd, 30000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100vh',
      paddingTop: 'clamp(120px, 14vh, 180px)',
      paddingBottom: 'clamp(60px, 8vh, 120px)',
      overflow: 'hidden',
    }}>
      {/* Ambient orbs in background */}
      <BackgroundOrbs motion={motion} />

      {/* Top meta strip */}
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16, marginBottom: 'clamp(40px, 6vh, 80px)',
        }}>
          <div className="lab" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ color: 'var(--moss-deep)' }}>Vol. 01 · No. 01</span>
            <span style={{ opacity: 0.3 }}>—</span>
            <span>Now on the App Store</span>
          </div>
          <div className="lab" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <PulseDot />
            <span>Culture growing · {time}</span>
          </div>
        </div>
      </div>

      {/* Headline + terrarium composition */}
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, 0.95fr)',
          gap: 'clamp(24px, 4vw, 60px)',
          alignItems: 'center',
        }} className="hero-grid">

          {/* LEFT — copy */}
          <div style={{
            transform: motion ? `translateY(${scrollY * -0.15}px)` : 'none',
            transition: 'transform .1s linear',
          }}>
            <h1 className="display-1 text-balance" style={{ margin: 0 }}>
              A microbiologist{' '}
              <span className="serif-italic" style={{ color: 'var(--moss-deep)' }}>in your pocket.</span>
            </h1>
            <p className="lede" style={{
              marginTop: 'clamp(28px, 4vh, 40px)',
              maxWidth: 520,
              fontStyle: 'normal',
              fontFamily: 'var(--font-body)',
              fontSize: 19,
              color: 'var(--ink-soft)',
              lineHeight: 1.55,
            }}>
              Your skin is a living ecosystem. <span className="serif-italic" style={{ color: 'var(--moss-deep)', fontSize: 22 }}>Nurtli</span> helps you observe it
              — through the lens of microbiome and barrier, not marketing.
            </p>

            <div style={{ display: 'flex', gap: 14, marginTop: 'clamp(36px, 5vh, 48px)', flexWrap: 'wrap' }}>
              <a href="https://apps.apple.com/app/nurtli/id0000000000" className="btn btn-primary" target="_blank" rel="noopener">
                Download on the App Store
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M2 7h9M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </a>
              <a href="#microbiome" className="btn btn-ghost">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.2" />
                  <path d="M7 4v3l2 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
                </svg>
                Read the framing
              </a>
            </div>

            <div style={{
              display: 'flex', gap: 8, flexWrap: 'wrap',
              marginTop: 'clamp(40px, 5vh, 56px)',
            }}>
              <span className="chip"><span className="dot" /> iOS 18.4+</span>
              <span className="chip">On-device by default</span>
              <span className="chip">No medical claims</span>
              <span className="chip">No streaks · No shame</span>
            </div>
          </div>

          {/* RIGHT — terrarium centerpiece */}
          <div className="hero-art" style={{
            position: 'relative',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            transform: motion ? `translateY(${scrollY * -0.08}px)` : 'none',
          }}>
            <Terrarium size={520} intense motion={motion} />

            {/* Floating data callouts — only on wide */}
            <div className="hero-callouts" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
              <DataCallout
                text="C. acnes" sub="commensal"
                x="-6%" y="10%" delay={0.4} motion={motion}
              />
              <DataCallout
                text="S. epidermidis" sub="commensal"
                x="82%" y="18%" delay={0.8} motion={motion}
              />
              <DataCallout
                text="pH 5.4 ± 0.3" sub="acid mantle"
                x="-2%" y="72%" delay={1.2} motion={motion}
              />
              <DataCallout
                text="TEWL low" sub="barrier intact"
                x="78%" y="78%" delay={1.6} motion={motion}
              />
            </div>
          </div>
        </div>
      </div>

      {/* Marquee ticker */}
      <Marquee />

      <style>{`
        @media (max-width: 1240px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-art { margin-top: 32px; }
        }
        @media (max-width: 720px) {
          .hero-callouts { display: none !important; }
        }
      `}</style>
    </section>
  );
}

function PulseDot() {
  return (
    <span style={{
      position: 'relative', display: 'inline-block',
      width: 8, height: 8,
    }}>
      <span style={{
        position: 'absolute', inset: 0,
        background: 'var(--moss)', borderRadius: '50%',
        animation: 'breathe 2.4s ease-in-out infinite',
      }} />
      <span style={{
        position: 'absolute', inset: 0,
        background: 'var(--moss)', borderRadius: '50%',
        opacity: 0.4,
        animation: 'breathe 2.4s ease-in-out infinite',
        transform: 'scale(1.6)',
        transformOrigin: 'center',
      }} />
    </span>
  );
}

/* ── DataCallout — labels floating off the terrarium ─────── */
function DataCallout({ text, sub, x, y, delay = 0, motion = true }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      background: 'rgba(244,248,244,0.92)',
      backdropFilter: 'blur(12px) saturate(160%)',
      WebkitBackdropFilter: 'blur(12px) saturate(160%)',
      border: '0.5px solid rgba(255,255,255,0.85)',
      borderRadius: 12,
      padding: '8px 12px',
      boxShadow: '0 8px 24px -8px rgba(61,107,87,0.25)',
      fontSize: 12,
      pointerEvents: 'none',
      whiteSpace: 'nowrap',
      animation: motion
        ? `fade-in-up 0.9s cubic-bezier(.16,.84,.32,1) ${delay + 0.6}s both, drift 9s ease-in-out ${delay}s infinite`
        : 'none',
      opacity: motion ? 0 : 1,
    }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic',
        color: 'var(--moss-deep)', fontSize: 16, lineHeight: 1,
      }}>{text}</div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em',
        textTransform: 'uppercase', color: 'var(--ink-muted)', marginTop: 4,
      }}>{sub}</div>
      <style>{`
        @keyframes fade-in-up {
          from { opacity: 0; transform: translateY(12px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

/* ── BackgroundOrbs — ambient color blooms ─────────────────────── */
function BackgroundOrbs({ motion }) {
  return (
    <>
      <div style={{
        position: 'absolute', top: '8%', left: '-8%',
        width: 540, height: 540, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,184,197,0.32), transparent 65%)',
        filter: 'blur(40px)', pointerEvents: 'none',
        animation: motion ? 'drift 18s ease-in-out infinite' : 'none',
      }} />
      <div style={{
        position: 'absolute', bottom: '-10%', right: '-6%',
        width: 620, height: 620, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(232,200,150,0.3), transparent 65%)',
        filter: 'blur(50px)', pointerEvents: 'none',
        animation: motion ? 'drift 22s ease-in-out -8s infinite' : 'none',
      }} />
      <div style={{
        position: 'absolute', top: '40%', left: '40%',
        width: 380, height: 380, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(127,179,160,0.22), transparent 70%)',
        filter: 'blur(40px)', pointerEvents: 'none',
        animation: motion ? 'drift 24s ease-in-out -12s infinite' : 'none',
      }} />
    </>
  );
}

/* ── Marquee — bottom ticker with bio terms ──────────────────── */
function Marquee() {
  const terms = [
    'Lactobacillus', 'C. acnes', 'Niacinamide', 'Ceramide NP', 'Sebum film',
    'Stratum corneum', 'pH 5.4', 'TEWL', 'Sodium PCA', 'Squalane',
    'Cutibacterium', 'Acid mantle', 'Filaggrin', 'Hyaluronic acid', 'Panthenol',
  ];
  const doubled = [...terms, ...terms, ...terms];
  return (
    <div style={{
      marginTop: 'clamp(40px, 6vh, 80px)',
      padding: '20px 0',
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      overflow: 'hidden',
      position: 'relative',
      zIndex: 2,
      background: 'rgba(244,248,244,0.4)',
    }}>
      <div style={{
        display: 'flex', gap: 56, whiteSpace: 'nowrap',
        animation: 'marquee 70s linear infinite',
      }}>
        {doubled.map((t, i) => (
          <span key={i} style={{
            display: 'inline-flex', alignItems: 'center', gap: 14,
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 22, color: 'var(--moss-deep)',
            letterSpacing: '-0.01em',
          }}>
            {t}
            <span style={{
              display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
              background: 'var(--sage)',
            }} />
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-33.333%); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Hero });