/* eslint-disable */
// How We Work, Bento (six surfaces), Founder, Industries, Workshops

const { useState: _wUS, useEffect: _wUE } = React;

const STEPS = [
  { n: "01", k: "Discover",  h: "We learn how work actually moves.", em: "actually",
    p: "Leadership interviews, workflow shadowing, software inventory, customer-journey mapping. We find where time leaks, where leads die, where the same data gets re-keyed three times.",
    meta: ["1–2 weeks", "$2.5K – $7.5K"] },
  { n: "02", k: "Design",  h: "We engineer the integration blueprint.", em: "engineer",
    p: "System architecture, tool selection, automation logic, data structure, permission model, rollout phases. A plan with numbers — not a deck of buzzwords.",
    meta: ["1–2 weeks", "$7.5K – $25K"] },
  { n: "03", k: "Build", h: "We integrate, test, and ship.", em: "ship",
    p: "Voice, CRM, documents, assistants, dashboards — built, connected, governed, launched in phases. Your data stays where it should. Your team is trained before go-live.",
    meta: ["4–12 weeks", "$10K – $250K"] },
  { n: "04", k: "Optimize",  h: "We operate it monthly with you.", em: "monthly",
    p: "Performance reviews, KPI tracking, workflow expansion, prompt tuning, new use cases, employee onboarding. Your AI department — except you don't hire it.",
    meta: ["Monthly", "$1.5K – $25K/mo"] },
];

function HowWeWork() {
  return (
    <section className="hww section-pad" id="how">
      <div className="container">
        <div className="hww-grid">
          <div className="hww-sticky">
            <div className="tag">◌ THE FUSION FRAMEWORK</div>
            <h3>Seven steps, four phases. <em>One system</em> at the end.</h3>
            <p>Our methodology runs every engagement: Discover, Map, Diagnose, Design, Build, Train, Optimize. You'll know exactly what's happening, what it costs, and when results land.</p>
          </div>

          <div className="hww-steps">
            {STEPS.map((s) => (
              <Reveal key={s.n}>
                <div className="hww-step">
                  <div className="lbl">PHASE · {s.n}<br/>{s.k}</div>
                  <div>
                    <h4>{s.h.split(s.em)[0]}<em>{s.em}</em>{s.h.split(s.em)[1]}</h4>
                    <p>{s.p}</p>
                    <div className="meta">
                      <span><b>{s.meta[0]}</b></span>
                      <span><b>{s.meta[1]}</b></span>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------- Bento ----------- */
function Waveform({ bars = 28 }) {
  const [vals, setVals] = _wUS(() => Array.from({ length: bars }, () => 0.2 + Math.random() * 0.8));
  _wUE(() => {
    const id = setInterval(() => setVals((v) => v.map(() => 0.1 + Math.random() * 0.95)), 130);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="waveform">
      {vals.map((v, i) => <div key={i} className="bar" style={{ height: `${v * 100}%`, opacity: 0.55 + v * 0.4 }} />)}
    </div>
  );
}

const TRANSCRIPT = [
  { s: "C", t: "Hi, calling about a roof inspection — hail last night.", me: false },
  { s: "AI", t: "Got it. Booking Marcus tomorrow at 9. Address?", me: true },
  { s: "C", t: "412 Riverwood. Two-story on the corner.", me: false },
  { s: "AI", t: "Confirmed. Text in 30 seconds. Carrier docs in tow.", me: true },
];

function BentoVoice() {
  const [t, setT] = _wUS(143);
  _wUE(() => { const id = setInterval(() => setT((x) => x + 1), 1000); return () => clearInterval(id); }, []);
  const mm = String(Math.floor(t/60)).padStart(2,"0");
  const ss = String(t%60).padStart(2,"0");
  return (
    <div className="bento-cell b-voice span2">
      <div className="b-head"><span>Surface · 01</span><span className="live">Voice AI</span></div>
      <div className="b-title">Your phones, <em>answered.</em></div>
      <div className="b-desc">AI receptionist takes calls 24/7. Qualifies, books, transcribes, pushes structured leads into the CRM.</div>
      <div className="stage">
        <div className="ring"></div>
        <div className="duration tnum">{mm}<em>:</em>{ss}</div>
        <div className="caller">+1 (404) ███-0184 · ATLANTA · NEW LEAD</div>
        <Waveform />
        <div className="transcript">
          {TRANSCRIPT.map((l, i) => (
            <div key={i}>
              <span className={l.me ? "speaker me" : "speaker"}>{l.s}:</span>
              <span>{l.t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function BentoLead() {
  const [s, setS] = _wUS(64);
  _wUE(() => {
    const id = setInterval(() => setS((x) => x < 92 ? x + 1 : 64), 80);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="bento-cell b-lead span2">
      <div className="b-head"><span>Surface · 02</span><span className="live">CRM</span></div>
      <div className="b-title">Pipeline, <em>scored.</em></div>
      <div className="stage">
        <div className="name"><em>M.</em> Patterson</div>
        <div className="meta">RIVERWOOD · STORM · 412</div>
        <div className="score tnum">{s}<span className="max">/100</span></div>
        <div className="bar"><i style={{width:`${s}%`}}></i></div>
        <div className="tags">
          <span className="tag hot">HOT</span>
          <span className="tag">INSURANCE</span>
          <span className="tag">$48.5K EST</span>
        </div>
      </div>
    </div>
  );
}

function BentoDoc() {
  return (
    <div className="bento-cell b-doc">
      <div className="b-head"><span>Surface · 03</span><span className="live">Doc AI</span></div>
      <div className="b-title">PDFs in. <em>Data out.</em></div>
      <div className="stage">
        <div className="pdf">
          <div className="ln" style={{top:22,width:"60%"}}></div>
          <div className="ln" style={{top:32,width:"75%"}}></div>
          <div className="ln" style={{top:42,width:"50%"}}></div>
          <div className="ln" style={{top:56,width:"70%"}}></div>
          <div className="ln" style={{top:66,width:"45%"}}></div>
          <div className="ln" style={{top:80,width:"65%"}}></div>
          <div className="ln" style={{top:90,width:"55%"}}></div>
          <div className="ln" style={{top:104,width:"40%"}}></div>
          <div className="scan"></div>
        </div>
        <div className="fields">
          <div className="field"><span className="k">Carrier</span><span className="v">Allstate</span></div>
          <div className="field"><span className="k">Claim</span><span className="v r">CL-44820</span></div>
          <div className="field"><span className="k">ACV</span><span className="v r">$18,420</span></div>
          <div className="field"><span className="k">Deductible</span><span className="v">$2,500</span></div>
          <div className="field"><span className="k">Loss</span><span className="v">05/14</span></div>
        </div>
      </div>
    </div>
  );
}

const CHAT_SEQ = [
  { who: "OPS · MARCUS", side: "user", t: "Scope on the Henderson reroof?" },
  { who: "FUSIO ASSISTANT", side: "ai", t: "Tear-off, 38 sq, GAF HD shingles. Closeout 4/22. Want the photos?" },
  { who: "OPS · MARCUS", side: "user", t: "And the final invoice." },
  { who: "FUSIO ASSISTANT", side: "ai", t: "Posted 14 photos + invoice $24,750 to your channel." },
];
function BentoChat() {
  const [n, setN] = _wUS(2);
  const [typing, setTyping] = _wUS(false);
  _wUE(() => {
    const id = setInterval(() => {
      setTyping(true);
      setTimeout(() => {
        setN((x) => (x >= CHAT_SEQ.length ? 1 : x + 1));
        setTyping(false);
      }, 900);
    }, 3200);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="bento-cell b-chat">
      <div className="b-head"><span>Surface · 04</span><span className="live">KB.AI</span></div>
      <div className="b-title">Your company, <em>searchable.</em></div>
      <div className="stage">
        {CHAT_SEQ.slice(0, n).map((m, i) => (
          <div key={i} className={"msg " + m.side}>
            <div className="who">{m.who}</div>
            <div>{m.t}</div>
          </div>
        ))}
        {typing && <div className="typing"><i></i><i></i><i></i></div>}
      </div>
    </div>
  );
}

function BentoSMS() {
  return (
    <div className="bento-cell b-sms">
      <div className="b-head"><span>Surface · 05</span><span className="live">SMS.BOT</span></div>
      <div className="b-title">Missed call? <em>Saved.</em></div>
      <div className="stage">
        <div className="stamp">11s after missed call</div>
        <div className="bubble out">Hey — Apex Roofing. Sorry we missed you. Free inspection tomorrow at 9?</div>
        <div className="bubble in">Yes — 412 Riverwood Dr. Thanks.</div>
        <div className="bubble out">Booked with Marcus. Calendar invite sent.</div>
        <div className="stamp">CRM updated · Owner notified</div>
      </div>
    </div>
  );
}

function BentoDash() {
  const [vals, setVals] = _wUS(() => Array.from({ length: 14 }, (_, i) => 30 + Math.sin(i) * 14 + Math.random() * 18));
  _wUE(() => {
    const id = setInterval(() => setVals((p) => [...p.slice(1), Math.max(8, p[p.length - 1] + (Math.random() - 0.45) * 16)]), 1600);
    return () => clearInterval(id);
  }, []);
  const max = Math.max(...vals);
  return (
    <div className="bento-cell b-dash">
      <div className="b-head"><span>Surface · 06</span><span className="live">DASH</span></div>
      <div className="b-title">One screen. <em>The whole shop.</em></div>
      <div className="stage">
        <div className="kpis">
          <div className="kpi"><div className="l">Calls</div><div className="v tnum">128</div></div>
          <div className="kpi"><div className="l">Leads</div><div className="v red tnum">42</div></div>
          <div className="kpi"><div className="l">Close</div><div className="v tnum">31</div></div>
        </div>
        <div className="chart">
          <svg viewBox="0 0 200 70" preserveAspectRatio="none">
            {vals.map((v, i) => (
              <rect key={i}
                x={i * (200 / vals.length) + 2}
                y={70 - (v / max) * 64}
                width={200 / vals.length - 4}
                height={(v / max) * 64}
                fill={i === vals.length - 1 ? "#CC0C20" : "rgba(255,255,255,0.55)"} />
            ))}
          </svg>
        </div>
      </div>
    </div>
  );
}

function Bento() {
  return (
    <section className="bento section-pad" id="surfaces">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>What we build</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Six <em>surfaces.</em><br/>One operating layer.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              These are real installations, simplified. Each ships on its own. Together they
              become the system you wish you'd had three years ago.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="bento-grid">
            <BentoVoice />
            <BentoLead />
            <BentoDoc />
            <BentoChat />
            <BentoSMS />
            <BentoDash />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ----------- Founder ----------- */
function Founder() {
  return (
    <section className="founder section-pad" id="about">
      <div className="container">
        <div className="founder-grid">
          <Reveal>
            <div className="founder-photo">
              <div className="ph">
                <span className="big">AD</span>
                <span>ANDREW D'ANGELO</span>
                <span style={{marginTop:4, opacity:0.6}}>Founder · AI Fusio</span>
              </div>
              <img
                className="founder-img"
                src="assets/andrew.jpg"
                alt="Andrew D'Angelo, Founder of AI Fusio"
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
              />
              <div className="founder-grad"></div>
              <div className="tag"><span className="dot"></span><span>FOUNDER · ANDREW D'ANGELO</span></div>
            </div>
          </Reveal>
          <div className="founder-text">
            <Reveal><Eyebrow>The founder</Eyebrow></Reveal>
            <Reveal delay={80}>
              <p className="pull" style={{marginTop:18}}>
                Most businesses aren't ready for AI — because their systems aren't <em>ready first.</em>
              </p>
            </Reveal>
            <Reveal delay={160}>
              <p>
                AI Fusio exists because business owners keep getting sold <strong>tools without a plan</strong>:
                a chatbot here, a SaaS subscription there, none of it connected to how the company
                actually runs.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <p>
                We do the unglamorous part first — map workflows, clean data, design permissions,
                pick the right tools — then build the integrations that make AI useful, secure,
                and measurable. We're <strong>not an agency.</strong> We're an outsourced AI department.
              </p>
            </Reveal>
            <Reveal delay={280}>
              <div className="founder-sig">
                <span className="name">Andrew D'Angelo</span>
                <span className="role">Founder · AI Fusio</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------- Industries ----------- */
const INDS = [
  { id: "01", t: "Contractors & Trades",        who: "Roofing · GC · Restoration · HVAC · Plumbing",   p: "High-value leads, heavy phone volume, scattered photos and estimates, missed calls bleeding revenue.", em: "Trades" },
  { id: "02", t: "Home Services",                who: "Pest · Landscape · Pool · Cleaning · Handyman",  p: "Route-heavy operations, recurring customers, and referral mechanics ripe for automation.", em: "Services" },
  { id: "03", t: "Professional Services",        who: "Law · Accounting · Insurance · Real Estate",     p: "Document-heavy intake, regulated data, and matter workflows where AI saves hours per case.", em: "Services" },
  { id: "04", t: "Medical & Wellness",           who: "Dental · Chiro · Therapy · Med Spas · PT",       p: "Booking, intake, no-show recovery, and front-desk workflows under privacy constraints.", em: "Wellness" },
  { id: "05", t: "Multi-Location Local",         who: "Gyms · Restaurants · Franchises · Auto",         p: "Centralized reporting, local-page management, and consistent customer ops across every site.", em: "Local" },
  { id: "06", t: "Manufacturing & Distribution", who: "Small Mfg · Warehouse · Equipment Rental",       p: "POs, vendor bills, inventory ops, and inbound RFQs that drown admin staff in paperwork.", em: "Manufacturing" },
];

function Industries() {
  return (
    <section className="industries section-pad" id="industries">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>Who we serve</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Built for <em>operators.</em><br/>Not software companies pretending to be one.</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              We know these businesses — the phones, the paperwork, the crews, the customers.
              Don't see yours? Talk to us. We probably still fit.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="ind-grid">
            {INDS.map((i) => (
              <div className="ind-card" key={i.id}>
                <div className="lbl">VERTICAL · {i.id}</div>
                <h4>{i.t.replace(i.em, "")}<em>{i.em}</em></h4>
                <div className="who">{i.who}</div>
                <p>{i.p}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ----------- Workshops ----------- */
const WORKSHOPS = [
  { id: "W/01", t: "AI for Owners & Executives", len: "Half-day", p: "What AI can and can't do for your business right now. Where to invest first. How to lead the team through the change without breaking what works.", tags: ["Strategy", "Roadmap", "Investment"], em: "Executives" },
  { id: "W/02", t: "AI for Sales Teams",         len: "Half-day", p: "Practical AI for prospecting, follow-up, proposals, call summaries, pipeline hygiene — without sounding like a robot. Plus the guardrails to keep your team safe.", tags: ["Prompting", "Outreach", "CRM"], em: "Sales" },
  { id: "W/03", t: "AI for Admin & Ops",         len: "Half-day", p: "Practical AI for the work that fills the day: email, documents, scheduling, vendor comms, reports. With templates your team can use Monday morning.", tags: ["Documents", "Email", "Templates"], em: "Admin" },
  { id: "W/04", t: "AI Policy & Safe Usage",     len: "Full-day", p: "The hardest part of company-wide AI: keeping data safe, picking the right tools, and writing the policy your team will actually follow.", tags: ["Policy", "Data", "Approved tools"], em: "Policy" },
];

function Workshops() {
  return (
    <section className="workshops section-pad" id="workshops">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>Workshops & training</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Bring AI fluency<br/>to <em>every team.</em></h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              Half-day and full-day workshops, in person or remote. Role-specific, hands-on,
              built for the people who do the work — not a generic intro to ChatGPT.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="ws-grid">
            {WORKSHOPS.map((w) => (
              <div className="ws-card" key={w.id}>
                <div className="ws-head">
                  <span className="id">{w.id}</span>
                  <span className="len">{w.len.toUpperCase()}</span>
                </div>
                <h4>{w.t.replace(w.em, "")}<em>{w.em}</em></h4>
                <p>{w.p}</p>
                <div className="ws-tags">
                  {w.tags.map((t, i) => <span className="ws-tag" key={i}>{t}</span>)}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.HowWeWork = HowWeWork;
window.Bento = Bento;
window.Founder = Founder;
window.Industries = Industries;
window.Workshops = Workshops;