/* ================================================================
 * Iteration 3 — Friday Report, Pricing, Engagement Structure,
 *   Fit / Not-a-fit, Founder, FAQ, Lead Magnet, Final CTA, Footer.
 * All sections export to window for app.jsx to mount.
 * ================================================================ */

/* ================================================================
 * 7 — THE FRIDAY REPORT (visual centerpiece)
 * Sample report laid out like a clean enterprise document:
 *   - monospace numbers on a grid
 *   - subtle borders, conservative and scannable
 * ================================================================ */
function FridayReport() {
  const rows = [
    { k: "Confirmation rate", baseline: "62%", now: "91%", delta: "+29 pts" },
    { k: "No-show rate", baseline: "18%", now: "9%", delta: "−9 pts" },
    { k: "Avg. inquiry response", baseline: "4h 12m", now: "3m 40s", delta: "−98%" },
    { k: "Google reviews this week", baseline: "1", now: "7", delta: "+6" },
  ];
  return (
    <section id="friday-report" className="bg-white border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>The Friday report</span>
        </div>
        <div className="mt-4 flex flex-col md:flex-row md:items-end md:justify-between gap-4">
          <h2 className="text-[28px] md:text-[40px] leading-[1.05] tracking-tightest font-medium text-ink max-w-[22ch]">
            Every Friday at 8:00 AM, you receive this.
          </h2>
          <p className="text-[13px] text-muted max-w-[36ch]">
            Sample report. Your reports reflect your firm's data.
          </p>
        </div>

        <div className="mt-10 md:mt-14 border border-rule rounded-xl bg-white shadow-[0_24px_80px_-40px_rgba(10,10,10,0.18)] overflow-hidden">
          {/* Report header */}
          <div className="px-6 md:px-8 py-5 border-b border-rule flex items-center justify-between bg-paper/60">
            <div>
              <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
                Weekly operations report · Week 06
              </div>
              <div className="mt-1 text-[15px] text-ink font-medium">
                Apr 13 to Apr 17, 2026
              </div>
            </div>
            <div className="text-right">
              <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
                Prepared by
              </div>
              <div className="mt-1 text-[15px] text-ink">AEI · Implementation</div>
            </div>
          </div>

          {/* Hero metrics */}
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-rule border-b border-rule">
            <HeroMetric
              label="Front-office hours recovered"
              value="11.4"
              suffix="hrs"
              sub="vs. week-one baseline"
              accent
              spark={[3.2, 5.1, 6.4, 8.0, 9.1, 11.4]}
              sparkAccent
            />
            <HeroMetric
              label="New reviews generated"
              value="7"
              sub="4w rolling: 23"
              spark={[2, 4, 5, 6, 5, 7]}
            />
            <HeroMetric
              label="Reactivations"
              value="6"
              sub="Est. $11,400 recovered"
              spark={[1, 2, 4, 3, 5, 6]}
            />
            <HeroMetric
              label="ROI multiple, week"
              value="3.8×"
              sub="Against weekly fee"
              spark={[1.2, 1.8, 2.4, 2.9, 3.3, 3.8]}
            />
          </div>

          {/* Charts row — donut + before/after bars */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-0 md:divide-x divide-rule border-b border-rule">
            <div className="px-6 md:px-8 py-6 md:py-7">
              <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
                Confirmation rate · this week
              </div>
              <div className="mt-5">
                <window.Donut value={91} sub="Target ≥ 85% · Baseline 62%" label="91% confirmed" />
              </div>
            </div>
            <div className="px-6 md:px-8 py-6 md:py-7">
              <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
                Operational deltas
              </div>
              <div className="mt-5 space-y-4">
                <window.BeforeAfterBar
                  label="No-show rate (lower is better)"
                  baseline={18}
                  current={9}
                  max={25}
                  invert
                />
                <window.BeforeAfterBar
                  label="Avg. inquiry response (lower is better)"
                  baseline={252}
                  current={3.6}
                  max={260}
                  invert
                />
              </div>
            </div>
          </div>

          {/* Baseline vs. current table */}
          <div className="px-6 md:px-8 py-6 md:py-7">
            <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
              Operational deltas
            </div>
            <div className="mt-4 overflow-x-auto">
              <table className="w-full num text-[14px]">
                <thead>
                  <tr className="text-left text-muted text-[11px] uppercase tracking-[0.14em]">
                    <th className="py-3 pr-6 font-normal">Metric</th>
                    <th className="py-3 pr-6 font-normal">Baseline</th>
                    <th className="py-3 pr-6 font-normal">This week</th>
                    <th className="py-3 font-normal text-right">Delta</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r) => (
                    <tr key={r.k} className="border-t border-rule">
                      <td className="py-3 pr-6 text-ink font-medium tracking-tighter2">
                        {r.k}
                      </td>
                      <td className="py-3 pr-6 text-muted">{r.baseline}</td>
                      <td className="py-3 pr-6 text-ink">{r.now}</td>
                      <td className="py-3 text-right text-navy">{r.delta}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Founder note */}
          <div className="px-6 md:px-8 py-6 md:py-7 border-t border-rule bg-paper/60">
            <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
              Focus for next week
            </div>
            <p className="mt-3 text-[15px] md:text-[16px] leading-[1.6] text-ink max-w-[72ch]">
              Inquiry response is healthy and confirmation rate is above the
              target. The weakest signal is Tuesday afternoon no-shows. I will
              tune the T-24h reminder window and add a T-2h recovery step
              before next Friday. Nothing is required from your team.
            </p>
            <p className="mt-3 text-[13.5px] text-muted">
              — AEI
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroMetric({ label, value, suffix, sub, accent, spark, sparkAccent }) {
  return (
    <div className="px-5 md:px-7 py-6 md:py-7">
      <div className="num text-[11px] tracking-[0.18em] text-muted uppercase">
        {label}
      </div>
      <div
        className={
          "mt-3 flex items-baseline gap-1.5 tracking-tightest num " +
          (accent ? "text-amber" : "text-ink")
        }
      >
        <span className="text-[34px] md:text-[44px] leading-none font-medium">
          {value}
        </span>
        {suffix && (
          <span className="text-[14px] text-muted font-normal">{suffix}</span>
        )}
      </div>
      {spark && (
        <div className="mt-2 -mx-1">
          <window.Sparkline values={spark} accent={sparkAccent} />
        </div>
      )}
      <div className="mt-2 text-[12.5px] text-muted">{sub}</div>
    </div>
  );
}

/* ================================================================
 * 8 — PRICING & GUARANTEE
 * ================================================================ */
function Pricing({ onBook }) {
  const included = [
    "All implementation tools and deployment costs",
    "Week-one operational audit",
    "Full workflow deployment",
    "Weekly Friday reporting",
    "90-minute staff training",
    "Full day-90 handoff. You own every workflow.",
  ];
  const notDoing = [
    "SEO, paid advertising, or web design",
    "Custom software development",
    "Licensing a product or platform",
    "HIPAA compliance consulting or legal services",
    "Managing staff, hiring, or replacing existing roles",
    "Retaining ownership of workflows past day 90",
  ];
  return (
    <section id="pricing" className="bg-paper border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>Pricing</span>
        </div>
        <h2 className="mt-4 text-[28px] md:text-[40px] leading-[1.05] tracking-tightest font-medium text-ink max-w-[22ch]">
          $2,000 per month. Month one is guaranteed.
        </h2>

        <div className="mt-10 md:mt-14 grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Pricing card */}
          <div className="lg:col-span-7 col-span-12 relative bg-white border border-rule rounded-xl p-5 md:p-10 overflow-hidden">
            <div className="flex items-baseline gap-3">
              <span className="num text-[56px] md:text-[72px] leading-none tracking-tightest text-navy font-medium">
                $2,000
              </span>
              <span className="text-[15px] text-muted">/ month</span>
            </div>
            <p className="mt-2 text-[14px] text-muted">
              90-day minimum engagement · month-to-month after
            </p>

            <ul className="mt-8 space-y-3">
              {included.map((l) => (
                <li key={l} className="flex items-start gap-3">
                  <svg
                    className="mt-[6px] shrink-0 text-navy"
                    width="14"
                    height="14"
                    viewBox="0 0 14 14"
                    fill="none"
                    aria-hidden="true"
                  >
                    <path
                      d="M1 7l4 4 8-9"
                      stroke="currentColor"
                      strokeWidth="1.5"
                    />
                  </svg>
                  <span className="text-[15px] leading-[1.55] text-ink">
                    {l}
                  </span>
                </li>
              ))}
            </ul>

            <button
              onClick={onBook}
              className="glass-cta mt-10 inline-flex items-center justify-center h-12 px-6 text-[15px] font-medium overflow-hidden"
            >
              <span className="relative z-[1] flex items-center">
                Book a 30-minute consultation
                <svg
                  className="ml-2"
                  width="14"
                  height="14"
                  viewBox="0 0 14 14"
                  fill="none"
                  aria-hidden="true"
                >
                  <path
                    d="M1 7h12M8 2l5 5-5 5"
                    stroke="currentColor"
                    strokeWidth="1.5"
                  />
                </svg>
              </span>
            </button>
          </div>

          {/* Guarantee card */}
          <div className="lg:col-span-5 col-span-12 bg-white border border-rule rounded-xl p-5 md:p-8 flex flex-col">
            <div className="inline-flex items-center gap-2 self-start px-2.5 py-1 rounded-full bg-emerald-500/10 backdrop-blur-md border border-emerald-500/20 text-emerald-700 text-[11px] uppercase tracking-[0.16em]">
              Month-one guarantee
            </div>
            <h3 className="mt-4 text-[20px] md:text-[22px] font-medium tracking-tighter2 text-ink">
              Straightforward by design.
            </h3>
            <p className="mt-3 text-[15px] md:text-[16px] leading-[1.6] text-ink">
              If your operation isn't measurably running better after 30
              days — in real numbers you can verify yourself in the Friday
              report — you don't pay for month two. No argument. No
              invoice. No obligation.
            </p>
            <p className="mt-3 text-[15px] md:text-[16px] leading-[1.6] text-ink">
              The engagement is $2,000 per month for 90 days. Every tool,
              every build, every Friday report, and every training session
              is included in that number. There are no setup fees, no
              per-user charges, and no pass-through tool costs.
            </p>
            <p className="mt-3 text-[15px] md:text-[16px] leading-[1.6] text-ink">
              At the end of 90 days everything built is yours permanently —
              the workflows, the configurations, the documentation, all of
              it. You own it outright.
            </p>
            <p className="mt-3 text-[15px] md:text-[16px] leading-[1.6] text-ink">
              After day 90, optional maintenance and monitoring is
              available at $500 per month. Most clients stay on because
              keeping systems running requires active oversight — but that
              decision is entirely yours after you've seen 90 days of
              results.
            </p>
            <div className="mt-6 border-t border-rule pt-5 text-[13px] text-muted leading-[1.55]">
              No setup fees. No per-user fees. No pass-through tool charges.
            </div>
          </div>
        </div>

      </div>
    </section>
  );
}

/* ================================================================
 * 9 — 90-DAY ENGAGEMENT STRUCTURE
 * ================================================================ */
function EngagementStructure() {
  const phases = [
    {
      when: "Week 1",
      title: "Operational audit and baseline",
      body: "A structured operational audit of current workflows. A 90-minute discovery call with ownership and the front-office lead, a read-only data pull from the practice management or operations system, a mystery inquiry test across all inbound channels, and an asynchronous video-based workflow review from the front-office staff. An on-site observation day is optional. The output is a complete baseline of response times, no-show rates, review volume, and dormant-relationship counts — quantified, documented, and agreed to before any implementation begins.",
    },
    {
      when: "Weeks 2 to 3",
      title: "Workflow deployment and staff training",
      body: "The operational workflows are configured, tested, and soft-launched at 10% traffic before full go-live. A 90-minute staff training session covers what changes for the front office, what no longer needs to be done manually, and how to use the new confirmation and review dashboards.",
    },
    {
      when: "Month 2",
      title: "Optimization and expansion",
      body: "AEI audits 30 days of live workflow data, identifies the weakest-performing workflow, and tunes it. A fifth workflow, tailored to what the audit surfaced as the firm's largest remaining time drain, is scoped and deployed.",
    },
    {
      when: "Month 3",
      title: "Documentation and handoff",
      body: "Every workflow is documented as a standard operating procedure. A final staff training session covers long-term operation without AEI. At day 90, full ownership of all workflows, configurations, credentials, and documentation transfers to the firm. AEI's engagement ends or transitions to month-to-month as elected.",
    },
  ];
  return (
    <section id="engagement" className="bg-white border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>Engagement structure</span>
        </div>
        <h2 className="mt-4 text-[28px] md:text-[40px] leading-[1.05] tracking-tightest font-medium text-ink max-w-[22ch]">
          How the 90-day engagement is structured.
        </h2>

        <ol className="mt-10 md:mt-14 relative">
          {/* Vertical rail */}
          <span
            aria-hidden="true"
            className="absolute left-3 md:left-4 top-2 bottom-2 w-px bg-rule"
          />
          {phases.map((p, i) => (
            <li key={p.title} className="relative pl-10 md:pl-16 pb-8 last:pb-0">
              <span
                aria-hidden="true"
                className="absolute left-0 top-1 w-7 h-7 md:w-9 md:h-9 rounded-full bg-white border border-rule flex items-center justify-center num text-[11px] text-navy font-medium"
              >
                0{i + 1}
              </span>
              <div className="num text-[11px] uppercase tracking-[0.18em] text-muted">
                {p.when}
              </div>
              <h3 className="mt-2 text-[20px] md:text-[24px] tracking-tighter2 font-medium text-ink">
                {p.title}
              </h3>
              <p className="mt-3 text-[15.5px] md:text-[16px] leading-[1.65] text-muted max-w-[72ch]">
                {p.body}
              </p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ================================================================
 * 10 — FIT / NOT-A-FIT
 * ================================================================ */
function FitCheck() {
  const fit = [
    "You operate in a service industry AEI supports",
    "You are independently owned or partner-owned",
    "You are in the Phoenix metro or greater Arizona region",
    "Your front office is manually handling inquiry response, reminders, and follow-up",
    "You value measured outcomes over more software to manage",
  ];
  const notFit = [
    "Your business does not have a repeatable client workflow, such as inquiries, appointments, or follow-ups",
    "You don't currently have a steady flow of inbound leads or existing clients to engage",
    "You are looking for SEO, paid advertising, or website design",
    "You aren't ready to share operational data so we can measure real outcomes",
    "You need a one-time project, not an ongoing operational partner",
  ];
  return (
    <section className="bg-paper border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>Fit</span>
        </div>
        <h2 className="mt-4 text-[28px] md:text-[40px] leading-[1.05] tracking-tightest font-medium text-ink max-w-[22ch]">
          Who AEI serves, and who AEI does not.
        </h2>

        <div className="mt-10 md:mt-14 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
          <div className="bg-white border border-rule rounded-xl p-6 md:p-8">
            <div className="num text-[11px] uppercase tracking-[0.18em] text-navy">
              A good fit if...
            </div>
            <ul className="mt-5 space-y-3">
              {fit.map((l) => (
                <li key={l} className="flex items-start gap-3">
                  <svg
                    className="mt-[6px] shrink-0 text-navy"
                    width="14"
                    height="14"
                    viewBox="0 0 14 14"
                    fill="none"
                    aria-hidden="true"
                  >
                    <path
                      d="M1 7l4 4 8-9"
                      stroke="currentColor"
                      strokeWidth="1.5"
                    />
                  </svg>
                  <span className="text-[15px] leading-[1.55] text-ink">
                    {l}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          <div className="bg-white border border-rule rounded-xl p-6 md:p-8">
            <div className="num text-[11px] uppercase tracking-[0.18em] text-muted">
              Not a fit if...
            </div>
            <ul className="mt-5 space-y-3">
              {notFit.map((l) => (
                <li key={l} className="flex items-start gap-3">
                  <svg
                    className="mt-[6px] shrink-0 text-muted"
                    width="14"
                    height="14"
                    viewBox="0 0 14 14"
                    fill="none"
                    aria-hidden="true"
                  >
                    <path
                      d="M2 7h10"
                      stroke="currentColor"
                      strokeWidth="1.5"
                    />
                  </svg>
                  <span className="text-[15px] leading-[1.55] text-ink">
                    {l}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
 * 11 — ABOUT AEI (firm-forward; institutional, not founder-led)
 *
 * Inspired by the early-stage implementation-firm pattern common in
 * professional services sites: brief mission statement, a small set
 * of operating principles, and a compact capability grid. No bio,
 * no photo, no personal narrative.
 * ================================================================ */
function AeiMark() {
  // Clean institutional wordmark block.
  return (
    <div className="relative w-full aspect-[4/3] rounded-xl border border-rule bg-paper overflow-hidden">
      <div
        aria-hidden="true"
        className="absolute inset-0 opacity-60"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgba(10,10,10,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,10,10,0.05) 1px, transparent 1px)",
          backgroundSize: "24px 24px",
        }}
      />
      <div className="absolute inset-0 flex flex-col justify-between p-6">
        <div className="flex items-center justify-between text-[10px] uppercase tracking-[0.18em] text-muted num">
          <span>A · E · I</span>
          <span>Est. 2026</span>
        </div>
        <div>
          <div className="text-[44px] md:text-[56px] leading-none tracking-tightest font-semibold text-ink">
            AEI
          </div>
          <div className="mt-2 text-[12px] text-muted tracking-tighter2 max-w-[28ch]">
            Automated Edge Integration — operational implementation, Phoenix, Arizona.
          </div>
        </div>
        <div className="flex items-center justify-between text-[10px] uppercase tracking-[0.18em] text-muted num">
          <span>Implementation firm</span>
        </div>
      </div>
    </div>
  );
}

function Founder() {
  const principles = [
    {
      t: "Systems built, not slides delivered.",
      d: "AEI installs the workflows your firm runs on. The engagement ends with working operations, not a report and a handshake.",
    },
    {
      t: "Measurement before mechanism.",
      d: "Every engagement begins with a quantified baseline. No workflow is deployed until the numbers it is meant to move are on record.",
    },
    {
      t: "Ownership transferred on day 90.",
      d: "Every workflow, configuration, credential, and document transfers to you at engagement completion. What AEI builds for your firm belongs to your firm.",
    },
    {
      t: "One engagement, one outcome.",
      d: "A 90-day engagement with a measurable result in writing. The work ends when the systems are proven — not when a contract says so.",
    },
  ];
  const stats = [
    { k: "Founded", v: "2026" },
    { k: "Headquarters", v: "Phoenix, AZ" },
    { k: "Engagement", v: "90 days" },
    { k: "First baseline", v: "48 hours" },
  ];
  return (
    <section id="about" className="bg-white border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>About AEI</span>
        </div>

        <div className="mt-8 md:mt-14 grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
          <div className="md:col-span-5">
            <AeiMark />
            <dl className="mt-6 grid grid-cols-2 gap-y-4 gap-x-6">
              {stats.map((s) => (
                <div key={s.k} className="border-t border-rule pt-3">
                  <dt className="text-[11px] uppercase tracking-[0.16em] text-muted">
                    {s.k}
                  </dt>
                  <dd className="mt-1 text-[16px] md:text-[17px] text-ink tracking-tighter2 num">
                    {s.v}
                  </dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="md:col-span-7">
            <h2 className="text-[26px] md:text-[36px] leading-[1.1] tracking-tightest font-medium text-ink max-w-[28ch]">
              AEI, Automated Edge Integration, is an operational
              implementation firm for independent service businesses.
            </h2>
            <p className="mt-5 text-[16px] md:text-[17px] leading-[1.65] text-muted max-w-[68ch]">
              AEI engineers AI-powered systems that absorb the repetitive,
              time-consuming work a service firm faces every week, from
              inquiry handling and appointment coordination to reporting,
              follow-up, records management, and the dozens of small tasks
              in between. The engagement installs those systems into the
              firm's existing tools over 90 days, transfers ownership at
              handoff, and documents every measured result in a written
              Friday report.
            </p>

            <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
              {principles.map((p, i) => (
                <div
                  key={p.t}
                  className="relative border border-rule rounded-xl p-5 bg-white"
                >
                  <div className="num text-[10px] tracking-[0.18em] text-muted uppercase">
                    Principle {String(i + 1).padStart(2, "0")}
                  </div>
                  <div className="mt-3 text-[15.5px] tracking-tighter2 text-ink font-medium">
                    {p.t}
                  </div>
                  <p className="mt-2 text-[13.5px] leading-[1.55] text-muted">
                    {p.d}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
 * 12 — FAQ
 * ================================================================ */
const FAQS = [
  {
    q: "What exactly is AEI?",
    a: "AEI, Automated Edge Integration, is an implementation firm. We deploy the operational workflows a service business needs to turn inbound signal into scheduled revenue over a 90-day engagement, and transfer ownership of everything we build to the firm on day 90.",
  },
  {
    q: "Is this consulting, software, or something else?",
    a: "It is implementation. AEI does not sell advice decks, and AEI does not license a product. The deliverable is working workflows installed inside your firm's existing systems, a weekly written report, and a day-90 handoff.",
  },
  {
    q: "How is AEI different from agencies or marketing firms?",
    a: "Agencies optimize the top of the funnel. AEI engineers the operational layer that converts the funnel into revenue: response, reminders, reviews, and reactivation. AEI does not do SEO, ads, or web design.",
  },
  {
    q: "Is this HIPAA compliant?",
    a: "AEI engages dental and medical practices under a fully HIPAA-compliant framework. We handle the compliance infrastructure so you don't have to — ask us about our BAA process when you book your consultation.",
  },
  {
    q: "What happens after 90 days?",
    a: "At day 90, full ownership of every workflow, configuration, credential, and document transfers to the firm. The engagement ends, or continues month-to-month at your election for ongoing tuning and reporting.",
  },
  {
    q: "Do I need to change my practice management or operations system?",
    a: "No. AEI deploys on top of the systems you already use. The week-one audit confirms which integrations are required and which are already in place before any implementation begins.",
  },
  {
    q: "How long does it take to see measurable results?",
    a: "The week-one audit establishes a quantified baseline. Workflows go live in weeks 2 to 3, and the first Friday report with measured deltas against that baseline arrives at the end of week 4. Results compound through month two as the lowest-performing workflow is tuned.",
  },
  {
    q: "What if it does not work in month one?",
    a: "If month one doesn't deliver measurable results you can verify yourself, you don't pay for month two.",
  },
  {
    q: "What data does AEI need access to?",
    a: "Read-only access to the firm's practice management or operations system, the inbound channels you already use (phone, web forms, listings), and the Google Business profile. Data handled is limited to first name, contact method, appointment time, and appointment category. No payment or clinical records are touched.",
  },
  {
    q: "How involved does our team need to be during the engagement?",
    a: "Approximately a few hours from ownership and the front-office lead in week one for the discovery call and workflow review. One 90-minute staff training in weeks 2 to 3 and a final handoff session in month three. Outside those sessions, the weekly Friday report is the only required reading — built to be reviewed in under 90 seconds.",
  },
];

function FAQ() {
  return (
    <section id="faq" className="bg-paper border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>FAQ</span>
        </div>
        <h2 className="mt-4 text-[28px] md:text-[40px] leading-[1.05] tracking-tightest font-medium text-ink max-w-[22ch]">
          Frequently asked questions.
        </h2>

        <div className="mt-10 md:mt-14 border-t border-rule">
          {FAQS.map((item, i) => (
            <details key={i} className="group border-b border-rule faq-item">
              <summary className="list-none cursor-pointer py-4 md:py-6 flex items-start gap-4 md:gap-10 min-h-[48px]">
                <span className="num text-[12px] text-muted tracking-[0.14em] pt-1 shrink-0 w-6">
                  0{i + 1}
                </span>
                <span className="flex-1 text-[17px] md:text-[18px] tracking-tighter2 text-ink">
                  {item.q}
                </span>
                <span
                  aria-hidden="true"
                  className="shrink-0 mt-1 w-5 h-5 flex items-center justify-center text-muted transition-transform duration-300 group-open:rotate-45"
                >
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.5" />
                  </svg>
                </span>
              </summary>
              <div className="pb-6 md:pb-7 pl-12 md:pl-16 pr-8 md:pr-14 text-[15.5px] leading-[1.7] text-muted max-w-[78ch]">
                {item.a}
              </div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

const INDUSTRY_OPTIONS = [
  "Dental and Orthodontic",
  "Specialty Medical",
  "Property Management",
  "Professional Services",
  "Other",
];

function IndustrySelect({ value, onChange }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  // Close on outside click
  React.useEffect(() => {
    const handler = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, []);

  // Close on Escape
  React.useEffect(() => {
    const handler = (e) => e.key === "Escape" && setOpen(false);
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, []);

  const isSelected = !!value;

  return (
    <div ref={ref} className="block">
      <div className="flex items-center justify-between mb-2">
        <span className="text-[11px] uppercase tracking-[0.16em]" style={{ color: "#888888" }}>
          What type of business do you operate?{" "}
          <span style={{ color: "#92400E" }}>*</span>
        </span>
        {!isSelected && (
          <span
            className="text-[10px] uppercase tracking-[0.14em] animate-pulse"
            style={{ color: "#4A7FA5" }}
          >
            Required
          </span>
        )}
      </div>

      {/* Trigger */}
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="relative w-full flex items-center justify-between px-4 py-3 text-[15px] text-left transition-all"
        style={{
          background: isSelected
            ? "rgba(74,127,165,0.08)"
            : "rgba(255,255,255,0.04)",
          border: open
            ? "0.5px solid rgba(74,127,165,0.6)"
            : isSelected
            ? "0.5px solid rgba(74,127,165,0.35)"
            : "0.5px solid rgba(255,255,255,0.14)",
          color: isSelected ? "#CCCCCC" : "#555555",
          boxShadow: open ? "0 0 0 2px rgba(74,127,165,0.12)" : "none",
        }}
        aria-haspopup="listbox"
        aria-expanded={open}
      >
        <span>{value || "Select your industry"}</span>
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          aria-hidden="true"
          style={{
            color: isSelected ? "#4A7FA5" : "#555555",
            transform: open ? "rotate(180deg)" : "rotate(0deg)",
            transition: "transform 220ms ease",
            flexShrink: 0,
          }}
        >
          <path d="M2 5l5 5 5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      </button>

      {/* Dropdown panel */}
      {open && (
        <div
          role="listbox"
          className="w-full mt-1 py-1 z-50"
          style={{
            background: "#111418",
            border: "0.5px solid rgba(74,127,165,0.3)",
            boxShadow: "0 16px 48px -12px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(74,127,165,0.1)",
          }}
        >
          {INDUSTRY_OPTIONS.map((opt) => {
            const active = value === opt;
            return (
              <button
                key={opt}
                type="button"
                role="option"
                aria-selected={active}
                onClick={() => { onChange(opt); setOpen(false); }}
                className="w-full text-left px-4 py-3 text-[14px] flex items-center justify-between transition-colors"
                style={{
                  color: active ? "#F0F4F8" : "#999999",
                  background: active ? "rgba(74,127,165,0.14)" : "transparent",
                }}
                onMouseEnter={(e) => {
                  if (!active) e.currentTarget.style.background = "rgba(255,255,255,0.04)";
                }}
                onMouseLeave={(e) => {
                  if (!active) e.currentTarget.style.background = "transparent";
                }}
              >
                <span>{opt}</span>
                {active && (
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                    <path d="M1 6l3.5 3.5L11 2" stroke="#4A7FA5" strokeWidth="1.5" strokeLinecap="round" />
                  </svg>
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ================================================================
 * 13 — LEAD MAGNET
 * ================================================================ */
function LeadMagnet({ activeVerticalId, onSelectVertical }) {
  const [email, setEmail] = React.useState("");
  const [firmName, setFirmName] = React.useState("");
  const [businessType, setBusinessType] = React.useState("");
  const [workflowDesc, setWorkflowDesc] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!businessType || !email) return;

    const payload = new URLSearchParams();
    payload.append("email", email);
    payload.append("userGroup", businessType);
    if (firmName) payload.append("firstName", firmName);
    if (workflowDesc) payload.append("notes", workflowDesc);

    try {
      await fetch("https://app.loops.so/api/newsletter-form/cmoy6gff21wqf0ixep8kmx5qx", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: payload.toString(),
      });
    } catch (_) {}

    setSubmitted(true);
  };

  const fieldBase =
    "mt-2 w-full px-4 py-3 rounded-none text-[15px] text-white placeholder:text-white/30 outline-none transition-colors border focus:border-white/60";
  const fieldStyle = {
    background: "#1A1A1A",
    border: "1px solid rgba(255,255,255,0.14)",
  };
  const labelBase = "block text-[11px] uppercase tracking-[0.16em] text-white/50";
  const divider = <hr style={{ borderColor: "rgba(255,255,255,0.1)" }} className="border-t my-8" />;

  return (
    <section id="lead-magnet" className="relative overflow-hidden" style={{ background: "#0A0A0A" }}>
      {/* Same ambient treatment as Final CTA */}
      <div
        aria-hidden="true"
        className="absolute inset-0 opacity-[0.18]"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px)",
          backgroundSize: "64px 64px",
          maskImage:
            "radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%)",
        }}
      />
      <div
        aria-hidden="true"
        className="absolute -top-40 -left-40 w-[520px] h-[520px] rounded-full blur-[90px] opacity-40"
        style={{ background: "radial-gradient(circle, rgba(99,178,255,0.35), transparent 65%)" }}
      />
      <div
        aria-hidden="true"
        className="absolute -bottom-40 -right-40 w-[520px] h-[520px] rounded-full blur-[90px] opacity-30"
        style={{ background: "radial-gradient(circle, rgba(181,143,255,0.35), transparent 65%)" }}
      />
      {/* Top separator from prior section */}
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }} />

      <div className="relative max-w-[1200px] mx-auto px-5 md:px-10 py-14 md:py-28">

        {/* Eyebrow */}
        <div className="flex items-center gap-3 text-[11px] uppercase tracking-[0.18em]" style={{ color: "#4A7FA5" }}>
          <span className="inline-block w-6 h-px" style={{ background: "#4A7FA5" }} aria-hidden="true" />
          <span>Operational audit</span>
        </div>

        {/* Headline */}
        <h2 className="mt-5 text-[28px] md:text-[44px] leading-[1.05] tracking-tightest font-medium max-w-[28ch]" style={{ color: "#F5F5F5" }}>
          Get your operational audit.
        </h2>

        {/* Body */}
        <p className="mt-5 text-[16px] md:text-[17px] leading-[1.65] max-w-[68ch]" style={{ color: "#888888" }}>
          Submit your business type and situation below. Your industry-specific audit PDF arrives instantly — the same diagnostic AEI uses to identify where operations are losing time and revenue. Review it, complete it before your consultation, and book a call when you're ready.
        </p>

        <hr style={{ borderColor: "rgba(255,255,255,0.08)", marginTop: "2rem", marginBottom: "2rem" }} />

        {submitted ? (
          <div className="py-4">
            <div className="text-[11px] uppercase tracking-[0.18em]" style={{ color: "#4A7FA5" }}>
              Audit dispatched
            </div>
            <p className="mt-3 text-[18px] tracking-tighter2" style={{ color: "#F5F5F5" }}>
              The PDF is on the way to {email || "your inbox"}. If it does not arrive within a few minutes, check spam. AEI will review your submission and follow up within 48 hours.
            </p>
          </div>
        ) : (
          <form onSubmit={onSubmit} className="space-y-6">
            {/* Field 1 — Custom industry selector */}
            <IndustrySelect value={businessType} onChange={setBusinessType} />

            {/* Field 2 */}
            <label className="block">
              <span className="block text-[11px] uppercase tracking-[0.16em]" style={{ color: "#888888" }}>Describe the workflow or operational problem you are trying to solve</span>
              <textarea
                rows={4}
                value={workflowDesc}
                onChange={(e) => setWorkflowDesc(e.target.value)}
                placeholder="e.g. I run a print shop and need a system to handle order intake, client follow-up, and production status updates without my team doing it manually."
                style={{ background: "rgba(255,255,255,0.05)", border: "0.5px solid rgba(255,255,255,0.10)", color: "#CCCCCC" }}
                className="mt-2 w-full px-4 py-3 text-[15px] outline-none transition-colors resize-none focus:border-white/30"
              />
            </label>

            <hr style={{ borderColor: "rgba(255,255,255,0.08)" }} />

            {/* Fields 3 + 4 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <label className="block">
                <span className="block text-[11px] uppercase tracking-[0.16em]" style={{ color: "#888888" }}>
                  Email <span style={{ color: "#92400E" }}>*</span>
                </span>
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@yourfirm.com"
                  style={{ background: "rgba(255,255,255,0.05)", border: "0.5px solid rgba(255,255,255,0.10)", color: "#CCCCCC" }}
                  className="mt-2 w-full px-4 py-3 text-[15px] outline-none transition-colors focus:border-white/30"
                />
              </label>
              <label className="block">
                <span className="block text-[11px] uppercase tracking-[0.16em]" style={{ color: "#888888" }}>
                  Firm or business name <span style={{ color: "rgba(255,255,255,0.35)", textTransform: "none", letterSpacing: 0 }}>(optional)</span>
                </span>
                <input
                  type="text"
                  value={firmName}
                  onChange={(e) => setFirmName(e.target.value)}
                  placeholder="Your business name"
                  style={{ background: "rgba(255,255,255,0.05)", border: "0.5px solid rgba(255,255,255,0.10)", color: "#CCCCCC" }}
                  className="mt-2 w-full px-4 py-3 text-[15px] outline-none transition-colors focus:border-white/30"
                />
              </label>
            </div>

            {/* Submit */}
            <button
              type="submit"
              className="w-full h-12 text-[15px] font-medium tracking-tighter2 transition-opacity hover:opacity-90"
              style={{ background: "#FFFFFF", color: "#0A0A0A", border: "none" }}
            >
              Send me the operational audit
            </button>

            {/* Microcopy */}
            <p className="text-[13px] text-center" style={{ color: "rgba(255,255,255,0.35)" }}>
              One PDF. Delivered instantly. Book a consultation when you're ready.
            </p>
          </form>
        )}
      </div>
    </section>
  );
}

/* ================================================================
 * 14 — FINAL CTA
 * ================================================================ */
function FinalCTA({ onBook }) {
  return (
    <section className="relative bg-ink text-white overflow-hidden">
      <div
        aria-hidden="true"
        className="absolute inset-0 opacity-[0.18]"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px)",
          backgroundSize: "64px 64px",
          maskImage:
            "radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%)",
        }}
      />

      <div className="relative max-w-[1200px] mx-auto px-5 md:px-10 py-14 md:py-28 text-center">
        <div className="flex items-center justify-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.18em] text-white/70">
          <span className="inline-block w-6 h-px bg-white/40" aria-hidden="true" />
          <span>Next step</span>
        </div>
        <h2 className="mt-4 text-[22px] md:text-[48px] leading-[1.05] tracking-tightest font-medium max-w-[28ch] mx-auto">
          A 48-hour baseline. A 90-day handoff. One 30-minute consultation
          to determine fit.
        </h2>
        <div className="mt-10 flex flex-col items-stretch sm:items-center sm:flex-row justify-center gap-3 sm:gap-4 w-full sm:w-auto px-0">
          <button
            onClick={onBook}
            className="glass-cta w-full sm:w-auto inline-flex items-center justify-center h-12 px-6 text-[15px] font-medium overflow-hidden"
          >
            <span className="relative z-[1] flex items-center">
              Book a 30-minute consultation
              <svg
                className="ml-2"
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                aria-hidden="true"
              >
                <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </span>
          </button>
          <a
            href="#lead-magnet"
            className="text-[14px] underline-offset-4 hover:underline"
            style={{ color: "rgba(255,255,255,0.55)" }}
          >
            Or request the operational audit
          </a>
        </div>
      </div>
    </section>
  );
}

/* ================================================================
 * 15 — FOOTER
 * ================================================================ */
function Footer() {
  return (
    <footer className="bg-white">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 py-12 md:py-16">
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-rule">
          <a
            href="#top"
            className="text-[20px] font-semibold tracking-tightest text-ink"
            aria-label="AEI — back to top"
          >
            AEI
          </a>
          <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-6 text-[14px] text-muted">
            <a href={`mailto:${SITE_CONFIG.email}`} className="hover:text-ink">
              {SITE_CONFIG.email}
            </a>
            <a
              href={`tel:${SITE_CONFIG.phone.replace(/[^0-9+]/g, "")}`}
              className="hover:text-ink"
            >
              {SITE_CONFIG.phone}
            </a>
          </div>
        </div>
        <div className="mt-6 flex flex-col md:flex-row md:items-center md:justify-between gap-3 text-[13px] text-muted text-left">
          <div>
            AEI, Automated Edge Integration · Phoenix, Arizona · © 2026
          </div>
          <div className="flex items-center gap-5">
            <a href="#" className="hover:text-ink">
              Privacy Policy
            </a>
            <a href="#" className="hover:text-ink">
              Terms of Service
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* Export globals */
/* ================================================================
 * 10 — WHAT AEI DOES NOT DO
 * ================================================================ */
function WhatAeiDoesNotDo() {
  const items = [
    "AEI does not provide SEO, paid advertising, or web design.",
    "AEI does not develop custom software.",
    "AEI does not sell licenses to a platform or product.",
    "AEI does not provide HIPAA compliance consulting or legal services.",
    "AEI does not manage staff, handle hiring, or replace existing roles.",
    "AEI does not retain ownership of deployed workflows past day 90.",
  ];
  return (
    <section className="bg-paper border-b border-rule">
      <div className="max-w-[1200px] mx-auto px-5 md:px-10 py-12 md:py-24">
        <div className="flex items-center gap-3 text-[11px] md:text-[12px] uppercase tracking-[0.16em] text-muted">
          <span className="inline-block w-6 h-px bg-navy" aria-hidden="true" />
          <span>Scope</span>
        </div>
        <h2 className="mt-4 text-[28px] md:text-[40px] leading-[1.05] tracking-tightest font-medium text-ink max-w-[22ch]">
          What AEI does not do.
        </h2>
        <ul className="mt-10 md:mt-14 space-y-3">
          {items.map((item) => (
            <li key={item} className="flex items-start gap-3 py-2 border-t border-rule">
              <svg
                className="mt-[6px] shrink-0 text-muted"
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                aria-hidden="true"
              >
                <path d="M2 6h8" stroke="currentColor" strokeWidth="1.5" />
              </svg>
              <span className="text-[15px] leading-[1.55] text-ink">{item}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

Object.assign(window, {
  FridayReport,
  Pricing,
  EngagementStructure,
  FitCheck,
  Founder,
  FAQ,
  LeadMagnet,
  FinalCTA,
  Footer,
  WhatAeiDoesNotDo,
});
