/* eslint-disable */
// Scorecard, Testimonials, FAQ, Resources

const { useState: _iUS, useMemo: _iUM } = React;

const SC_QS = [
  { id:"q1", q:"Are calls or leads falling through the cracks?", w:14, invert:true },
  { id:"q2", q:"Does your team re-enter the same data across systems?", w:12, invert:true },
  { id:"q3", q:"Is your customer info in one connected system?", w:12 },
  { id:"q4", q:"Do you have an AI usage policy for your employees?", w:8 },
  { id:"q5", q:"Are follow-ups automated for new leads?", w:12 },
  { id:"q6", q:"Do PDFs and invoices get filed manually?", w:10, invert:true },
  { id:"q7", q:"Could a new hire find your SOPs easily?", w:10 },
  { id:"q8", q:"Do you have a live KPI dashboard?", w:10 },
  { id:"q9", q:"Have you tried an AI tool and abandoned it?", w:6, invert:true },
  { id:"q10", q:"Do you know which workflows would save you the most time?", w:6 },
];

function Scorecard() {
  const [a, setA] = _iUS({});
  const score = _iUM(() => {
    let s = 0;
    for (const q of SC_QS) {
      const v = a[q.id]; if (v === undefined) continue;
      const yes = v === "y";
      const good = q.invert ? !yes : yes;
      if (good) s += q.w;
    }
    return s;
  }, [a]);
  const answered = Object.keys(a).length;
  const verdict = _iUM(() => {
    if (answered < 3) return { l: "TAKE THE QUIZ", t: "Tap yes or no on the questions to the left. Your readiness score and recommended next step will appear here in real time." };
    if (score >= 75) return { l: "Ready to scale.", t: "You've got strong fundamentals. We'd skip straight to a Productivity Sprint — high-leverage automations installed in 2–4 weeks." };
    if (score >= 50) return { l: "Ready to integrate.", t: "Sweet spot. Start with a tech-stack audit so we can find the highest-ROI wins specific to your business." };
    if (score >= 25) return { l: "Needs foundation.", t: "Big upside here. We'd start with the audit and a blueprint to clean up the foundation before layering AI on top." };
    return { l: "Early stage.", t: "Your business will benefit enormously — but the operating layer needs attention first. We'll show you exactly where to start." };
  }, [score, answered]);

  return (
    <section className="scorecard section-pad" id="scorecard">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>AI Readiness · Free</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>How <em>ready</em> is your business<br/>for real AI integration?</h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              10 questions. 60 seconds. A real readiness score and a recommended next step —
              no email gate, no sales pitch, no spam.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="sc-shell">
            <div className="sc-card">
              <h3>The <em>questions</em></h3>
              <div className="desc">Yes or no. Honest answers only.</div>
              {SC_QS.map((q, i) => (
                <div className="sc-q" key={q.id}>
                  <div className="l">Q · {String(i+1).padStart(2,"0")}</div>
                  <div className="row">
                    <div className="q">{q.q}</div>
                    <div className="sc-yn">
                      <button className={a[q.id]==="y" ? "sel-y" : ""} onClick={() => setA({ ...a, [q.id]:"y" })}>YES</button>
                      <button className={a[q.id]==="n" ? "sel-n" : ""} onClick={() => setA({ ...a, [q.id]:"n" })}>NO</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="sc-result">
              <div className="head">
                <span>▌Your readiness</span>
                <span>{answered}/10 answered</span>
              </div>
              <div className="score-big tnum">{score}<span className="max">/100</span></div>
              <div className="label">{verdict.l}</div>
              <div className="meter"><i style={{width:`${score}%`}}></i></div>
              <div className="verdict">{verdict.t}</div>
              <div className="cta">
                <a href="#contact" className="btn">Talk to us about your score <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Testimonials ---------- */
const TST = [
  { q: "We were drowning in missed calls and storm leads going cold. Within three weeks they had our phones, CRM, and follow-up automated — we recovered more revenue in one month than the project cost.", em: "storm leads",
    name: "Prospective client", role: "Roofing GC · Southeast", init: "J",
    r: [{v:"12s", l:"avg. response"},{v:"84%", l:"calls auto-handled"}] },
  { q: "I was buying AI tools like a kid in a candy store and none of them actually changed how the business ran. They came in, ripped half of it out, and built one system that just works.", em: "one system",
    name: "Prospective client", role: "Restoration · Mid-Atlantic", init: "A",
    r: [{v:"$184K", l:"recovered, 90d"},{v:"3.2×", l:"faster proposals"}] },
  { q: "Our admin team got their afternoons back. Document parsing, invoice matching, vendor comms — gone. They're finally doing work that needs a human brain.", em: "human brain",
    name: "Prospective client", role: "HVAC + Plumbing · Texas", init: "D",
    r: [{v:"26h/wk", l:"admin recovered"},{v:"$0", l:"new hires needed"}] },
  { q: "What sold me was they spent the first week not pitching software. They went through every department, found the leaks, showed me the math. Then they built it.", em: "the math",
    name: "Prospective client", role: "General Contractor · West Coast", init: "S",
    r: [{v:"31%", l:"close rate ↑"},{v:"5 dept", l:"end to end"}] },
];

function Testimonials() {
  return (
    <section className="testimonials section-pad" id="testimonials">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>Founding-client demonstrations</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>What changes when<br/>the systems <em>start talking.</em></h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              Reference engagements modeled on the patterns we install most often. Names withheld
              during launch — real case studies replace these as ink dries.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="tst-grid">
            {TST.map((t, i) => (
              <div className="tst-card" key={i}>
                <div className="tst-q">
                  "{t.q.split(t.em)[0]}<em>{t.em}</em>{t.q.split(t.em)[1]}"
                </div>
                <div className="tst-meta">
                  <div className="tst-avatar">{t.init}</div>
                  <div className="tst-author">
                    <div className="name">{t.name}</div>
                    <div className="role">{t.role}</div>
                  </div>
                </div>
                <div className="tst-result">
                  {t.r.map((rr, j) => (
                    <span key={j}><b>{rr.v}</b>{rr.l}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <div className="tst-disc">— Demonstrations · clearly labeled until live case studies replace them —</div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FAQS = [
  { q: "How is this different from buying ChatGPT seats for the team?", em: "ChatGPT",
    a: "Individual ChatGPT use is a starting point, not a strategy. We integrate AI into the systems where work actually happens — your CRM, phones, website, documents, and workflows — with permissions, audit logs, and approval steps. The output is an operating layer, not a browser tab." },
  { q: "Will this replace people on my team?", em: "replace",
    a: "Almost never. The goal is removing copy-paste, data entry, missed-call follow-up, and document handling — not removing the people doing them. Most clients end up doing more with the same team. A handful redeploy headcount toward higher-value work." },
  { q: "How long until we see real results?", em: "results",
    a: "Audit: 1–2 weeks. Blueprint: another 1–2. A Productivity Sprint installs 3–7 automations and one AI assistant in 2–4 weeks. Full transformations run 8–16 weeks, phased so nothing breaks. You'll see measurable improvement before any project ends." },
  { q: "How do you handle our customer data and security?", em: "security",
    a: "Every system ships with a data classification policy, role-based permissions, audit trails, and human-in-the-loop checkpoints. We align with the NIST AI RMF and OWASP LLM Top 10. You always know where data flows and what each AI tool can see." },
  { q: "What if we're not ready for AI yet?", em: "ready",
    a: "That's exactly what the audit answers. We'll tell you what you're ready for now, what needs cleanup first, and what should wait. If the honest answer is 'fix your CRM hygiene before layering AI on,' we'll say so — and quote you for that." },
  { q: "What does this actually cost?", em: "cost",
    a: "Audits start at $2,500. Blueprints from $7,500. Productivity Sprints from $10K. Full implementations $25K–$250K depending on scope. Managed AI retainers run $1.5K–$25K per month. Everything ties to measurable outcomes — hours, leads, revenue — not deliverables." },
  { q: "Do you work with my industry?", em: "industry",
    a: "Best fits: contractors, home services, professional services, medical practices, multi-location local businesses, and small-to-mid manufacturers. If you have high-value leads, document-heavy admin, or software that doesn't talk to itself — we fit. If not, we'll tell you up front." },
  { q: "What happens after launch?", em: "after launch",
    a: "The Managed AI Department engagement: monthly tuning, new workflows, employee training, policy maintenance, monitoring, and quarterly strategy reviews. Most clients stay on for at least a year because the system keeps compounding — every month adds capability." },
];

function FAQ() {
  const [open, setOpen] = _iUS(0);
  return (
    <section className="faq section-pad" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <Reveal><Eyebrow>Questions</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 className="display" style={{fontSize:"clamp(40px, 5vw, 76px)", marginTop:20, lineHeight:0.98}}>
                The questions<br/>every <em>owner</em> asks.
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p className="lede" style={{marginTop:24}}>
                Straight answers. If yours isn't here, put it in the contact form below.
              </p>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div className="faq-list">
              {FAQS.map((f, i) => (
                <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
                  <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <h4>{f.q.split(f.em)[0]}<em>{f.em}</em>{f.q.split(f.em)[1]}</h4>
                    <span className="toggle">+</span>
                  </div>
                  <div className="faq-a"><p>{f.a}</p></div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Resources ---------- */
const RES = [
  { kind:"GUIDE", time:"12 min read",   t:"The 10 places your business is leaking time to AI.", em:"leaking",
    ex:"A practical map of the highest-leverage AI wins for service businesses and contractors — with examples and ballpark ROI per workflow." },
  { kind:"WHITEPAPER", time:"20 min",   t:"Why most AI implementations fail.", em:"fail",
    ex:"The pattern behind every AI rollout that stalled: skipping process, buying tools first, ignoring governance. The fix is structural." },
  { kind:"CASE STUDY", time:"Reference", t:"How a roofing GC went from 38% missed calls to 12-second response.", em:"12-second",
    ex:"What got installed, what it cost, and how the math shook out at 90 days. A reference implementation for contractors." },
  { kind:"DOWNLOAD", time:"Free",        t:"AI Usage Policy your team will actually follow.", em:"actually",
    ex:"Copy-paste policy covering approved tools, data classifications, employee responsibilities, and incident reporting." },
  { kind:"GUIDE", time:"8 min",          t:"Voice AI for businesses with phones — what works, what doesn't.", em:"works",
    ex:"Receptionists, missed-call recovery, after-hours intake, call summaries. Where it's worth the money and where it isn't." },
  { kind:"WHITEPAPER", time:"15 min",    t:"The fractional AI department, and when it makes sense.", em:"fractional",
    ex:"An economic case for outsourcing AI ops vs. hiring internally. Numbers, comparisons, decision criteria for a mid-market business." },
];

function Resources() {
  return (
    <section className="resources section-pad" id="resources">
      <div className="container">
        <div className="section-hd">
          <Reveal><Eyebrow>Resources</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Free reading.<br/><em>No gating.</em></h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lede">
              The guides, frameworks, and templates we hand to every client on day one.
              Take what you need.
            </p>
          </Reveal>
        </div>

        <Reveal>
          <div className="res-grid">
            {RES.map((r, i) => (
              <div className="res-card" key={i}>
                <div className="meta">
                  <span className="tag">{r.kind}</span>
                  <span>· {r.time}</span>
                </div>
                <h4>{r.t.split(r.em)[0]}<em>{r.em}</em>{r.t.split(r.em)[1]}</h4>
                <div className="ex">{r.ex}</div>
                <div className="read">Read <span>→</span></div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Scorecard = Scorecard;
window.Testimonials = Testimonials;
window.FAQ = FAQ;
window.Resources = Resources;