/* Nav, Hero, Trust, Model landscape, Router, Context — sections 1-6 */

const Nav = ({ onDemoClick }) => (
  <div className="nav">
    <div className="container nav-inner">
      <a href="#" className="nav-logo">
        <img src="/ab/assets/logo.svg" alt="dFusion" />
        <span className="tag">Enterprise</span>
      </a>
      <div className="nav-links">
        <a href="#platform">Platform</a>
        <a href="#models">Models</a>
        <a href="#suite">Suite</a>
        <a href="#privacy">Private &amp; secure</a>
        <a href="#faq">FAQ</a>
        <button className="btn btn-primary" onClick={onDemoClick}>Book a demo <span className="arrow">→</span></button>
      </div>
    </div>
  </div>
);

const Hero = () => (
  <section className="hero">
    <div className="container">
      <div className="hero-badge">
        <span className="pill">New</span>
        <span>Sovereign AI · Model-agnostic · Live in 2 days</span>
      </div>
      <h1 className="hero-title">
        Your <span className="accent-word">sovereign</span> AI.<br/>
        Every model, <span className="accent-word">one</span> context.
      </h1>
      <p className="hero-sub">
        A private AI intranet for your firm. Learn, collaborate, share, and get work done across
        every frontier model — with your data, your context, and your governance. Nothing ever
        reaches a public model.
      </p>
      <div className="hero-ctas">
        <a href="#demo" className="btn btn-primary">Book a 20-min demo <span className="arrow">→</span></a>
        <a href="#platform" className="btn btn-ghost">See the platform</a>
      </div>
      <div className="hero-meta">
        <div><svg className="icon" viewBox="0 0 16 16" fill="none"><path d="M8 1L2 4v4c0 3.5 2.5 6.5 6 7 3.5-.5 6-3.5 6-7V4L8 1z" stroke="currentColor" strokeWidth="1.5"/></svg> Never shared with foundational models</div>
        <div><svg className="icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.5"/><path d="M8 5v3l2 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg> Live in 2 days</div>
        <div><svg className="icon" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.5"/><path d="M2 7h12M6 4V2M10 4V2" stroke="currentColor" strokeWidth="1.5"/></svg> hub.yourcompany.com</div>
      </div>

      <HeroVisual />
    </div>
  </section>
);

const HeroVisual = () => (
  <div className="hero-visual">
    <div className="hero-visual-header">
      <div className="dots"><span/><span/><span/></div>
      <span>hub.yourcompany.com</span>
      <span>Live · Private</span>
    </div>
    <div className="hero-visual-body">
      <div className="hero-pods">
        <div className="hero-pods-title">Knowledge Pods</div>
        <div className="hero-pod active"><span className="swatch"/> Client: Acme Co.</div>
        <div className="hero-pod"><span className="swatch" style={{background:'#2A2925'}}/> Client: Borealis Ltd.</div>
        <div className="hero-pod"><span className="swatch" style={{background:'#6B6862'}}/> Tax Advisory</div>
        <div className="hero-pod"><span className="swatch" style={{background:'#98938A'}}/> HR Policies</div>
        <div className="hero-pod"><span className="swatch" style={{background:'#b06614'}}/> Finance &amp; Audit</div>
        <div className="hero-pod"><span className="swatch" style={{background:'#4F46E5', opacity:0.6}}/> Legal Templates</div>
      </div>
      <div className="hero-canvas">
        <div className="hero-prompt">
          <span className="caret">▸</span>
          <span>Compare Acme Co. and Borealis Ltd. revenue across two pods, by quarter.</span>
        </div>
        <div className="hero-answer">
          <div className="hero-answer-meta">Built from 47 invoices + 2 contract amendments · routed via best-available model</div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8}}>
            <div>
              <div style={{fontSize:14, fontWeight:500}}>Revenue by quarter</div>
              <div className="hero-chart-legend">
                <span><i className="legend-swatch acme"/>Acme Co.</span>
                <span><i className="legend-swatch borealis"/>Borealis Ltd.</span>
              </div>
            </div>
            <span className="pill live">Live</span>
          </div>
          <div className="hero-chart" id="revenue-chart">
            {[
              { quarter: 'Q1', acme: 1.24, borealis: 1.08 },
              { quarter: 'Q2', acme: 1.46, borealis: 1.31 },
              { quarter: 'Q3', acme: 1.68, borealis: 1.57 },
              { quarter: 'Q4', acme: 1.91, borealis: 1.78 },
            ].map(({ quarter, acme, borealis }) => (
              <div key={quarter} className="group">
                <div className="bars">
                  <div className="bar-column">
                    <span className="bar-value">${acme.toFixed(2)}m</span>
                    <div className="bar a" style={{height: `${Math.round(acme * 48)}px`}} title={`Acme Co. ${quarter}: $${acme.toFixed(2)}m`}/>
                  </div>
                  <div className="bar-column">
                    <span className="bar-value">${borealis.toFixed(2)}m</span>
                    <div className="bar b" style={{height: `${Math.round(borealis * 48)}px`}} title={`Borealis Ltd. ${quarter}: $${borealis.toFixed(2)}m`}/>
                  </div>
                </div>
                <div className="label">{quarter}</div>
              </div>
            ))}
          </div>
          <div className="hero-cites">
            <span className="cite">47 invoices</span>
            <span className="cite">2 amendments</span>
            <span className="cite">2 pods</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const Trust = () => (
  <div className="trust">
    <div className="container trust-inner">
      <span className="trust-label">Trusted by</span>
      <div className="trust-orgs">
        <span>Top-10 Global Accounting Firm</span>
        <span>Professional Services</span>
        <span>Mid-Market Finance</span>
        <span>Legal &amp; Advisory</span>
      </div>
    </div>
  </div>
);

// Model landscape — the models keep moving
const MODELS = [
  { name: 'Grok 5', ver: 'realtime', isNew: true },
  { name: 'GLM 5.2', ver: 'agentic', isNew: true },
  { name: 'DeepSeek 4', ver: 'reasoning', isNew: true },
  { name: 'GPT-5', ver: 'frontier' },
  { name: 'Claude Opus 4.5', ver: 'reasoning' },
  { name: 'Gemini Ultra 2.5', ver: 'multimodal' },
  { name: 'Qwen 3 Max', ver: 'open-weights' },
  { name: 'Kimi K2', ver: 'long-context' },
  { name: 'Llama 4 Maverick', ver: 'open-weights' },
  { name: 'Mistral Large 3', ver: 'efficient' },
  { name: 'Nova Premier', ver: 'multimodal' },
  { name: 'Command A', ver: 'enterprise' },
];

const ModelLandscape = () => (
  <section id="models">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"/> The model landscape</span>
        <h2>Models keep breaking through.<br/><span className="italic-serif hl-accent">Don't marry one.</span></h2>
        <p>
          Every quarter, a new frontier: faster reasoning, cheaper inference, better multimodality.
          Betting your firm on a single model is a strategy with a shrinking half-life.
        </p>
      </div>

      <div className="model-scroll" aria-hidden="true">
        <div className="model-track">
          {[...MODELS, ...MODELS].map((m, i) => (
            <div key={i} className={`model-chip ${m.isNew ? 'new' : ''}`}>
              <span className="m-dot"/>
              <span>{m.name}</span>
              <span className="m-ver">{m.ver}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="landscape-cols">
        <div>
          <div className="eyebrow" style={{marginBottom:12}}><span className="dot"/> The dFusion answer</div>
          <h3 style={{fontSize:'clamp(24px, 2.6vw, 34px)', fontWeight:500, letterSpacing:'-0.025em', marginBottom:16}}>
            Our AI harness picks the right model for every task — automatically.
          </h3>
          <p style={{color:'var(--muted)', fontSize:16, marginBottom:16}}>
            dFusion runs its own context and routing layer on top of every frontier and leading open
            model. Ask a question — we route to the best model for that specific task, at the right
            price, under your governance. You get supercharged intelligence out of the box.
          </p>
          <p style={{color:'var(--muted)', fontSize:16, marginBottom:24}}>
            Want to force a specific model? Do it. Want to plug in your own private or on-prem
            model? That's supported too. Your firm, your rules.
          </p>
          <div style={{display:'flex', gap:16, flexWrap:'wrap', marginBottom:24}}>
            <div style={{display:'flex', gap:8, alignItems:'center', fontSize:13, color:'var(--ink-2)'}}>
              <span style={{width:8, height:8, borderRadius:2, background:'var(--accent)'}}/> Auto-routed by default
            </div>
            <div style={{display:'flex', gap:8, alignItems:'center', fontSize:13, color:'var(--ink-2)'}}>
              <span style={{width:8, height:8, borderRadius:2, background:'var(--ink)'}}/> Override per query
            </div>
            <div style={{display:'flex', gap:8, alignItems:'center', fontSize:13, color:'var(--ink-2)'}}>
              <span style={{width:8, height:8, borderRadius:2, background:'#6B6862'}}/> Bring your own model
            </div>
          </div>
        </div>

        <Router />
      </div>
    </div>
  </section>
);

const Router = () => (
  <div className="router">
    <div className="router-title">Auto-routed by dFusion · your control plane</div>
    <div className="router-flow">
      <div className="router-col">
        <div className="router-chip">Reasoning task <span className="k">→ Opus</span></div>
        <div className="router-chip">Long-context <span className="k">→ Gemini</span></div>
        <div className="router-chip">Batch OCR <span className="k">→ Nova</span></div>
        <div className="router-chip">Cheap classify <span className="k">→ Phi-4</span></div>
        <div className="router-chip" style={{background:'var(--accent-tint)', borderColor:'var(--accent-soft)'}}>
          Sensitive data <span className="k">→ Your model</span>
        </div>
      </div>
      <div className="router-hub">d</div>
      <div className="router-col">
        <div className="router-chip"><span>Your firm's context</span></div>
        <div className="router-chip"><span>Your governance</span></div>
        <div className="router-chip"><span>Your data policies</span></div>
        <div className="router-chip"><span>Your cost ceiling</span></div>
        <div className="router-chip"><span>Your audit log</span></div>
      </div>
    </div>
  </div>
);

const CollaborativeAI = () => (
  <section>
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"/> Collaborative AI for your firm</span>
        <h2>Like a <span className="italic-serif hl-accent">shared ChatGPT</span> for your organization — with governance.</h2>
        <p>
          Memory of each user and each knowledge pod is shared across the firm, under permissions
          you control. See what your colleagues are asking. Reuse their best prompts. Skip the query
          you already paid for. Every seat in the firm gets smarter together.
        </p>
      </div>

      <div className="collab-grid">
        <div className="collab-visual">
          <div className="widget-head">
            <span>hub.yourcompany.com / firm feed</span>
            <span className="pill live">Live</span>
          </div>
          <div className="collab-feed">
            <div className="collab-item">
              <div className="collab-avatar" style={{background:'#FB9C2D'}}>MC</div>
              <div className="collab-body">
                <div className="collab-header">
                  <span className="collab-name">Maria C.</span>
                  <span className="collab-role">Partner · Tax</span>
                  <span className="collab-time">2m ago</span>
                </div>
                <div className="collab-q">"Summarize the tax exposure across the top-10 client engagements this quarter."</div>
                <div className="collab-meta">
                  <span className="cite">Answered in 4s</span>
                  <span className="cite">Cited 12 docs</span>
                  <span className="cite" style={{color:'var(--accent-ink)', borderColor:'var(--accent-soft)', background:'var(--accent-tint)'}}>Reused 3× today</span>
                </div>
              </div>
            </div>
            <div className="collab-item">
              <div className="collab-avatar" style={{background:'#2A2925'}}>JT</div>
              <div className="collab-body">
                <div className="collab-header">
                  <span className="collab-name">James T.</span>
                  <span className="collab-role">Sr. Manager · Audit</span>
                  <span className="collab-time">14m ago</span>
                </div>
                <div className="collab-q">"Which clauses in the Acme MSA changed vs the previous version?"</div>
                <div className="collab-meta">
                  <span className="cite">Saved as template</span>
                  <span className="cite">Shared to Legal pod</span>
                </div>
              </div>
            </div>
            <div className="collab-item">
              <div className="collab-avatar" style={{background:'#6B6862'}}>AP</div>
              <div className="collab-body">
                <div className="collab-header">
                  <span className="collab-name">Amara P.</span>
                  <span className="collab-role">Analyst · Finance</span>
                  <span className="collab-time">1h ago</span>
                </div>
                <div className="collab-q">"Build a Q4 forecast from last year's engagement pipeline plus signed LOIs."</div>
                <div className="collab-meta">
                  <span className="cite">Answered from Maria's earlier query</span>
                  <span className="cite" style={{color:'#14a35a', borderColor:'#c6ecd4', background:'#eaf8ee'}}>0 new credits</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="collab-cards">
          <div className="context-card">
            <span className="num">01 · Shared memory</span>
            <h3>Every user's context, every pod's knowledge — available to the firm</h3>
            <p>Memory is scoped to each user, each pod, and each team. Share across boundaries you choose. The firm builds a compounding intelligence graph, not fragmented silos.</p>
          </div>
          <div className="context-card">
            <span className="num">02 · Reusable answers</span>
            <h3>Stop paying twice for the same query</h3>
            <p>If a colleague already asked it, the answer is right there — cited, dated, permissioned. No repeated AI credits for the same work. Firm-wide leverage on every dollar spent.</p>
          </div>
          <div className="context-card">
            <span className="num">03 · Governed sharing</span>
            <h3>Admin, Editor, Viewer — for every seat</h3>
            <p>Who can see whose history, which prompts get published to the firm library, what stays private. Pod owners set the rules. Every access is logged.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Nav, Hero, Trust, ModelLandscape, CollaborativeAI });