/* eslint-disable */
// Trust strip, Stat band (scrolling huge numbers), Quote band, Capabilities, Marquee

function TrustStrip() {
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-inner">
          <div className="trust-label">▌Trusted by mid-market operators in</div>
          <div className="trust-logos">
            <span className="lg">Roofing.</span>
            <span className="lg">Restoration.</span>
            <span className="lg">HVAC.</span>
            <span className="lg">Med-spas.</span>
            <span className="lg">Law.</span>
            <span className="lg">Manufacturing.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Massive scrolling number band */
function StatBand() {
  const stats = [
    { n: "12s",   l: "Avg. response time" },
    { n: "84%",   l: "Manual admin removed" },
    { n: "3.2×",  l: "Faster proposals" },
    { n: "35%",   l: "Cold leads recovered" },
    { n: "$184K", l: "Recovered, 90 days" },
    { n: "6h/wk", l: "Per employee, back" },
  ];
  const line = (
    <>
      {stats.map((s, i) => (
        <React.Fragment key={i}>
          <span className="num"><em>{s.n}</em></span>
          <span className="lbl">{s.l}</span>
          <span className="sep">◆</span>
        </React.Fragment>
      ))}
    </>
  );
  return (
    <section className="statband" aria-hidden="true">
      <div className="statband-track">
        <span style={{display:"flex", alignItems:"center", gap:80}}>{line}</span>
        <span style={{display:"flex", alignItems:"center", gap:80}}>{line}</span>
      </div>
    </section>
  );
}

function QuoteBand() {
  return (
    <section className="quote" id="conviction">
      <div className="container">
        <Reveal>
          <div className="quote-text">
            If AI doesn't move a <span className="underline">number</span> in your business, we <em>don't build it.</em>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="quote-attr">
            <span>— AI Fusio doctrine</span>
            <span>Principle 01</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const CAPS = [
  {
    n: "01", live: "Discovery",
    h: "Tech-stack audit",
    em: "audit",
    p: "We map every workflow, software touchpoint, document, call, and customer interaction in your business — then hand back a prioritized AI roadmap with hours saved, leads recovered, and revenue influenced attached to each line.",
    pts: ["Workflow + software audit", "Customer-journey map", "Data + security review", "Productivity gap analysis", "Prioritized AI roadmap"],
    price: "from $2.5K"
  },
  {
    n: "02", live: "Build",
    h: "AI integration & blueprint",
    em: "integration",
    p: "Voice AI, CRM automation, document intelligence, internal assistants, dashboards — built phase by phase. Trained team, secure permissions, audit trails. You go live with one connected operating layer, not a stack of disconnected tools.",
    pts: ["Voice + phone agents", "CRM + sales automation", "Document intelligence", "Internal knowledge AI", "Live dashboards"],
    price: "from $10K"
  },
  {
    n: "03", live: "Managed",
    h: "Managed AI department",
    em: "department",
    p: "Monthly retainer that operates and expands your AI systems. New automations, prompt tuning, training, governance, monitoring, quarterly reviews. Your AI capability compounds every month — without you hiring a single engineer.",
    pts: ["Monthly strategy review", "Automation expansion", "Prompt + model tuning", "Employee training", "Health monitoring"],
    price: "from $1.5K/mo"
  },
];

function Capabilities() {
  return (
    <section className="caps section-pad" id="services">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>What we actually do</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Three engagements.<br/>One <em>operating layer.</em></h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              We don't sell software, hourly retainers, or feature lists. We sell <strong>three
              outcome-driven engagements</strong> — and say no to everything else.
            </p>
          </Reveal>
        </div>

        <div className="cap-grid">
          {CAPS.map((c) => (
            <Reveal key={c.n}>
              <div className="cap-card">
                <div className="head">
                  <span>Service · {c.n}</span>
                  <span className="live">{c.live}</span>
                </div>
                <h3>{c.h.split(c.em)[0]}<em>{c.em}</em>{c.h.split(c.em)[1]}</h3>
                <p>{c.p}</p>
                <ul className="pts">
                  {c.pts.map((p, j) => <li key={j}>{p}</li>)}
                </ul>
                <div className="foot">
                  <span className="price"><em>{c.price.split(" ")[1]}</em> {c.price.split(" ")[0]}</span>
                  <span className="label">Starts at</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function MarqueeBand() {
  const words = [
    "Voice AI", "CRM automation", "Document intelligence", "Internal assistants",
    "Dashboards", "Workflow design", "AI governance", "Managed AI ops"
  ];
  const line = words.map((w, i) => (
    <React.Fragment key={i}>
      <span>{w}</span>
      <span className="sep">◆</span>
    </React.Fragment>
  ));
  return (
    <section className="marquee" aria-hidden="true">
      <div className="marquee-track">
        <span style={{display:"flex", gap:56, alignItems:"center"}}>{line}</span>
        <span style={{display:"flex", gap:56, alignItems:"center"}}>{line}</span>
      </div>
    </section>
  );
}

/* AiFusio MC promo band — sits between Outcomes and Bento. The whole
   point: turn the open-source product into a lead magnet. Visitors scrolling
   the home page hit this and either click through to clone the repo (proof
   of what we build) or click through to book a consultation. */
function MissionControlBand() {
  return (
    <section className="mc-band section-pad" id="mission-control-band" style={{
      background: "linear-gradient(180deg, rgba(94,196,217,0.04), rgba(204,12,32,0.05) 70%)",
      borderTop: "1px solid rgba(94,196,217,0.12)",
      borderBottom: "1px solid rgba(204,12,32,0.12)",
    }}>
      <div className="container" style={{ maxWidth: 1100, textAlign: "center" }}>
        <Reveal>
          <Eyebrow>The platform we build for clients · Open source</Eyebrow>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ marginTop: 16 }}>
            <span style={{ color: "#5EC4D9" }}>AiFusio MC</span>
            <br/>
            <span style={{ fontWeight: 400, color: "rgba(255,255,255,0.6)", fontSize: "0.6em" }}>
              try it free — same codebase we customize for paying clients
            </span>
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p className="lede" style={{ maxWidth: 720, margin: "20px auto 28px" }}>
            Chat with persistent memory, multi-agent missions, cross-machine bridge, mobile PWA,
            400+ auto-loaded skills. MIT licensed. Runs entirely on your machine — no SaaS, no
            sign-up, no per-seat pricing. The single-user version is yours to keep. The customized
            version is what we deliver as a service.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginTop: 8 }}>
            <a href="mission-control.html" className="btn btn-red">See AiFusio MC <span className="arrow">→</span></a>
            <a href="https://github.com/reinvention18/fusio" target="_blank" rel="noopener" className="btn btn-ghost">View on GitHub</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Outcomes() {
  const cells = [
    { l: "Phones answered", num: 12,  suffix: "s",     p: "Average response time on missed calls. AI receptionist + text-back catches the lead the moment it lands." },
    { l: "Hours given back", num: 6,  suffix: "h/wk",  p: "Per employee, recovered from manual admin. Document AI, automated follow-up, CRM hygiene." },
    { l: "Leads recovered", num: 35,  suffix: "%",     p: "Of leads that previously went cold, now closing. Faster response and persistent follow-up does the work." },
    { l: "Faster proposals", num: 3.2, suffix: "×",    p: "From walk-through to signed proposal. AI drafts from photos, notes, and your pricing book." },
    { l: "Admin reduction", num: 84,  suffix: "%",     p: "Of manual data entry, eliminated. PDFs, invoices, estimates, claims handled automatically." },
    { l: "Audit ROI",       num: 1,   suffix: "× engagement", p: "Most clients see the audit pay for itself in the first implementation — usually within 90 days." },
  ];
  return (
    <section className="outcomes section-pad" id="outcomes">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>What changes</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Real numbers.<br/>From real <em>installations.</em></h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              These are the patterns we see across engagements. Your numbers will be your own —
              the audit puts hard math on what's possible for <strong>your</strong> business.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="out-grid">
            {cells.map((c, i) => {
              const isInt = Number.isInteger(c.num);
              return (
                <div className="out-cell" key={i}>
                  <div className="lbl">{c.l}</div>
                  <div className="num">
                    <AnimatedNumber
                      value={c.num}
                      format={(n) => isInt ? Math.round(n).toString() : n.toFixed(1)} />
                    <em>{c.suffix}</em>
                  </div>
                  <p>{c.p}</p>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.TrustStrip = TrustStrip;
window.StatBand = StatBand;
window.QuoteBand = QuoteBand;
window.Capabilities = Capabilities;
window.MarqueeBand = MarqueeBand;
window.Outcomes = Outcomes;