// Sections: Problem, How it works, Day 1→20, Bento, Pricing, Final, Footer
const { useState: useS2, useEffect: useE2, useRef: useR2 } = React;

// ---- Problem ----
const Problem = () => {
  const items = [
  { obj: 'A guitar in the closet.', stat: '37 days untouched' },
  { obj: 'A piano taking up the wall.', stat: '11 weeks since last note' },
  { obj: 'A camera with a dead battery.', stat: '4 months in the drawer' },
  { obj: 'Watercolors, still wrapped.', stat: 'never opened' },
  { obj: 'A chess set on the shelf.', stat: '"someday"' }];

  return (
    <section className="section problem" id="problem" style={{ padding: "0px 0px 100px" }}>
      <div className="shell">
        <div className="problem-grid">
          <div>
            <div className="section-label">The 20-hour gap</div>
            <h2 className="section-h">The hardest part of any hobby is the first 20 hours.</h2>
          </div>
          <div>
            <p style={{ fontSize: 18, lineHeight: 1.5, margin: 0 }}>
              You bought the thing. You meant to start. Then the tutorials got too long, the YouTube algorithm wandered off, and the thing went quiet.
            </p>
            <ul className="problem-list">
              {items.map((it, i) =>
              <li key={i}>
                  <span className="obj">{it.obj}</span>
                  <span className="stat">{it.stat}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

};

// ---- How it works ----
const How = () => {
  const steps = [
  {
    n: '01',
    t: 'Pick a hobby.',
    d: 'Anything in the library. Switch whenever — Gray remembers across them all.',
    visual:
    <div className="how-visual how-visual-pick">
          <div className="how-chip-row">
            {[
        { g: '🎹', l: 'Piano' },
        { g: '🏺', l: 'Pottery' },
        { g: '♞', l: 'Chess', active: true },
        { g: '✏️', l: 'Drawing' },
        { g: '🎸', l: 'Guitar' },
        { g: '🍞', l: 'Baking' },
        { g: '🦜', l: 'Birding' },
        { g: '🏓', l: 'Pickleball' },
        { g: '🧶', l: 'Knitting' }].
        map((c, i) =>
        <div key={i} className={`how-chip ${c.active ? 'on' : ''}`}>
                <span className="g">{c.g}</span><span>{c.l}</span>
              </div>
        )}
          </div>
          <div className="how-pick-foot">
            <span className="how-cursor" /> <span>Tap to pick · switch anytime</span>
          </div>
        </div>

  },
  {
    n: '02',
    t: 'Show Gray where you are.',
    d: 'A 30-second video, audio, or photo. Gray reads the level. No quizzes, no forms.',
    visual:
    <div className="how-visual how-visual-show">
          <div className="how-record">
            <div className="how-record-head">
              <span className="how-rec-dot" />
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em' }}>RECORDING · 0:24</span>
            </div>
            <div className="how-wave">
              {Array.from({ length: 28 }).map((_, i) => {
            const h = 18 + Math.abs(Math.sin(i * 0.7)) * 38 + i % 3 * 6;
            return <span key={i} style={{ height: `${h}%`, animationDelay: `${i * 0.05}s` }} />;
          })}
            </div>
            <div className="how-record-foot">
              <span>🎙️ Audio</span>
              <span>📹 Video</span>
              <span>📷 Photo</span>
            </div>
          </div>
        </div>

  },
  {
    n: '03',
    t: 'Get the next step.',
    d: 'One small thing to try. Three sessions a week. That\'s it. That\'s the loop.',
    visual:
    <div className="how-visual how-visual-step">
          <div className="how-msg how-msg-gray">
            <img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777940000/mascot-2_tfqfde.png" alt="" className="how-msg-avatar" />
            <div className="how-msg-bubble">
              <div className="how-msg-meta">Gray · just now</div>
              <div>Nice tone on that C. Tomorrow: try the same note with your <em>left</em> hand. Three minutes. That's it.</div>
            </div>
          </div>
          <div className="how-action">
            <button className="how-action-btn">Got it →</button>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(10,10,15,0.45)' }}>Next session in 2 days</span>
          </div>
        </div>

  }];

  return (
    <section className="section how" id="how" style={{ padding: "60px 0px" }}>
      <div className="shell">
        <div className="how-head">
          <div className="section-label">How it works</div>
          <h2 className="section-h">Three sessions. One loop. No worksheets.</h2>
          <p>Graze isn't a course. It's a coach with a 20-minute attention span — yours. Every session ends with the next clear step.</p>
        </div>
        <div className="how-steps">
          {steps.map((s) =>
          <div className="how-step" key={s.n}>
              <div className="how-step-head">
                <div className="num">{s.n}</div>
                <div>
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              </div>
              <div className="how-step-visual">{s.visual}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ---- Day 1 → Day 20 scrubber ----
const DAY_FRAMES = [
{ day: 1, label: 'Day 01', quote: ['One note.', 'Held for four counts.'], meta: ['Piano · Session 01', 'Audio submission · 0:42'] },
{ day: 5, label: 'Day 05', quote: ['Two hands.', <em key="e">Slowly.</em>], meta: ['Piano · Session 03', 'Audio submission · 1:18'] },
{ day: 10, label: 'Day 10', quote: ['Your first', <em key="e">recognizable</em>, ' melody.'], meta: ['Piano · Session 06', 'Video · 1:54'] },
{ day: 15, label: 'Day 15', quote: ['You played it through.', 'Both hands.', 'No stops.'], meta: ['Piano · Session 09', 'Video · 2:31'] },
{ day: 20, label: 'Day 20', quote: ["You're a", <em key="e">person who plays piano</em>, ' now.'], meta: ['Piano · Session 12', 'Twenty hours in'] }];


const DayScrubber = () => {
  const [idx, setIdx] = useS2(2);
  const trackRef = useR2(null);
  const dragRef = useR2(false);

  const frame = DAY_FRAMES[idx];

  const setByX = (clientX) => {
    const rect = trackRef.current.getBoundingClientRect();
    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
    setIdx(Math.round(pct * (DAY_FRAMES.length - 1)));
  };

  useE2(() => {
    const move = (e) => {if (dragRef.current) setByX(e.clientX || e.touches[0].clientX);};
    const up = () => {dragRef.current = false;};
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, []);

  const pct = idx / (DAY_FRAMES.length - 1) * 100;

  return (
    <section className="section day" id="day" style={{ padding: "60px 0px 0px" }}>
      <div className="shell">
        <div className="day-head">
          <div className="section-label">Twenty hours, visualized</div>
          <h2 className="section-h">Drag to see twenty hours of piano.</h2>
        </div>
        <div className="day-stage">
          <div className="day-frames">
            <div className="day-frame" key={idx} style={{ borderColor: "rgb(0, 0, 0)", height: "460px" }}>
              <div className="badge"><span className="num">{frame.label}</span> · GRAY'S NOTE</div>
              <p className="quote">{frame.quote.map((p, i) => <React.Fragment key={i}>{p}{typeof p === 'string' ? ' ' : ''}</React.Fragment>)}</p>
              <div className="meta">
                <span>{frame.meta[0]}</span>
                <span>{frame.meta[1]}</span>
              </div>
            </div>
          </div>
          <div className="day-track">
            <div
              className="day-track-rail"
              ref={trackRef}
              onMouseDown={(e) => {dragRef.current = true;setByX(e.clientX);}}
              onTouchStart={(e) => {dragRef.current = true;setByX(e.touches[0].clientX);}}>
              
              <div className="day-track-fill" style={{ width: `${pct}%` }} />
              <div className="day-track-thumb" style={{ left: `${pct}%` }} />
            </div>
          </div>
          <div className="day-ticks">
            {DAY_FRAMES.map((f) => <span key={f.day}>Day {String(f.day).padStart(2, '0')}</span>)}
          </div>
        </div>
      </div>
    </section>);

};

// ---- Bento ----
const Bento = () => {
  return (
    <section className="section bento-section" style={{ padding: "60px 0px 70px" }}>
      <div className="shell">
        <div style={{ marginBottom: 32 }}>
          <div className="section-label">A library, not a course catalog</div>
          <h2 className="section-h" style={{ maxWidth: 720 }}>Switch whenever. Gray keeps the thread.</h2>
        </div>
        <div className="bento">
          <div className="bento-cell b-1"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777939911/gray-3_ashgkx.png" alt="Watercolors" /><span className="label">Watercolors · Day 1</span></div>
          <div className="bento-cell b-2"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777940168/gray-7_acfg2a.png" alt="Pottery" /><span className="label">Pottery</span></div>
          <div className="bento-cell b-3"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777939992/gray-12_er62wm.png" alt="Sourdough" /><span className="label">Sourdough</span></div>
          <div className="bento-cell b-4 cell-quote">
            <div>
              <div className="q">"No lectures. Just the next step, clearly explained."</div>
              <div className="by">— Gray, your Graze coach</div>
            </div>
          </div>
          <div className="bento-cell b-5"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777939903/gray-1_vfbnla.png" alt="3D printing" /><span className="label">3D printing</span></div>
          <div className="bento-cell b-6"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777939919/gray-5_yshcdt.png" alt="Knitting" /><span className="label">Knitting · Day 14</span></div>
          <div className="bento-cell b-7"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777939920/gray-9_bpf5mi.png" alt="Baking" /><span className="label">Baking · Session 04</span></div>
          <div className="bento-cell b-8"><img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777939993/gray-14_r5mwdq.png" alt="Mahjong" /><span className="label">Mahjong · Session 02</span></div>
        </div>
      </div>
    </section>);

};

// ---- Pricing ----
const Pricing = () =>
<section className="section pricing" id="pricing" style={{ padding: "70px 0px" }}>
    <div className="shell">
      <div className="pricing-wrap">
        <div>
          <div className="section-label">One plan. One price.</div>
          <h2 className="section-h">Twenty bucks. Any hobby. Cancel anytime.</h2>
          <div className="tripod-callout">
            <div className="tripod-icon">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0A0A0F" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><rect x="6" y="3" width="12" height="9" rx="1.5" /><path d="M12 12v3M6 21l6-6 6 6" /></svg>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--display)', fontWeight: 600, fontSize: 18, letterSpacing: '-0.01em', marginBottom: 4 }}>Tripod ships in month one.</div>
              <div style={{ fontSize: 14, lineHeight: 1.5 }}>The day it lands, video lessons unlock. Until then: audio + text. (Included. We just wanted to say "tripod" out loud.)</div>
            </div>
          </div>
        </div>
        <div className="price-card">
          <div className="ribbon">Waitlist · 50% off first 3 months</div>
          <h3>Graze membership</h3>
          <div className="price-amt">
            <span className="num">$20</span><span className="per">/ month</span>
          </div>
          <ul className="price-features">
            {[
          '3 sessions a week, any hobby',
          'AI assessment on video, audio, or photo',
          'Access to every hobby in the library',
          'Gray remembers history across all hobbies',
          'Peer matching at exact skill level',
          'Branded tripod ships month one — included'].
          map((f) =>
          <li key={f}>
                <span className="check"><svg viewBox="0 0 24 24" fill="none" stroke="#0A0A0F" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg></span>
                <span>{f}</span>
              </li>
          )}
          </ul>
          <a href="#final" className="price-cta">Join the waitlist →</a>
          <div className="price-fineprint">Gift a free month → 50% off your next bill</div>
        </div>
      </div>
    </div>
  </section>;


// ---- Final ----
const Final = () =>
<section className="section final" id="final" style={{ padding: "80px 0px 0px" }}>
    <div className="shell">
      <h2 className="final-h">You own a guitar you barely touch.</h2>
      <p>Three sessions this week. Twenty hours by spring. Gray will meet you there.</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>
  </section>;


const Footer = () =>
<footer className="footer">
    <div className="shell">
      <div className="footer-row">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="wordmark">graze.it</span>
          <span style={{ color: 'var(--muted-2)' }}>·</span>
          <span>Graze. Learn. Repeat.</span>
        </div>
        <div>© 2026 Graze · made for the curious</div>
      </div>
    </div>
  </footer>;


Object.assign(window, { Problem, How, DayScrubber, Bento, Pricing, Final, Footer });