/* Productivity suite, Privacy, Testimonial, What's next, FAQ, Final CTA, Footer */

const Suite = () => {
  const [prompt, setPrompt] = React.useState(0);
  const prompts = [
    "Generate a Q3 board deck from the Finance pod.",
    "Build a 3-year financial forecast from these invoices.",
    "Draft a marketing one-pager for our new tax service.",
    "Turn this pipeline into an investor update deck."
  ];
  React.useEffect(() => {
    const id = setInterval(() => setPrompt(p => (p+1) % prompts.length), 3000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="suite">
      <div className="container">
        <div className="suite-header">
          <div>
            <span className="eyebrow" style={{color:'var(--accent-ink)'}}>
              <span className="dot"/> Productivity suite · coming soon
            </span>
            <h2 style={{marginTop:12, maxWidth:'20ch'}}>
              Generate the <span className="italic-serif hl-accent">deliverable</span>, not just the answer.
            </h2>
            <p className="lede" style={{marginTop:20, color:'var(--muted)', maxWidth:'55ch'}}>
              Board decks. Quarterly reports. Financial models. Marketing collateral. Landing pages.
              All generated from your firm's own knowledge — on your brand, on your templates, reusable
              across every seat.
            </p>
          </div>
          <div className="suite-tag-big">
            <span className="suite-tag-dot"/>
            <div>
              <div className="suite-tag-label">Coming</div>
              <div className="suite-tag-when">Q4 · 2026</div>
            </div>
          </div>
        </div>

        {/* Hero prompt bar */}
        <div className="suite-prompt">
          <div className="suite-prompt-caret">▸</div>
          <div className="suite-prompt-text" key={prompt}>{prompts[prompt]}</div>
          <div className="suite-prompt-cta">Generate <span className="arrow">→</span></div>
        </div>

        <div className="suite-orchestrated">
          <div className="suite-orch-dot"/>
          <div>
            We've already <strong>orchestrated the right AI models end-to-end</strong> to produce polished, on-brand marketing decks, board reports, financial models, and campaign collateral. Not a single-model wrapper — a pipeline that knows which model does research, which one drafts, which one designs, and which one QAs.
          </div>
        </div>

        {/* Output cards */}
        <div className="suite-grid-v2">
          {/* Big deck slide preview */}
          <div className="suite-card-v2 hero-card">
            <div className="suite-card-head">
              <span className="type">Board deck · 18 slides · on-brand</span>
              <span className="pill">Orchestrated pipeline</span>
            </div>
            <div className="mock-slide">
              <div className="mock-slide-brand">
                <span className="mock-slide-logo"/>
                <span>Acme Advisory · Board pack</span>
                <span className="mock-slide-brand-page">03 / 18</span>
              </div>

              <div className="mock-slide-hero">
                <div className="mock-slide-eyebrow">Q3 2026 · Executive Summary</div>
                <div className="mock-slide-title">
                  Revenue up <span className="hl-accent italic-serif">14%</span>,<br/>
                  margin held at <span className="hl-accent italic-serif">62%</span>.
                </div>
                <div className="mock-slide-sub">Two new engagements landed. Vendor D price pressure flagged for FY27 planning.</div>
              </div>

              <div className="mock-slide-kpis">
                <div className="mkpi">
                  <div className="mkpi-l">Q3 revenue</div>
                  <div className="mkpi-v">$2.4M</div>
                  <div className="mkpi-delta"><span className="pos">▲ 14%</span> QoQ</div>
                </div>
                <div className="mkpi">
                  <div className="mkpi-l">SLA compliance</div>
                  <div className="mkpi-v">87%</div>
                  <div className="mkpi-delta"><span className="pos">▲ 3pts</span> QoQ</div>
                </div>
                <div className="mkpi">
                  <div className="mkpi-l">Open actions</div>
                  <div className="mkpi-v">12</div>
                  <div className="mkpi-delta"><span className="neg">▲ 4</span> new</div>
                </div>
                <div className="mkpi">
                  <div className="mkpi-l">Pipeline</div>
                  <div className="mkpi-v">$8.1M</div>
                  <div className="mkpi-delta"><span className="pos">▲ 22%</span> QoQ</div>
                </div>
              </div>

              <div className="mock-slide-chart">
                <div className="msc-head">
                  <span>Revenue trend · monthly</span>
                  <span className="mono muted">FY26 to date</span>
                </div>
                <div className="msc-bars">
                  {[40,55,70,60,85,72,90,80].map((h, i) => (
                    <div key={i} className="msc-bar" style={{height:`${h}%`, animationDelay:`${i*60}ms`}}/>
                  ))}
                </div>
                <div className="msc-axis"><span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span></div>
              </div>

              <div className="mock-slide-foot">
                <div className="mock-slide-cites">
                  <span className="cite">47 invoices</span>
                  <span className="cite">Finance pod</span>
                  <span className="cite">SLA log</span>
                  <span className="cite">HR actions</span>
                </div>
                <div className="mono muted" style={{fontSize:9, letterSpacing:'0.08em'}}>ACME · CONFIDENTIAL</div>
              </div>
            </div>
          </div>

          {/* Financial model */}
          <div className="suite-card-v2">
            <div className="suite-card-head">
              <span className="type">Financial model</span>
              <span className="pill">Excel · formulas preserved</span>
            </div>
            <h4>3-year forecast, cited assumptions.</h4>
            <div className="mock-excel-v2">
              <div className="tab-bar">
                <span className="tab on">Forecast</span>
                <span className="tab">Assumptions</span>
                <span className="tab">Sensitivity</span>
              </div>
              <div className="ex-grid">
                <div className="ex-hcell"></div><div className="ex-hcell">2024</div><div className="ex-hcell">2025</div><div className="ex-hcell hl">2026e</div>
                <div className="ex-cell b">Revenue</div><div className="ex-cell">$8.2M</div><div className="ex-cell">$10.4M</div><div className="ex-cell hl">$13.1M</div>
                <div className="ex-cell b">Gross margin</div><div className="ex-cell">58%</div><div className="ex-cell">61%</div><div className="ex-cell hl">63%</div>
                <div className="ex-cell b">EBITDA</div><div className="ex-cell">$1.2M</div><div className="ex-cell">$1.9M</div><div className="ex-cell hl">$2.7M</div>
                <div className="ex-cell b">Headcount</div><div className="ex-cell">42</div><div className="ex-cell">57</div><div className="ex-cell hl">71</div>
                <div className="ex-cell b">Rev/head</div><div className="ex-cell">$195K</div><div className="ex-cell">$183K</div><div className="ex-cell hl">$185K</div>
              </div>
              <div className="ex-formula"><span className="mono">D3</span> = <span className="mono hl-accent">C3 * (1 + <u>assumption.growth_2026</u>)</span></div>
            </div>
          </div>

          {/* Marketing */}
          <div className="suite-card-v2">
            <div className="suite-card-head">
              <span className="type">Marketing collateral</span>
              <span className="pill">On-brand</span>
            </div>
            <h4>Flyers, one-pagers, landing pages.</h4>
            <div className="mock-marketing">
              <div className="mm-flyer">
                <div className="mm-brand">Acme Advisory</div>
                <div className="mm-title">Tax<br/>strategy<br/>2026.</div>
                <div className="mm-cta">Book →</div>
              </div>
              <div className="mm-flyer alt">
                <div className="mm-brand light">Acme Advisory</div>
                <div className="mm-title light">Meet your<br/><span className="italic-serif">new</span> team.</div>
                <div className="mm-cta light">Learn →</div>
              </div>
              <div className="mm-flyer square">
                <div className="mm-square-title">Q3 wins.</div>
                <div className="mm-square-body">3 new engagements. 14% revenue growth.</div>
              </div>
            </div>
          </div>

          {/* Report */}
          <div className="suite-card-v2 wide">
            <div className="suite-card-head">
              <span className="type">Report · Board-ready</span>
              <span className="pill">On-template</span>
            </div>
            <h4>Quarterly reports drafted on your firm's exact template.</h4>
            <div className="mock-report-v2">
              <div className="mr-page">
                <div className="mr-brand">Acme Advisory · Confidential · Q3 2026</div>
                <div className="mr-title">Q3 Board Review</div>
                <div className="mr-h">Executive Summary</div>
                <div className="mr-p"/><div className="mr-p"/><div className="mr-p short"/>
                <div className="mr-callout">Revenue up 14.2% QoQ — driven by 2 new engagements. Cited: 47 invoices, 2 amendments.</div>
              </div>
              <div className="mr-page">
                <div className="mr-brand">Acme Advisory · Confidential · Q3 2026</div>
                <div className="mr-h">Client engagement summary</div>
                <div className="mr-p"/><div className="mr-p short"/>
                <div className="mr-chart"><div className="mrc-bar" style={{height:'60%'}}/><div className="mrc-bar" style={{height:'85%'}}/><div className="mrc-bar" style={{height:'72%'}}/><div className="mrc-bar" style={{height:'90%'}}/></div>
                <div className="mr-p"/><div className="mr-p short"/>
              </div>
              <div className="mr-page">
                <div className="mr-brand">Acme Advisory · Confidential · Q3 2026</div>
                <div className="mr-h">Risk register</div>
                <div className="mr-line"><span>Vendor D price ↑ 22%</span><span className="hl-accent">Cited</span></div>
                <div className="mr-line"><span>NDA expiry · 12 days</span><span className="hl-accent">Cited</span></div>
                <div className="mr-line"><span>GDPR Art. 28 update</span><span className="hl-accent">Cited</span></div>
                <div className="mr-line"><span>SLA compliance dip</span><span className="hl-accent">Cited</span></div>
              </div>
            </div>
          </div>
        </div>

        {/* Reusable strip */}
        <div className="suite-reuse">
          <div>
            <span className="eyebrow"><span className="dot"/> Reusable across the firm</span>
            <h3 style={{marginTop:8, fontSize:'clamp(20px, 2vw, 26px)', maxWidth:'40ch'}}>
              Every deliverable becomes a template. Templates get better every time someone uses one.
            </h3>
          </div>
          <div className="suite-reuse-tags">
            <span className="cite">Decks</span>
            <span className="cite">Reports</span>
            <span className="cite">Excel models</span>
            <span className="cite">Forecasts</span>
            <span className="cite">Flyers</span>
            <span className="cite">Landing pages</span>
            <span className="cite">Investor updates</span>
            <span className="cite">Board reviews</span>
          </div>
        </div>
      </div>
    </section>
  );
};

const Privacy = () => (
  <section id="privacy" className="privacy">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"/> Sovereign · private · yours</span>
        <h2>Your data is <span className="italic-serif hl-orange">yours</span>. Full stop.</h2>
        <p>We built dFusion deliberately basic so the privacy story is easy to understand — and easy to trust. Nothing about your firm reaches a public model. Ever.</p>
      </div>
      <div className="privacy-grid">
        <div className="privacy-card">
          <div className="icon-box">◆</div>
          <h3>Never touches a public model</h3>
          <p>Your documents and queries are never sent to public LLMs, never used to train any AI model, and never leave the environment we control.</p>
        </div>
        <div className="privacy-card">
          <div className="icon-box">▣</div>
          <h3>Runs on our private cloud</h3>
          <p>Dedicated infrastructure. Frontier and open models run under our roof — not the vendors'. No third-party providers seeing your data. On-prem options for firms who need them.</p>
        </div>
        <div className="privacy-card">
          <div className="icon-box">◈</div>
          <h3>Walled off by pod, by user</h3>
          <p>Each pod is isolated. Cross-contamination between clients or departments is impossible by design. Every access, every query, every model call — logged.</p>
        </div>
      </div>
    </div>
  </section>
);

const Testimonial = () => (
  <section className="testimonial">
    <div className="container">
      <div className="testimonial-grid">
        <div className="testimonial-left">
          <span className="eyebrow"><span className="dot"/> In practice</span>
          <div className="testimonial-mark">"</div>
          <div className="testimonial-attr">
            <strong>Partner</strong><br/>
            Top-10 Global Accounting Firm
          </div>
          <div className="testimonial-note">Anonymized at customer's request</div>
        </div>
        <div className="quote">
          We stopped waiting on month-end reports. I ask a question in the morning meeting, and the chart is on screen before it ends <span className="hl-accent italic-serif">— built from contracts and documents our old BI tools couldn't even read.</span>
        </div>
      </div>
    </div>
  </section>
);

const Deployment = () => (
  <section id="deployment">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow"><span className="dot"/> Deployment</span>
        <h2>Managed private cloud. <span className="italic-serif hl-accent">Or</span> under your own roof.</h2>
        <p>Two ways to deploy dFusion — pick the one that fits your firm's security posture. Both keep your data walled off from public models; both give you the full platform.</p>
      </div>
      <div className="deploy-grid">
        <div className="deploy-card">
          <div className="deploy-tag">Standard</div>
          <h3>Managed private cloud</h3>
          <p>Dedicated infrastructure we run for your firm. Live in 48 hours. Your data never leaves the environment we control — never sent to a public model, never used for training.</p>
          <ul className="deploy-list">
            <li>Provisioned and ready in 2 days</li>
            <li>All frontier + open models available</li>
            <li>Auto-updated as new models ship</li>
            <li>SOC 2, GDPR, ISO-ready</li>
          </ul>
          <a href="https://meet.brevo.com/roger-ying" target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{marginTop:'auto'}}>Book a 20-min demo <span className="arrow">→</span></a>
        </div>
        <div className="deploy-card alt">
          <div className="deploy-tag alt">On-premise</div>
          <h3>Under your own roof</h3>
          <p>The full platform, deployed on your own hardware. For firms with strict data-residency, air-gap, or regulatory requirements. Configuration is bespoke — we scope it with you.</p>
          <ul className="deploy-list">
            <li>Your hardware, your network, your rules</li>
            <li>Air-gap options for the most sensitive pods</li>
            <li>Bring your own on-prem model, or use ours</li>
            <li>White-glove deployment &amp; support</li>
          </ul>
          <a href="mailto:service@dfusion.ai" className="btn btn-accent" style={{marginTop:'auto'}}>Contact us to discuss <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  </section>
);

const FAQ_ITEMS = [
  { q:'Does our data train your models?', a:'No. Ever. Your documents and queries are isolated to your hub and are never used to train any AI model — ours or anyone else\'s.' },
  { q:'Which AI models power it?', a:'Every frontier and leading open model — GPT-5, Claude Opus, Gemini Ultra, Llama, Mistral, DeepSeek, and more — deployed on our private cloud. dFusion routes each task to the best model automatically, with your firm\'s governance and cost ceilings.' },
  { q:'What if a better model ships tomorrow?', a:'You already have it. We continuously evaluate, benchmark and onboard new models — including specialized and open-weight ones. Your firm\'s context and governance travel with every model. No re-integration.' },
  { q:'How fast can we be live?', a:'Two days. The Standard plan is provisioned and ready to use within 48 hours of signing.' },
  { q:'What if someone leaves the company?', a:'Their access is revoked immediately by the pod admin or your hub administrator. Their past queries remain in the audit log.' },
  { q:'Can we control who sees what?', a:'Yes. Permissions are pod-level. Pod owners grant Admin, Editor, or Viewer access — knowledge base by knowledge base — and every dashboard, signal, and query respects them automatically.' },
  { q:'Do we need structured data or a data warehouse?', a:'No. dFusion works directly on unstructured data — contracts, PDFs, decks, emails, spreadsheets. The AI extracts, structures, and visualizes it on the fly, in real time.' },
  { q:'Can different stakeholders see different dashboards?', a:'Yes. Dashboards respect pod-level permissions, so each stakeholder — from team lead to board — sees intelligence built only from the data they\'re allowed to access.' },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"/> Common questions</span>
          <h2>Yes, we've been <span className="italic-serif hl-accent">asked</span>.</h2>
        </div>
        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section id="demo" className="final">
    <div className="container">
      <span className="eyebrow"><span className="dot"/> Book a demo</span>
      <h2 style={{marginTop:16}}>See your firm's own knowledge <span className="highlight">come alive</span>.</h2>
      <p className="lede" style={{marginTop:24}}>
        20 minutes. We'll walk through the platform with a sample pod, show your team routing across
        frontier models, and scope a deployment. Live in 48 hours.
      </p>
      <div className="final-ctas">
        <a href="#" className="btn btn-primary" style={{fontSize:15, padding:'14px 24px'}}>Book a 20-min demo <span className="arrow">→</span></a>
        <a href="#" className="btn btn-ghost" style={{fontSize:15, padding:'14px 24px'}}>Talk to us about partnering</a>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="container">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="/ab/assets/logo.svg" alt="dFusion"/>
          <p>Sovereign AI for your firm. Every model under one roof. Your context, your governance, your data.</p>
        </div>
        <div className="footer-col">
          <h5>Platform</h5>
          <a href="#platform">How it works</a>
          <a href="#models">Model landscape</a>
          <a href="#suite">Productivity suite</a>
          <a href="#privacy">Private &amp; secure</a>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <a href="#">About dFusion</a>
          <a href="#">Design partners</a>
          <a href="#">Contact</a>
        </div>
        <div className="footer-col">
          <h5>Legal</h5>
          <a href="#">Privacy policy</a>
          <a href="#">Terms of service</a>
          <a href="#">Security</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 dFusion. All rights reserved.</span>
        <span>Basic, private, simple. On purpose.</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Suite, Privacy, Testimonial, Deployment, FAQ, FinalCTA, Footer });