/* global React */

// ============================================================
// ONE-PAGER — composed landing page
// A (top banner) → D ("What you don't manage") → B → C
// Reuses the namespaced section styles from each direction.
// ============================================================

// ---- A · TOP BANNER -----------------------------------------
function BannerA() {
  return (
    <div className="dirA">
      <section className="hero-wrap">
        <div>
          <div className="ovl cyan" style={{marginBottom: 24}}>· 01 / Aaas.name</div>
          <h1 className="hero-h1">
            EMAIL IT<br/>
            FORGET IT<span className="dot">.</span>
          </h1>
          <div className="intern-note"><span className="status-dot red"></span><span>It's like emailing a new intern — talented, fast, and only as good as the context you hand over. That's the part we solved.</span></div>
          <p className="hero-sub" style={{marginTop: 16}}>
            Asking AI is finally easier than managing a colleague. Send the request.
            Sleep on it. Wake up to the deliverable.
          </p>
          <div style={{display:'flex', gap:12, marginTop:32}}>
            <button className="btn-primary">Email your first agent →</button>
            <button className="btn-outline">Watch a real run</button>
          </div>
          <div className="dot-row" style={{marginTop:32}}>
            <span className="status-dot cyan"></span>
            <span className="ovl cyan">CONTEXT ENGINE / ONLINE</span>
            <span className="ovl" style={{marginLeft:16}}>v2.4.1 · 18h avg turnaround</span>
          </div>
        </div>

        <div className="email-stack">
          <div className="email-card outgoing">
            <div className="email-meta-row">
              <span>FROM ▸ you@company.com</span>
              <span>09:14 · TUE</span>
            </div>
            <div className="email-from">TO: agent@aaas.name</div>
            <div className="email-subj">A/B test the new pricing page</div>
            <div className="email-body">
              Hey — can you run an A/B test on /pricing this week and report
              which CTA copy converts better. Use the Mixpanel + GA tokens
              already on file.
            </div>
          </div>

          <div className="arrow-flow">
            <svg width="20" height="20" viewBox="0 0 20 20">
              <path d="M4 10h12M11 5l5 5-5 5" stroke="rgb(0 243 255)" strokeWidth="1.5" fill="none"/>
            </svg>
          </div>

          <div className="email-card incoming">
            <div className="email-meta-row">
              <span style={{color:'rgb(0 243 255)'}}>▸ FROM agent@aaas.name</span>
              <span>WED · 18h LATER</span>
            </div>
            <div className="email-from" style={{color:'rgb(0 212 184)'}}>RE: A/B test the new pricing page</div>
            <div className="email-subj">Done. "Start free" beat "Get started" by 22%</div>
            <div className="email-body">
              Ran the experiment Tue–Wed across 4,128 sessions. Stat-sig at
              p=0.018. Full deck attached, ready to ship.
              <div style={{marginTop:14, display:'flex', gap:8, flexWrap:'wrap'}}>
                <span className="ovl" style={{padding:'4px 10px', border:'1px solid rgba(255,255,255,0.12)', borderRadius:9999}}>📎 ab-test-pricing.pdf</span>
                <span className="ovl" style={{padding:'4px 10px', border:'1px solid rgba(255,255,255,0.12)', borderRadius:9999}}>📎 raw-events.csv</span>
                <span className="ovl" style={{padding:'4px 10px', border:'1px solid rgba(255,255,255,0.12)', borderRadius:9999, color:'rgb(0 243 255)'}}>↗ live dashboard</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---- D · WHAT YOU DON'T MANAGE ------------------------------
function EngineD() {
  return (
    <div className="dirD">
      <section className="schematic">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:40}}>
          <div>
            <div className="ovl cyan">· 03 / The engine</div>
            <h2 className="section-h2" style={{marginTop:12, fontSize:40}}>What you don't manage<span className="accent">.</span></h2>
          </div>
          <div className="ovl">CONTEXT · ROUTING · DELIVERY</div>
        </div>

        <div className="schematic-grid">
          <div className="sch-side">
            <div className="ovl" style={{marginBottom:8}}>▸ INBOUND</div>
            <div className="sch-node">
              <strong>Email request</strong>
              "Send me 50 leads…"
            </div>
            <div className="sch-node">
              <strong>Your context</strong>
              CRM · drive · calendar · prior threads
            </div>
            <div className="sch-node">
              <strong>Skill library</strong>
              5,400+ structured skills
            </div>
          </div>

          <div className="sch-center">
            <svg viewBox="0 0 500 320" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
              <defs>
                <marker id="arrowOP" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
                  <polygon points="0 0, 6 3, 0 6" fill="rgb(0 243 255)"/>
                </marker>
              </defs>
              <path className="sch-line" d="M 0 60 Q 120 60 200 160" markerEnd="url(#arrowOP)"/>
              <path className="sch-line" d="M 0 160 Q 120 160 200 160" markerEnd="url(#arrowOP)"/>
              <path className="sch-line" d="M 0 260 Q 120 260 200 160" markerEnd="url(#arrowOP)"/>
              <path className="sch-line" d="M 300 160 Q 380 60 500 60" markerEnd="url(#arrowOP)"/>
              <path className="sch-line" d="M 300 160 Q 380 160 500 160" markerEnd="url(#arrowOP)"/>
              <path className="sch-line" d="M 300 160 Q 380 260 500 260" markerEnd="url(#arrowOP)"/>
            </svg>

            <div className="sch-orb">
              <div className="sch-ring r2"></div>
              <div className="sch-ring r1"></div>
              <div className="sch-orb-core">
                <span className="corename">CONTEXT ENGINE</span>
                <span className="coreval">v2.4</span>
                <span style={{fontSize:10, color:'var(--text-muted)', letterSpacing:'0.15em', textTransform:'uppercase', marginTop:4}}>auto · 24/7</span>
              </div>
            </div>

            <div className="sch-flow-label" style={{left:'50%', top:8, transform:'translateX(-50%)'}}>ROUTE</div>
            <div className="sch-flow-label" style={{left:'50%', bottom:8, transform:'translateX(-50%)', borderColor:'rgb(0 212 184 / 0.3)', color:'rgb(0 212 184)'}}>DELIVER</div>
          </div>

          <div className="sch-side">
            <div className="ovl" style={{marginBottom:8, color:'rgb(0 212 184)'}}>▸ DELIVERABLE</div>
            <div className="sch-node" style={{borderColor:'rgb(0 212 184 / 0.3)'}}>
              <strong>The actual thing</strong>
              .pdf · .xlsx · campaign · code
            </div>
            <div className="sch-node" style={{borderColor:'rgb(0 212 184 / 0.3)'}}>
              <strong>Audit trail</strong>
              every source, every step
            </div>
            <div className="sch-node" style={{borderColor:'rgb(0 212 184 / 0.3)'}}>
              <strong>Reply-to-refine</strong>
              iterate by replying. no UI.
            </div>
          </div>
        </div>
      </section>

      <section style={{padding:'60px 56px', borderTop:'1px solid var(--border)'}}>
        <div className="ovl cyan" style={{marginBottom:24}}>· 04 / Under the hood</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
          <div className="glass-card" style={{padding:24}}>
            <div className="ovl cyan">CONTEXT</div>
            <h3 style={{fontSize:20, fontWeight:600, margin:'12px 0 8px'}}>You don't engineer it.</h3>
            <p style={{fontSize:13, color:'var(--text-muted)', margin:0}}>The engine reads your CRM, drive, calendar, prior threads — the right context, automatically, every time.</p>
          </div>
          <div className="glass-card" style={{padding:24}}>
            <div className="ovl cyan">MODELS</div>
            <h3 style={{fontSize:20, fontWeight:600, margin:'12px 0 8px'}}>You don't pick one.</h3>
            <p style={{fontSize:13, color:'var(--text-muted)', margin:0}}>Model-agnostic routing — Claude, GPT, Gemini, open-weights. The right model for each step. You see the audit trail.</p>
          </div>
          <div className="glass-card" style={{padding:24}}>
            <div className="ovl cyan">TOOLS</div>
            <h3 style={{fontSize:20, fontWeight:600, margin:'12px 0 8px'}}>You don't wire them.</h3>
            <p style={{fontSize:13, color:'var(--text-muted)', margin:0}}>5,400+ structured skills. Browser, code, search, sheets, design. The agent picks what it needs and runs.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---- B · A REAL RUN (thread) --------------------------------
function ThreadB() {
  return (
    <div className="dirB">
      <section className="thread">
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:48}}>
          <div>
            <div className="ovl cyan">· 05 / A real run</div>
            <h2 className="section-h2" style={{marginTop:12}}>Tuesday, 09:14<span className="accent">.</span></h2>
          </div>
          <div className="ovl">EMAIL · 1 PROMPT · 1 OUTPUT</div>
        </div>

        <div className="thread-rail"></div>

        <div className="thread-row">
          <div className="thread-marker">YOU</div>
          <div className="thread-msg">
            <div className="thread-meta">TUE 09:14 · YOU → AGENT@AAAS.NAME</div>
            <div className="thread-text">
              "Please deliver me a list of 50 relevant leads for our new
              vertical — mid-market SaaS RevOps in EMEA, last funded 12-24mo ago,
              with at least one ops hire in the last quarter."
            </div>
          </div>
          <div></div>
        </div>

        <div className="thread-row agent">
          <div className="thread-marker">AGT</div>
          <div className="thread-msg">
            <div className="thread-meta" style={{color:'rgb(0 243 255)'}}>TUE 09:14 · CONTEXT ASSEMBLY</div>
            <div className="thread-text">
              <span style={{fontFamily:'var(--font-jetbrains)', fontSize:13, color:'var(--text-muted)'}}>
                [ctx] Reading your CRM schema (Hubspot, 12k contacts)<br/>
                [ctx] Pulling EMEA SaaS funding data (Crunchbase, 2024–2026)<br/>
                [skl] Loaded 3 skills: lead-research, icp-match, csv-export<br/>
                [agt] Spawning research-agent · est. 14h
              </span>
            </div>
          </div>
          <div></div>
        </div>

        <div className="thread-row agent">
          <div className="thread-marker">DEL</div>
          <div className="thread-msg">
            <div className="thread-meta" style={{color:'rgb(0 212 184)'}}>WED 03:48 · DELIVERED</div>
            <div className="thread-text">
              "Done. 50 leads attached, scored 0–100 against your ICP. Top 12 pre-warmed
              with personalized opener drafts. Full sourcing trail in sheet 2."
            </div>
          </div>
          <div className="thread-deliverable">
            <div className="ovl" style={{color:'rgb(0 212 184)', marginBottom:10}}>▸ DELIVERABLE</div>
            <div style={{fontSize:13, fontWeight:600, marginBottom:12}}>leads-emea-revops.xlsx</div>
            <div style={{fontFamily:'var(--font-jetbrains)', fontSize:11, color:'var(--text-muted)', lineHeight:1.7}}>
              50 rows · 12 cols<br/>
              Avg ICP score: 78<br/>
              4.2MB · verified
            </div>
          </div>
        </div>

        <div className="thread-row">
          <div className="thread-marker">YOU</div>
          <div className="thread-msg">
            <div className="thread-meta">WED 09:02 · REPLY-TO-REFINE</div>
            <div className="thread-text" style={{color:'var(--text-muted)'}}>
              "Top 12 look great. Drop the ones in DACH (we already cover that).
              Send me a campaign for the rest by Friday."
            </div>
          </div>
          <div></div>
        </div>
      </section>

      <section style={{padding:'80px 56px', borderTop:'1px solid var(--border)', textAlign:'center'}}>
        <h2 className="section-h2">
          Quality &gt; speed<span className="accent">.</span>
        </h2>
        <p className="hero-sub" style={{margin:'24px auto 0', textAlign:'center'}}>
          We're not a chatbot racing for the first token. We're a colleague
          who sleeps on it, reviews their own work, and ships you the finished thing.
        </p>
      </section>
    </div>
  );
}

// ---- C · SEND ANYTHING (bento) ------------------------------
function BentoC() {
  return (
    <div className="dirC">
      <section className="usecase-strip">
        <div className="strip-head">
          <div>
            <div className="ovl cyan" style={{marginBottom:12}}>· 06 / Real requests, real outputs</div>
            <h2 className="section-h2">Send anything<span className="accent">.</span></h2>
          </div>
          <div className="ovl">EVERY TILE = ONE EMAIL → ONE DELIVERABLE</div>
        </div>

        <div className="usecase-grid">
          <div className="uc-tile feat">
            <div>
              <div className="uc-prompt">"A/B test my new pricing page this week."</div>
              <h3 className="uc-title">Run a real experiment.<br/>Ship the winner.</h3>
            </div>
            <div>
              <div style={{display:'flex', alignItems:'end', gap:8, height:120, marginBottom:24, opacity:0.85}}>
                {[40,55,48,72,68,82,76,91,88,95].map((h,i) => (
                  <div key={i} style={{
                    flex:1,
                    height:`${h}%`,
                    background: i>5 ? 'rgb(0 243 255)' : 'rgba(255,255,255,0.15)',
                    borderRadius:4,
                  }}></div>
                ))}
              </div>
              <div className="uc-deliv">DELIVERED · ab-test.pdf · 18h</div>
            </div>
          </div>

          <div className="uc-tile">
            <div>
              <div className="uc-prompt">"50 relevant leads, mid-market SaaS EMEA."</div>
              <h3 className="uc-title">Qualified pipeline.</h3>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-jetbrains)', fontSize:10, color:'var(--text-muted)', lineHeight:1.9, marginBottom:16}}>
                01 · acme.io · 92<br/>
                02 · north.co · 88<br/>
                03 · vault.app · 85<br/>
                04 · ribbon.dev · 81<br/>
                <span style={{opacity:0.4}}>+ 46 more</span>
              </div>
              <div className="uc-deliv">leads.xlsx · 50 rows</div>
            </div>
          </div>

          <div className="uc-tile">
            <div>
              <div className="uc-prompt">"Spy on my competitor. Make a campaign."</div>
              <h3 className="uc-title">Competitive intel + outbound, in one.</h3>
            </div>
            <div className="uc-deliv">campaign-brief.pdf · 22h</div>
          </div>

          <div className="uc-tile">
            <div>
              <div className="uc-prompt">"Audit our last 30 cold emails. What's broken?"</div>
              <h3 className="uc-title">Honest QA on your sales motion.</h3>
            </div>
            <div className="uc-deliv">audit-report.md · 6h</div>
          </div>

          <div className="uc-tile">
            <div>
              <div className="uc-prompt">"Re-engage Q3 churned accounts."</div>
              <h3 className="uc-title">A win-back sequence, fully drafted.</h3>
            </div>
            <div className="uc-deliv">winback-seq.json · 14h</div>
          </div>
        </div>
      </section>

      <section style={{padding:'80px 56px', borderTop:'1px solid var(--border)'}}>
        <div className="ovl cyan" style={{marginBottom:16}}>· 07 / Why aaas.name</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32, marginTop:24}}>
          <div>
            <div style={{fontSize:48, fontWeight:900, letterSpacing:'-0.04em', color:'rgb(0 243 255)'}}>0</div>
            <div className="ovl" style={{marginTop:8}}>PROMPTS TO ENGINEER</div>
            <p style={{fontSize:13, color:'var(--text-muted)', marginTop:8}}>Plain English email. No system prompts, no schemas.</p>
          </div>
          <div>
            <div style={{fontSize:48, fontWeight:900, letterSpacing:'-0.04em'}}>auto</div>
            <div className="ovl" style={{marginTop:8}}>CONTEXT ENGINEERING</div>
            <p style={{fontSize:13, color:'var(--text-muted)', marginTop:8}}>The engine reads your stack. You don't curate context.</p>
          </div>
          <div>
            <div style={{fontSize:48, fontWeight:900, letterSpacing:'-0.04em', color:'rgb(244 63 108)'}}>any</div>
            <div className="ovl" style={{marginTop:8}}>FRONTIER MODEL</div>
            <p style={{fontSize:13, color:'var(--text-muted)', marginTop:8}}>Model-agnostic. We pick the best one for the job, route automatically.</p>
          </div>
          <div>
            <div style={{fontSize:48, fontWeight:900, letterSpacing:'-0.04em', color:'rgb(0 212 184)'}}>quality</div>
            <div className="ovl" style={{marginTop:8}}>OVER SPEED</div>
            <p style={{fontSize:13, color:'var(--text-muted)', marginTop:8}}>Hours not seconds. Self-reviewed deliverables, not first drafts.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---- CONTEXT, LAYERED (teaser) -------------------------------
function ContextTeaser() {
  return (
    <div style={{borderTop:'1px solid var(--border)'}}>
      <section className="ctx-module sec-aura">
        <div className="ctx-head">
          <div className="ovl cyan">· 02 / Context, layered</div>
          <h2 className="section-h2">One context.<br/>Two accounts<span className="accent">.</span></h2>
          <p>Every request starts with what the system already knows about you — and, when it needs to, your team.</p>
        </div>
        <ContextOrbit size="sm"/>
        <div className="ctx-cols" style={{marginTop:56}}>
          <div className="ctx-card glass-card">
            <div className="ovl red">· .NAME</div>
            <h4>Your personal context</h4>
            <p>What it knows about how you write, decide, and work. You're here.</p>
            <a className="ctx-link" href="context.html">How context works →</a>
          </div>
          <div className="ctx-card glass-card">
            <div className="ovl cyan">· .SELECT</div>
            <h4>The agent that acts</h4>
            <p>Reads your context, picks the right tools, sends back a finished deliverable.</p>
            <a className="ctx-link" href="https://aaas.select" target="_blank" rel="noopener">Explore aaas.select →</a>
          </div>
          <div className="ctx-card glass-card">
            <div className="ovl" style={{color:'rgb(0 212 184)'}}>· .COMPANY</div>
            <h4>Your team's context</h4>
            <p>Every teammate's .name, combined into one org-level account.</p>
            <a className="ctx-link" href="https://aaas.company" target="_blank" rel="noopener">Explore aaas.company →</a>
          </div>
        </div>
        <div style={{textAlign:'center', marginTop:44}}>
          <a href="context.html" className="ctx-module-link">How the full context stack works →</a>
        </div>
      </section>
    </div>
  );
}

function OnePager() {
  return (
    <div className="wf-page onepager">
      <SiteNav />
      <BannerA />
      <ContextTeaser />
      <EngineD />
      <ThreadB />
      <BentoC />

      <section className="cta-band op-final-cta">
        <div className="ovl cyan" style={{marginBottom:20}}>· START</div>
        <h2 className="section-h2">Asking is easier than managing<span className="accent">.</span></h2>
        <p>No setup. No prompt-tuning. Send your first task in 2 min.</p>
        <div className="ctas">
          <button className="btn-primary">Email your first agent →</button>
          <button className="btn-outline">See how it works</button>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
}

window.OnePager = OnePager;