// Join Victory Life — splash page
const { useState, useEffect, useRef, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "rotateSeconds": 7,
  "autoRotate": true,
  "showSideRule": false,
  "panelStyle": "gradient",
  "headlineTreatment": "italic-accent"
}/*EDITMODE-END*/;

const SCENES = [
  { id: 'strength',  num: '01', label: 'Strength', title: 'Lift / Build', panelClass: 'panel-strength' },
  { id: 'running',   num: '02', label: 'Movement', title: 'Run / Move',   panelClass: 'panel-running' },
  { id: 'transform', num: '03', label: 'Becoming', title: 'Transform',    panelClass: 'panel-transform' },
];

function ScenePanel({ scene, active }) {
  return (
    <div className={`scene ${active ? 'active' : ''}`} aria-hidden={!active}>
      <div className="scene-canvas">
        <div className="ken-burns">
          <div className={`panel-photo ${scene.panelClass}`} />
          <div className="grain" />
        </div>
      </div>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState(0);
  const timerRef = useRef(null);

  const rotateMs = Math.max(2000, (tweaks.rotateSeconds || 7) * 1000);

  const advance = useCallback((dir = 1) => {
    setActive((i) => (i + dir + SCENES.length) % SCENES.length);
  }, []);

  // Auto-rotate
  useEffect(() => {
    if (!tweaks.autoRotate) return;
    timerRef.current = setInterval(() => {
      setActive((i) => (i + 1) % SCENES.length);
    }, rotateMs);
    return () => clearInterval(timerRef.current);
  }, [tweaks.autoRotate, rotateMs, active]);

  const goTo = (idx) => {
    setActive(idx);
    // reset timer
    if (timerRef.current) {
      clearInterval(timerRef.current);
      if (tweaks.autoRotate) {
        timerRef.current = setInterval(() => {
          setActive((i) => (i + 1) % SCENES.length);
        }, rotateMs);
      }
    }
  };

  // CSS var for indicator bar duration
  useEffect(() => {
    document.documentElement.style.setProperty('--rotate-duration', `${tweaks.rotateSeconds}s`);
  }, [tweaks.rotateSeconds]);

  // Keyboard nav
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowRight') advance(1);
      if (e.key === 'ArrowLeft') advance(-1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [advance]);

  const renderHeadline = () => {
    if (tweaks.headlineTreatment === 'all-italic') {
      return <h1 className="headline"><em>Unlock<br/>Yourself</em></h1>;
    }
    if (tweaks.headlineTreatment === 'plain') {
      return <h1 className="headline">Unlock<br/>Yourself</h1>;
    }
    // italic-accent (default)
    return <h1 className="headline">Unlock<br/><em>Yourself.</em></h1>;
  };

  return (
    <>
    <div className="stage" data-screen-label="Splash">
      {/* Hero scene layer */}
      {SCENES.map((s, i) => (
        <ScenePanel key={s.id} scene={s} active={i === active} />
      ))}

      {tweaks.showSideRule && (
        <div className="side-rule" style={{ display: 'block' }}>
          Victory Life · Est. MMXXVI
        </div>
      )}

      {/* Foreground content */}
      <div className="content">
        <div className="topbar">
          <div className="wordmark">
            <div className="mark" aria-hidden="true"></div>
            <div className="name">Victory <em>Life</em></div>
          </div>
          <nav></nav>
        </div>

        <div className="hero">
          <div className="copy">
            <div className="eyebrow">
              <span className="dot" />
              <span>A private wellness community</span>
            </div>

            {renderHeadline()}

            <p className="tagline">
              Don't let biology get in the way.
            </p>

            <p className="support">
              A private wellness, fitness, and biohacking community for people becoming
              their most fully expressed selves.
            </p>

            <div className="cta-row">
              <button className="btn-cta" onClick={() => { window.location.href='https://victory-life.circle.so/join?invitation_token=2682023876f3f5ad1be600ceeda5ca71abd621e7-33748b45-3f4a-4181-b385-a351fe83efaa'; }}>
                <span>Join Victory Life</span>
                <span className="arrow" aria-hidden="true"></span>
              </button>
            </div>
          </div>
          {/* right column reserved — image lives behind */}
          <div aria-hidden="true"></div>
        </div>

        <div className="bottombar">
          <div />
          <div />
        </div>
      </div>

      <a href="#about" className="scroll-cue" aria-label="Scroll to learn more">
        <span>Discover</span>
        <span className="line" />
      </a>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero Rotation">
          <TweakSlider
            label="Seconds per scene"
            value={tweaks.rotateSeconds}
            min={3} max={15} step={1}
            onChange={(v) => setTweak('rotateSeconds', v)}
          />
          <TweakToggle
            label="Auto rotate"
            value={tweaks.autoRotate}
            onChange={(v) => setTweak('autoRotate', v)}
          />
        </TweakSection>

        <TweakSection title="Type">
          <TweakRadio
            label="Headline treatment"
            value={tweaks.headlineTreatment}
            options={[
              { value: 'italic-accent', label: 'Italic accent' },
              { value: 'all-italic', label: 'All italic' },
              { value: 'plain', label: 'Plain' },
            ]}
            onChange={(v) => setTweak('headlineTreatment', v)}
          />
        </TweakSection>

        <TweakSection title="Details">
          <TweakToggle
            label="Vertical side rule"
            value={tweaks.showSideRule}
            onChange={(v) => setTweak('showSideRule', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>

    {/* ============= Below the fold ============= */}
    <main className="below">

      {/* 1 — What Victory Life Is */}
      <section id="about" className="section what-it-is" data-screen-label="About">
        <div className="lede">
          <div className="section-eyebrow">
            <span className="dash" />
            <span>01 · The Idea</span>
          </div>
          <h2 className="section-h2">What Victory Life <em>is.</em></h2>
        </div>
        <div className="body">
          <span className="corner tl" />
          <span className="corner tr" />
          <span className="corner bl" />
          <span className="corner br" />
          <p>
            Victory Life is a private wellness, fitness, and biohacking community
            for people who want more energy, better body composition, deeper
            recovery, and the kind of momentum that changes how they feel
            every day.
          </p>
          <p>
            It's a place where support, education, and smarter tools come
            together to help you stop spinning your wheels, move forward with
            confidence, and unlock a stronger, healthier version of yourself.
          </p>
        </div>
      </section>

      {/* 2 — What's Inside */}
      <section className="section" data-screen-label="Inside">
        <div className="section-eyebrow">
          <span className="dash" />
          <span>02 · Inside</span>
        </div>
        <h2 className="section-h2">What you'll <em>find inside.</em></h2>
        <p className="section-lead">
          Four spaces, designed to support each other — and you.
        </p>

        <div className="inside-grid">
          {[
            {
              n: '01',
              title: 'Private Community',
              body: 'Real people. Real support. Real momentum.',
              icon: (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <circle cx="9" cy="9" r="3.5"/><circle cx="16" cy="11" r="2.6"/>
                  <path d="M3 19c0-3 2.7-5 6-5s6 2 6 5"/><path d="M14 19c0-2 2-3.4 4-3.4S22 17 22 19"/>
                </svg>
              ),
            },
            {
              n: '02',
              title: 'Peptide Protocol AI',
              body: 'Smarter answers and clearer protocol guidance inside the experience.',
              icon: (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <circle cx="6" cy="7" r="2"/><circle cx="18" cy="7" r="2"/>
                  <circle cx="6" cy="17" r="2"/><circle cx="18" cy="17" r="2"/>
                  <circle cx="12" cy="12" r="2.4"/>
                  <path d="M7.5 8.2 10.5 11M16.5 8.2 13.5 11M7.5 15.8 10.5 13M16.5 15.8 13.5 13"/>
                </svg>
              ),
            },
            {
              n: '03',
              title: 'Goal-Based Paths',
              body: 'Spaces built around weight loss, performance, recovery, energy, and more.',
              icon: (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5.5"/>
                  <circle cx="12" cy="12" r="2"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2"/>
                </svg>
              ),
            },
            {
              n: '04',
              title: 'Education That Moves You Forward',
              body: 'Courses, protocols, and practical support designed to help you take the next step.',
              icon: (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M7 9.5v5c0 1.5 2.5 3 5 3s5-1.5 5-3v-5"/>
                  <path d="M21 7v6"/>
                </svg>
              ),
            },
          ].map((c) => (
            <div key={c.n} className="inside-card">
              <div className="ico">{c.icon}</div>
              <span className="num">{c.n}</span>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 3 — How it works */}
      <div className="how-band">
        <section className="section" data-screen-label="How">
          <div className="section-eyebrow">
            <span className="dash" />
            <span>03 · The Path</span>
          </div>
          <h2 className="section-h2">How it <em>works.</em></h2>
          <p className="section-lead">Three quiet steps. No friction.</p>

          <div className="steps">
            {[
              { n: '1', title: 'Join Victory Life', body: 'Step into the community through the private join path.' },
              { n: '2', title: 'Enter the Experience', body: 'Land inside the community and start with the onboarding path.' },
              { n: '3', title: 'Start Your Path', body: 'Pick your goal, ask your first question, and begin building momentum.' },
            ].map((s) => (
              <div key={s.n} className="step">
                <div className="stepnum">{s.n}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </section>
      </div>

      {/* 4 — Final CTA */}
      <section className="final" data-screen-label="Final">
        <div className="ornament" />
        <h2>Step into <em>Victory Life.</em></h2>
        <p className="lead">
          A private wellness, fitness, and biohacking community built to help
          you unlock more of what's already in you.
        </p>
        <div className="cta-row">
          <button className="btn-cta" onClick={() => { window.location.href='https://victory-life.circle.so/join?invitation_token=2682023876f3f5ad1be600ceeda5ca71abd621e7-33748b45-3f4a-4181-b385-a351fe83efaa'; }}>
            <span>Join Victory Life</span>
            <span className="arrow" aria-hidden="true"></span>
          </button>
        </div>
      </section>

    </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);