// Jump Studio — homepage / tool launcher.
// Ported from the Claude Design handoff and wired into the live app:
//   • tool links point at the real tools (/shot-list/, /, /invoice/)
//   • the rail + header come from the shared chrome.jsx (window.Rail / window.Header)
//   • "Create free account" opens the real auth modal (window.__jumpOpenAuth)
//   • the header shows the real account menu + Go Pro (AuthControls / billing)
const { useState, useEffect, useRef } = React;

/* ============ Tool registry ============ */
const TOOLS = [
  {
    id: 'shots',
    name: 'Shot List',
    href: '/shot-list/',
    status: 'live',
    tagline: 'Plan every frame before you roll.',
    desc: 'Build cinematic shot lists with reference frames, camera + lens metadata, and approval tracking your whole crew can follow.',
    Icon: () => <IconShotList />,
    accent: '#5BD68C',
    points: ['Reference frames per shot', 'Camera, lens & angle metadata', 'Approve / review workflow'],
    cardArt: 'shots',
  },
  {
    id: 'converter',
    name: 'Image Converter',
    href: '/converter/',
    status: 'live',
    tagline: 'Convert, resize & optimize in the browser.',
    desc: 'Drag in any image and export to PNG, JPG, WebP, or TIFF at the size you need. Nothing leaves your machine — it all runs locally.',
    Icon: () => <IconImage />,
    accent: '#6BC8F5',
    points: ['PNG · JPG · WebP · TIFF', 'Batch resize & compress', '100% local, private'],
    cardArt: 'converter',
  },
  {
    id: 'invoice',
    name: 'Invoice & Quotes',
    href: '/invoice/',
    status: 'live',
    tagline: 'Send invoices that look the part.',
    desc: 'A document-first invoice and quote builder — any currency, your bank details, your logo. What you edit is exactly what exports.',
    Icon: () => <IconInvoice />,
    accent: '#F5C26B',
    points: ['Invoices & quotes', 'Any currency + bank details', 'PDF export'],
    cardArt: 'invoice',
  },
];

/* ============ Decorative card art ============ */
function CardArt({ kind, accent }) {
  if (kind === 'shots') {
    return (
      <div className="tool-art tool-art-shots" style={{ '--art': accent }}>
        <div className="art-frame art-frame-1" />
        <div className="art-frame art-frame-2" />
        <div className="art-frame art-frame-3" />
        <div className="art-reticle">
          <span /><span /><span /><span />
        </div>
      </div>
    );
  }
  if (kind === 'converter') {
    return (
      <div className="tool-art tool-art-converter" style={{ '--art': accent }}>
        <div className="art-chip">PNG</div>
        <div className="art-chip">JPG</div>
        <div className="art-chip art-chip-hi">TIFF</div>
        <div className="art-arrow"><IconChevRight /></div>
        <div className="art-out" />
      </div>
    );
  }
  return (
    <div className="tool-art tool-art-invoice" style={{ '--art': accent }}>
      <div className="art-doc">
        <div className="art-line art-line-lg" />
        <div className="art-line" />
        <div className="art-line art-line-sm" />
        <div className="art-row"><span /><span /></div>
        <div className="art-row"><span /><span /></div>
        <div className="art-total" />
      </div>
    </div>
  );
}

/* ============ Status pill ============ */
function StatusPill({ status }) {
  if (status === 'live') {
    return <span className="status-pill status-live"><span className="pulse" /> Live</span>;
  }
  return <span className="status-pill status-soon">Coming soon</span>;
}

/* ============ Hero ============ */
function Hero({ onSignUp, onBrowse }) {
  return (
    <section className="home-hero">
      <div className="hero-glow" />
      <div className="hero-inner">
        <div className="hero-eyebrow">
          <span className="dot" /> The toolkit for working creatives
        </div>
        <h1 className="hero-title">
          Everything you need<br />
          <span className="hero-title-accent">between brief and delivery.</span>
        </h1>
        <p className="hero-sub">
          Jump Studio is a growing set of fast, focused tools for production —
          plan your shots, prep your assets, and bill your clients, all in one place.
        </p>
        <div className="hero-cta">
          <button className="btn btn-primary btn-lg" onClick={onSignUp}>
            <IconPlus /> Create free account
          </button>
          <button className="btn btn-lg" onClick={onBrowse}>
            Browse the tools <IconChevRight />
          </button>
        </div>
        <div className="hero-meta">
          <span><strong>3</strong> tools and counting</span>
          <span className="sep">·</span>
          <span>Runs in your browser</span>
          <span className="sep">·</span>
          <span>No install</span>
        </div>
      </div>

      <div className="hero-stack" aria-hidden="true">
        {TOOLS.map((t, i) => (
          <div className={`hero-stack-card hero-stack-${i}`} key={t.id} style={{ '--art': t.accent }}>
            <div className="hero-stack-icon"><t.Icon /></div>
            <div className="hero-stack-name">{t.name}</div>
            <CardArt kind={t.cardArt} accent={t.accent} />
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============ Tool card ============ */
function ToolCard({ tool }) {
  return (
    <a className="tool-row" href={tool.href} style={{ '--art': tool.accent }}>
      <div className="tool-row-art">
        <CardArt kind={tool.cardArt} accent={tool.accent} />
      </div>
      <div className="tool-row-body">
        <div className="tool-row-top">
          <div className="tool-row-icon"><tool.Icon /></div>
          <h3 className="tool-row-name">{tool.name}</h3>
        </div>
        <p className="tool-row-desc">{tool.desc}</p>
        <ul className="tool-row-points">
          {tool.points.map((p, i) => (
            <li key={i}><IconCheck /> {p}</li>
          ))}
        </ul>
      </div>
      <div className="tool-row-cta">
        <span className="tool-row-open">Open <IconChevRight /></span>
      </div>
    </a>
  );
}

/* ============ How it works ============ */
const STEPS = [
  { n: '01', title: 'Pick a tool', desc: 'Jump straight into the Shot List, Image Converter, or Invoice builder — no setup.' },
  { n: '02', title: 'Do the work', desc: 'Everything runs live in your browser. Your files and data stay on your machine.' },
  { n: '03', title: 'Export & ship', desc: 'Download clean PDFs, optimized images, or shareable lists when you’re done.' },
];

function HowItWorks() {
  return (
    <section className="home-section">
      <div className="section-head">
        <div className="section-eyebrow"><span className="dot" /> How it works</div>
        <h2 className="section-title">From idea to delivery in three steps.</h2>
      </div>
      <div className="steps-grid">
        {STEPS.map((s) => (
          <div className="step-card" key={s.n}>
            <div className="step-n">{s.n}</div>
            <h3 className="step-title">{s.title}</h3>
            <p className="step-desc">{s.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============ Bottom CTA ============ */
function BottomCTA({ onSignUp }) {
  return (
    <section className="home-cta-band">
      <div className="cta-band-glow" />
      <div className="cta-band-inner">
        <h2 className="cta-band-title">Set up your studio in minutes.</h2>
        <p className="cta-band-sub">
          Create a free account to save your projects, sync across devices, and get new tools as they launch.
        </p>
        <div className="cta-band-actions">
          <button className="btn btn-primary btn-lg" onClick={onSignUp}>
            <IconPlus /> Create free account
          </button>
          <a className="btn btn-lg btn-on-band" href="/shot-list/">
            Start with Shot List <IconChevRight />
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============ App ============ */
function App() {
  const [theme, setTheme] = useState(() => document.documentElement.getAttribute('data-theme') || 'dark');
  const [railExpanded, setRailExpanded] = useState(false);
  const toolsRef = useRef();

  useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]);
  useEffect(() => { document.title = 'Jump Studio — Tools for filmmakers'; }, []);

  const scrollToTools = () => {
    const el = toolsRef.current;
    const scroller = el?.closest('.home-scroll');
    if (el && scroller) {
      scroller.scrollTo({ top: el.offsetTop - 24, behavior: 'smooth' });
    }
  };

  // "Create free account" → the real auth modal (Google + magic link).
  const onSignUp = () => { if (window.__jumpOpenAuth) window.__jumpOpenAuth(); };

  return (
    <div className={`app home-app ${railExpanded ? 'rail-expanded' : ''}`}>
      <Rail page="home" expanded={railExpanded} setExpanded={setRailExpanded} />
      <main className="main">
        <Header theme={theme} setTheme={setTheme} crumbs={['Jump Studio', 'Home']} minimal />
        <div className="home-scroll">
          <Hero onSignUp={onSignUp} onBrowse={scrollToTools} />

          <section className="home-section" ref={toolsRef}>
            <div className="section-head">
              <div className="section-eyebrow"><span className="dot" /> The tools</div>
              <h2 className="section-title">Three tools. One studio.</h2>
              <p className="section-sub">Each one does a single job exceptionally well. Pick where you are in the process.</p>
            </div>

            <div className="tools-rows">
              {TOOLS.map((t) => <ToolCard key={t.id} tool={t} />)}
            </div>
          </section>

          <HowItWorks />
          <BottomCTA onSignUp={onSignUp} />

          <footer className="home-footer">
            <div className="home-footer-brand">
              <div className="footer-mark"><IconLogo /></div>
              <span>Jump Studio</span>
            </div>
            <div className="home-footer-links">
              <a href="/shot-list/">Shot List</a>
              <a href="/converter/">Image Converter</a>
              <a href="/invoice/">Invoice</a>
            </div>
            <div className="home-footer-meta">© 2026 Jump Studio · Built for filmmakers</div>
          </footer>
        </div>
      </main>
    </div>
  );
}

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