/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, Chrome, Foot */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accentHue": 200,
  "showSocials": true
}/*EDITMODE-END*/;

const DELIVERABLES = [
  { n: '01', t: 'A Resource Estimate', d: 'A quantified read of the Time (senior architectural hours) and Tokens (monthly operational compute) your concept will demand at 10⁶ scale. No vague ranges — explicit envelopes.' },
  { n: '02', t: 'A Bottleneck Map', d: 'A pointed assessment of the primary stress vector that breaks your stack first, and the tool-agnostic architectural pattern that fixes it. Two sentences. Surgical.' },
  { n: '03', t: 'A Mission-Fit Decision', d: 'Within 24 hours, a senior architect reviews your inputs and decides whether your project is a fit for a Strike Team engagement. We turn down more than we accept.' },
  { n: '04', t: 'An Execution Map (if accepted)', d: 'A week-by-week build plan — schema, event spine, inference router, observability, beta, production cutover. Fixed-scope Phase 01 proposal attached.' },
  { n: '05', t: 'A Bespoke Strike Team (if engaged)', d: 'A 3–4 operator team composed for your specific vector. No bench, no juniors, no agency tax. Senior architect, product engineer, AI engineer, optional design lead.' },
];

const FAQS = [
  { q: 'Is the diagnostic actually free?', a: 'Yes. The Front Door is a 90-second algorithmic baseline. No card, no call, no email until you ask for senior review. We make money when a Strike Team engages — not before.' },
  { q: 'Who is this for?', a: 'Founders past the prototype stage with a concept that has clear scale risk — usually AI-native products, marketplaces, agentic workflows, or developer tools heading for 10⁶ users. If you\'re still validating a hypothesis, this is the wrong door.' },
  { q: 'What does "tool-agnostic" mean?', a: 'We do not have a preferred stack to upsell. The architecture is chosen for your bottleneck, not our convenience. We have shipped on every major cloud, every major model provider, and every major data plane.' },
  { q: 'How fast is the senior review?', a: 'Within 24 hours of submission you receive a decision. If accepted, the full Execution Map and Phase 01 proposal lands within 72 hours of decision.' },
  { q: 'Why "Time + Tokens"?', a: 'They are the only two non-renewable resources on a modern build. Senior hours and compute throughput. Everything else — frameworks, tools, vendors — is fungible. We optimize what is not.' },
  { q: 'How do you compose a Strike Team?', a: 'After review, we assemble 3–4 operators from a vetted bench: a senior architect (lead), a product engineer, an AI engineer, and optionally a design lead. The team disbands at handover. No retainer drift.' },
];

function FAQRow({ q, a, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`faq-row ${open?'open':''}`} onClick={()=>setOpen(o=>!o)}>
      <div className="faq-q">
        <span>{q}</span>
        <span className="toggle" aria-hidden="true">{open?'—':'+'}</span>
      </div>
      <div className="faq-a">{a}</div>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.documentElement.style.setProperty('--accent', `oklch(0.82 0.08 ${tweaks.accentHue})`);
    document.documentElement.style.setProperty('--accent-dim', `oklch(0.55 0.06 ${tweaks.accentHue})`);
  }, [tweaks.theme, tweaks.accentHue]);

  return (
    <div className="app">
      <a className="skip-link" href="#main">Skip to content</a>
      <Chrome current="about"/>

      <main id="main">
        <section className="about-hero">
          <div className="hero-eyebrow"><span className="pulse-dot"></span>FILE 00 · ABOUT</div>
          <h1>What you get from <em>opening the Front Door.</em></h1>
          <p className="intro">
            Time<span style={{color:'var(--accent)'}}>+</span>Tokens is a tool-agnostic architectural studio. We don't sell hours, decks, or roadmaps. We sell architectural clarity, and — if your project is a fit — a small, senior team that builds the thing. The Front Door is how we decide.
          </p>
        </section>

        <section className="section" style={{paddingTop: 32}}>
          <div className="section-head">
            <div className="file-tag"><span className="accent">§ 01</span> · Deliverables</div>
            <h2>Five things you walk away with.</h2>
          </div>
          <div className="deliverable-list">
            {DELIVERABLES.map(d => (
              <div className="deliverable-row" key={d.n}>
                <div className="num">{d.n}</div>
                <h3>{d.t}</h3>
                <p>{d.d}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="section" style={{paddingTop: 0}}>
          <div className="section-head">
            <div className="file-tag"><span className="accent">§ 02</span> · Frequently Asked</div>
            <h2>The questions every founder asks.</h2>
          </div>
          <div className="faq">
            {FAQS.map((f, i) => <FAQRow key={i} q={f.q} a={f.a} defaultOpen={i===0}/>)}
          </div>
        </section>

        <section className="cta-final">
          <h2>Ninety seconds. <em>Free.</em> No call.</h2>
          <p>The Front Door is open. If your concept is serious, we'll know within 24 hours.</p>
          <div style={{display:'flex', gap:16, justifyContent:'center', flexWrap:'wrap'}}>
            <a href="diagnostic.html" className="btn accent">
              Begin Diagnostic <span className="arrow">→</span>
            </a>
            <a href="index.html" className="btn">Back to home</a>
          </div>
        </section>
      </main>

      {tweaks.showSocials && <Foot/>}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio label="Mode" value={tweaks.theme}
            options={[{value:'dark',label:'Charcoal'},{value:'light',label:'Vellum'}]}
            onChange={(v)=>setTweak('theme', v)}/>
        </TweakSection>
        <TweakSection title="Accent">
          <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
            {[{h:200,name:'Cyan'},{h:160,name:'Mint'},{h:60,name:'Amber'},{h:30,name:'Rust'},{h:340,name:'Coral'},{h:280,name:'Iris'}].map(c => (
              <button key={c.h} onClick={()=>setTweak('accentHue', c.h)} title={c.name} aria-label={`Accent ${c.name}`}
                style={{width:28, height:28, background:`oklch(0.82 0.08 ${c.h})`,
                  border: tweaks.accentHue===c.h ? '2px solid #fff' : '1px solid rgba(255,255,255,0.2)', cursor:'pointer'}}/>
            ))}
          </div>
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle label="Show footer + socials" value={tweaks.showSocials}
            onChange={(v)=>setTweak('showSocials', v)}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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