// Hero with hobby picker — Gray reacts to hovered/picked hobby.
const { useState, useEffect, useRef, useMemo } = React;

const HOBBIES = [
{ id: 'piano', glyph: '🎹', label: 'Piano', word: 'piano.', line: "Day 1: middle C. Easy." },
{ id: 'guitar', glyph: '🎸', label: 'Guitar', word: 'guitar.', line: "Three chords. Then the world." },
{ id: 'chess', glyph: '♞', label: 'Chess', word: 'chess set.', line: "We'll start with one piece." },
{ id: 'draw', glyph: '✏️', label: 'Drawing', word: 'sketchbook.', line: "Twenty minutes. Just lines." },
{ id: 'pottery', glyph: '🏺', label: 'Pottery', word: 'wheel.', line: "Centering. Then a thumb." },
{ id: 'bake', glyph: '🍞', label: 'Baking', word: 'rolling pin.', line: "Flour, water, salt. Today." },
{ id: 'bird', glyph: '🦜', label: 'Birding', word: 'binoculars.', line: "One bird. Out the window." },
{ id: 'pickle', glyph: '🏓', label: 'Pickleball', word: 'paddle.', line: "The kitchen. Stand here." }];


const HERO_COPY = {
  // Each variant has either a `tied` template (uses the active hobby's word)
  // or a static `cycler` list. l1 is the pre-word part; tail is the post line.
  pickup: { l1: 'Pick up the', tied: true, tail: '' },
  learn: { l1: 'Learn', cycler: ['anything.', 'guitar.', 'piano.', 'chess.', 'pottery.'], tail: 'In twenty hours, not twenty years.' },
  twenty: { l1: 'Your next', cycler: ['20 hours.'], tail: 'Three sessions a week. Any hobby.' }
};

const Hero = ({ tweaks }) => {
  const [activeIdx, setActiveIdx] = useState(0);
  const [hovered, setHovered] = useState(null);
  const [blink, setBlink] = useState(false);
  const [cycleIdx, setCycleIdx] = useState(0);
  const stageRef = useRef(null);
  const interactedAtRef = useRef(0);

  const active = HOBBIES[activeIdx].id;
  const focus = hovered || active;
  const copyKey = tweaks.heroCopy || 'pickup';
  const copy = HERO_COPY[copyKey];

  // Auto-rotate hobbies. Pauses while hovering. Resumes after 1.6s of no interaction.
  useEffect(() => {
    const t = setInterval(() => {
      if (hovered) return;
      const sinceInteraction = Date.now() - interactedAtRef.current;
      if (sinceInteraction < 1600) return;
      setActiveIdx((i) => (i + 1) % HOBBIES.length);
    }, 2400);
    return () => clearInterval(t);
  }, [hovered]);

  // Static-cycler animation (only used by `learn` / `twenty` variants).
  useEffect(() => {
    if (copy.tied || !copy.cycler) return;
    const t = setInterval(() => setCycleIdx((i) => (i + 1) % copy.cycler.length), 2400);
    return () => clearInterval(t);
  }, [copy.tied, copy.cycler]);

  // Idle blink
  useEffect(() => {
    let timeout;
    const loop = () => {
      timeout = setTimeout(() => {
        setBlink(true);
        setTimeout(() => setBlink(false), 140);
        loop();
      }, 2200 + Math.random() * 2400);
    };
    loop();
    return () => clearTimeout(timeout);
  }, []);

  // Track tile positions to compute look direction
  const lookVector = useMemo(() => {
    const idx = HOBBIES.findIndex((h) => h.id === focus);
    if (idx === -1) return [0, 0];
    const angle = idx / HOBBIES.length * Math.PI * 2 - Math.PI / 2;
    return [Math.cos(angle) * 0.9, Math.sin(angle) * 0.9];
  }, [focus]);

  const focusHobby = HOBBIES.find((h) => h.id === focus);
  const mood = hovered ? 'excited' : 'curious';

  return (
    <section className="hero" id="hero" style={{ padding: "120px 0px 0px" }}>
      <div className="shell">
        <div className="hero-grid">
          <div>
            <div className="eyebrow"><span className="dot"></span><span>WAITLIST OPEN</span></div>
            <h1>
              {copy.l1}{' '}
              <span className="cycler" key={copy.tied ? active : cycleIdx}>
                <span className="cycler-word">
                  {copy.tied ?
                  HOBBIES[activeIdx].word :
                  copy.cycler[cycleIdx % copy.cycler.length]}
                </span>
              </span>
              <br />
              {copy.tail && <span style={{ color: 'var(--warm)', opacity: 0.85 }}>{copy.tail}</span>}
            </h1>
            <p className="hero-sub" style={{ color: "rgb(255, 255, 255)" }}>Gray meets you wherever your curiosity takes you.
No lectures. No worksheets. Just the next step,
clearly explained.</p>
            <form className="email-form" onSubmit={(e) => e.preventDefault()}>
              <input type="email" placeholder="you@somewhere.com" />
              <button type="submit">
                Join waitlist
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
              </button>
            </form>
            <div className="hero-meta">
              <span className="pill" style={{ borderColor: "rgb(0, 0, 0)" }}>$20/mo · cancel anytime</span>
              <span style={{ fontWeight: "500" }}>3 sessions a week · any hobby</span>
            </div>
          </div>

          {/* Hobby picker stage */}
          <div className="picker-stage" ref={stageRef}>
            <div className="picker-mascot">
              <div className="mascot-frame">
                <Mascot mood={mood} look={lookVector} size={260} blink={blink} />
              </div>
            </div>

            {focusHobby &&
            <div key={focus} className="mascot-bubble">
                {focusHobby.line}
              </div>
            }

            <div className="hobby-orbit">
              {HOBBIES.map((h, i) => {
                const angle = i / HOBBIES.length * Math.PI * 2 - Math.PI / 2;
                const r = 44; // %
                const cx = 50 + Math.cos(angle) * r;
                const cy = 50 + Math.sin(angle) * r;
                return (
                  <button
                    key={h.id}
                    className={`hobby-tile ${active === h.id ? 'active' : ''}`}
                    style={{ left: `${cx}%`, top: `${cy}%` }}
                    onMouseEnter={() => setHovered(h.id)}
                    onMouseLeave={() => setHovered(null)}
                    onClick={() => {interactedAtRef.current = Date.now();setActiveIdx(i);}}>
                    
                    <span className="glyph">{h.glyph}</span>
                    <span>{h.label}</span>
                  </button>);

              })}
            </div>
          </div>
        </div>
      </div>
    </section>);

};

window.Hero = Hero;