/* global React, ReactDOM */

const { useState, useEffect, useRef, useMemo } = React;

// ── Icons (Phosphor-light style, hand-drawn SVGs at weight 1.25) ───────
const Icon = ({ name, size = 22, color = "currentColor", glow = false }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    target: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill={color} /></>,
    wand: <><path d="M15 4l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z" /><path d="M5 19l9-9" /><path d="M3 17l1.5 1.5M6.5 14l1 1" /></>,
    lock: <><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>,
    shield: <><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" /><path d="M9 12l2 2 4-4" /></>,
    hand: <><path d="M9 11V5a1.5 1.5 0 0 1 3 0v6" /><path d="M12 11V4a1.5 1.5 0 0 1 3 0v7" /><path d="M15 11V6a1.5 1.5 0 0 1 3 0v9c0 3-2.5 6-6 6s-6-2.5-6-5v-3l-2-3a1.5 1.5 0 0 1 2.5-1.7L9 11" /></>,
    tree: <><path d="M12 3l-4 5h2l-3 4h2l-3 4h5v4h2v-4h5l-3-4h2l-3-4h2l-4-5z" /></>,
    sparkle: <path d="M12 4v6m0 4v6m-8-8h6m4 0h6M7 7l3.5 3.5M13.5 13.5L17 17M7 17l3.5-3.5M13.5 10.5L17 7" />,
    spark4: <path d="M12 3l1.5 7L21 12l-7.5 2L12 21l-1.5-7L3 12l7.5-2L12 3z" fill={color} stroke="none" />,
    aiLeaf: <><path d="M5 19c2-9 8-12 14-13-1 6-4 12-13 14l-1-1z" /><path d="M5 19l4-4" /></>,
    pulse: <path d="M3 12h4l2-6 4 12 2-8 2 4 4-2" />,
    energy: <><path d="M13 3L4 14h6l-1 7 9-11h-6l1-7z" /></>,
    link: <><path d="M9 15l6-6" /><path d="M14 5l1-1a3 3 0 0 1 4 4l-1 1" /><path d="M10 19l-1 1a3 3 0 0 1-4-4l1-1" /></>,
    chat: <><path d="M21 12c0 4-4 7-9 7-1.5 0-3-.3-4-.7L3 20l1-4c-.7-1.2-1-2.5-1-4 0-4 4-7 9-7s9 3 9 7z" /></>,
    camera: <><rect x="3" y="6" width="18" height="14" rx="2" /><circle cx="12" cy="13" r="4" /><path d="M9 6l1.5-2h3L15 6" /></>,
    menu: <><path d="M4 7h16M4 12h16M4 17h16" /></>,
    close: <path d="M6 6l12 12M18 6L6 18" />,
    leaf: <><path d="M5 19c1-9 6-14 14-15-1 9-6 14-14 15z" /><path d="M5 19l5-5" /></>,
  };
  const node = paths[name];
  const style = glow ? { filter: "drop-shadow(0 0 10px rgba(51,255,233,0.7))" } : undefined;
  return <svg {...props} style={style} aria-hidden="true">{node}</svg>;
};

// Sun-Gold sparkle
const Sparkle = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2 L13.5 10.5 L22 12 L13.5 13.5 L12 22 L10.5 13.5 L2 12 L10.5 10.5 Z" fill="#F2C94C" />
  </svg>
);

// ── Buttons ─────────────────────────────────────────────────────────
const Button = ({ variant = "forest", icon = "arrow", children, href = "#" }) => (
  <a href={href} className={`btn btn-${variant}`}>
    <span>{children}</span>
    <span className="icon-bubble"><Icon name={icon} size={16} /></span>
  </a>
);

// ── Nav ─────────────────────────────────────────────────────────────
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);
  return (
    <>
      <div className={`nav-wrap ${scrolled ? "scrolled" : ""}`}>
        <div className="nav-pill">
          <a className="nav-logo" href="#top" aria-label="LIFE">
            <img src="assets/logo-horizontal-light.png" alt="LIFE" />
          </a>
          <nav className="nav-links">
            <a className="pill-link" href="#system"><span className="fill"></span><span>What you get</span></a>
            <a className="pill-link" href="#how"><span className="fill"></span><span>How it works</span></a>
            <a className="pill-link" href="#privacy"><span className="fill"></span><span>Privacy</span></a>
            <a className="pill-link" href="#results"><span className="fill"></span><span>Stories</span></a>
          </nav>
          <a className="nav-cta" href="#cta">
            <span>Early access</span>
            <span className="icon-bubble"><Icon name="arrow" size={14} /></span>
          </a>
          <button className="nav-toggle" aria-label="Open menu" onClick={() => setOpen(true)}>
            <Icon name="menu" size={18} />
          </button>
        </div>
      </div>
      <div className={`mobile-overlay ${open ? "open" : ""}`} onClick={() => setOpen(false)}>
        <button className="mobile-close" aria-label="Close menu"><Icon name="close" size={18} /></button>
        <nav>
          <a href="#system" onClick={() => setOpen(false)}>What you get</a>
          <a href="#how" onClick={() => setOpen(false)}>How it works</a>
          <a href="#privacy" onClick={() => setOpen(false)}>Privacy</a>
          <a href="#cta" onClick={() => setOpen(false)}>Early access →</a>
        </nav>
      </div>
    </>
  );
};

// ── Hero ────────────────────────────────────────────────────────────
const HeroChars = ({ text }) => (
  <span className="hero-line">
    {text.split("").map((c, i) => (
      <span key={i} className="hero-char" data-char>{c === " " ? "\u00A0" : c}</span>
    ))}
  </span>
);

const Hero = () => {
  const [stage, setStage] = useState(0);
  // Cycle the preview dialogue
  useEffect(() => {
    const seq = [800, 2400, 1800, 2200, 1600, 2200, 4500];
    let i = 0;
    let t;
    const tick = () => {
      i = (i + 1) % seq.length;
      setStage(s => (s + 1) % 7);
      t = setTimeout(tick, seq[i]);
    };
    t = setTimeout(tick, seq[0]);
    return () => clearTimeout(t);
  }, []);

  return (
    <section className="hero" id="top">
      <window.ScrollVideoBackground />
      <div className="hero-blobs">
        <div className="blob blob-a"></div>
        <div className="blob blob-b"></div>
        <div className="blob blob-c"></div>
        <div className="atmos-halo"></div>
      </div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="kicker" data-reveal><span className="kicker-dot"></span>For people pulled in too many directions</div>
            <h1 className="wordmark wordmark-display hero-h1">
              <HeroChars text="LIVE MORE" />
              <HeroChars text="DELIBERATELY." />
            </h1>
            <p className="hero-lead" data-reveal>
              The people who get the most from life don't have more time. They have a better system.
            </p>
            <p className="hero-sub" data-reveal>
              LIFE connects your schedule, money, health, goals and relationships into one calm home.
              You stop losing hours to admin. You start making real progress on the life you're actually building.
            </p>
            <div className="cta-row" data-reveal>
              <Button variant="sage" icon="arrow" href="#cta">Claim early access</Button>
              <Button variant="ghost" icon="arrow" href="#system">See what you get</Button>
            </div>
            <div className="stat-row" data-reveal>
              <div className="stat">
                <div className="stat-num" data-stat="17">17</div>
                <div className="stat-label">Areas covered, end to end</div>
              </div>
              <div className="stat">
                <div className="stat-num">24/7</div>
                <div className="stat-label">AI running silently in the background</div>
              </div>
              <div className="stat">
                <div className="stat-num" data-stat="1">1</div>
                <div className="stat-label">App. Not twelve.</div>
              </div>
            </div>
          </div>
          <HeroPreview stage={stage} />
        </div>
      </div>
    </section>
  );
};

const HeroPreview = ({ stage }) => {
  const wrapRef = useRef(null);
  const innerRef = useRef(null);
  // Mousemove tilt
  useEffect(() => {
    const wrap = wrapRef.current;
    const inner = innerRef.current;
    if (!wrap || !inner) return;
    let raf = 0, tx = 0, ty = 0, rx = 0, ry = 0;
    const apply = () => {
      inner.style.transform = `translate3d(${tx}px, ${ty}px, 0) rotateX(${rx}deg) rotateY(${ry}deg)`;
    };
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const dx = (e.clientX - r.left - r.width / 2) / (r.width / 2);
      const dy = (e.clientY - r.top - r.height / 2) / (r.height / 2);
      ry = dx * 4; rx = -dy * 4; tx = dx * 5; ty = dy * 5;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(apply);
    };
    const onLeave = () => { tx = ty = rx = ry = 0; apply(); };
    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    return () => {
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  return (
    <div className="hero-preview" data-reveal ref={wrapRef}>
      <div className="preview-card" ref={innerRef}>
        <div className="preview-inner">
          <div className="preview-header">
            <div className="preview-title">
              <span className="live-dot"></span>
              <span>Reviewing your week</span>
            </div>
            <div className="preview-time">Wed · 7:42</div>
          </div>
          <div className="dialogue-stream">
            {stage >= 0 && (
              <div className="msg msg-user"><div className="msg-bubble">Reviewing your week…</div></div>
            )}
            {stage >= 1 && stage < 2 && (
              <div className="msg msg-life"><div className="typing-dots"><span></span><span></span><span></span></div></div>
            )}
            {stage >= 2 && (
              <div className="msg msg-life">
                <div className="msg-bubble">
                  <div className="ai-glyph"><span className="ai-icon-glow"><Icon name="aiLeaf" size={14} color="#33FFE9" /></span>LIFE</div>
                  You have <strong>4 deliverables due Friday</strong> and Thursday is back-to-back.
                  Wednesday morning is your sharpest focus window. Want me to move the gym there
                  and protect Thursday 7–9 PM for deep work?
                </div>
              </div>
            )}
            {stage >= 3 && (
              <div className="msg msg-user"><div className="msg-bubble">Yes — and find a brunch slot Saturday for Farah.</div></div>
            )}
            {stage >= 4 && stage < 5 && (
              <div className="msg msg-life"><div className="typing-dots"><span></span><span></span><span></span></div></div>
            )}
            {stage >= 5 && (
              <div className="msg msg-life">
                <div className="msg-bubble">
                  <div className="ai-glyph"><span className="ai-icon-glow"><Icon name="aiLeaf" size={14} color="#33FFE9" /></span>LIFE</div>
                  Done. Gym moved, Thursday 7–9 PM protected.
                  Farah's free from <strong>10 AM Saturday</strong>. The Tiong Bahru cafe you both
                  rated highly — shall I send the invite?
                </div>
              </div>
            )}
          </div>
          <div className="preview-meta">
            <span className="preview-meta-tag"><Sparkle size={11} /> Quietly handled</span>
            <span>Calendar · Health · Social</span>
          </div>
        </div>
      </div>
    </div>
  );
};

window.HeroSection = Hero;
window.NavBar = Nav;
window.Icon = Icon;
window.Sparkle = Sparkle;
window.Button = Button;