// Compliance Adda — home page sections.
const { Button, Card, Badge, Input, Select } = window.ComplianceAddaDesignSystem_3d98ba;

const HOME_HEADLINES = {
  sorted: "Registrations, tax and compliance — sorted.",
  chaos: "Compliance without the chaos",
};

/* ── hero widgets ── */
function nextDue(day, monthOffset = 0) {
  const now = new Date();
  let d = new Date(now.getFullYear(), now.getMonth() + monthOffset, day);
  if (d < now) d = new Date(now.getFullYear(), now.getMonth() + monthOffset + 1, day);
  return d;
}
function CalendarCard() {
  const rows = [
    { day: 7, label: "TDS payment", sub: "Deducted last month" },
    { day: 11, label: "GSTR-1", sub: "Outward supplies" },
    { day: 20, label: "GSTR-3B", sub: "Summary return + tax" },
    { day: 15, label: "Advance tax", sub: "Quarterly instalment", quarterly: true },
  ].map((r) => {
    let d = nextDue(r.day);
    if (r.quarterly) {
      const months = [5, 8, 11, 2];
      const now = new Date();
      let best = null;
      for (const m of months) {
        for (const y of [now.getFullYear(), now.getFullYear() + 1]) {
          const c = new Date(y, m, 15);
          if (c >= now && (!best || c < best)) best = c;
        }
      }
      d = best;
    }
    const days = Math.ceil((d - new Date()) / 86400000);
    return { ...r, date: d, days };
  }).sort((a, b) => a.date - b.date);

  const mon = (d) => d.toLocaleString("en-IN", { month: "short" });
  return (
    <Card style={{ display: "flex", flexDirection: "column", gap: "var(--space-sm)", width: "100%", maxWidth: 420, boxSizing: "border-box" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", fontSize: 22 }}>Your compliance calendar</div>
        <Icon name="calendar" size={20} />
      </div>
      <p style={{ font: "var(--type-body-sm)", color: "var(--color-body)" }}>The next statutory deadlines, tracked live. We file before every one of them.</p>
      <div style={{ display: "flex", flexDirection: "column", marginTop: "var(--space-sm)" }}>
        {rows.map((r) => (
          <div key={r.label} style={{ display: "flex", alignItems: "center", gap: "var(--space-lg)", padding: "var(--space-md) 0", borderTop: "1px solid var(--color-canvas-soft)" }}>
            <div style={{ background: "var(--color-canvas-soft)", borderRadius: "var(--rounded-md)", minWidth: 54, textAlign: "center", padding: "7px 6px", lineHeight: 1.15 }}>
              <div style={{ font: "var(--type-body-md-strong)", fontSize: 18 }}>{r.date.getDate()}</div>
              <div style={{ font: "var(--type-caption)", color: "var(--color-mute)", textTransform: "uppercase", letterSpacing: ".08em" }}>{mon(r.date)}</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ font: "var(--type-body-md-strong)" }}>{r.label}</div>
              <div style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>{r.sub}</div>
            </div>
            <Badge tone={r.days <= 7 ? "warning" : "neutral"}>{r.days <= 1 ? "due now" : "in " + r.days + " days"}</Badge>
          </div>
        ))}
      </div>
      <div style={{ font: "var(--type-caption)", color: "var(--color-mute)", marginTop: "var(--space-xs)" }}>
        Reminders before every deadline — <a href="#contact" style={{ color: "var(--color-ink)" }}>get them free</a>.
      </div>
    </Card>
  );
}

function QuoteCard() {
  const S = window.CA_SERVICES;
  const opts = ["gst-registration", "private-limited-company", "gst-return", "income-tax-return", "trademark-registration", "limited-liability-llp"];
  const [slug, setSlug] = React.useState(opts[0]);
  const d = S[slug];
  return (
    <Card style={{ display: "flex", flexDirection: "column", gap: "var(--space-lg)", width: "100%", maxWidth: 420, boxSizing: "border-box" }}>
      <div style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", fontSize: 22 }}>Get an instant quote</div>
      <Select label="What do you need?" options={opts.map((s) => ({ value: s, label: S[s].title }))} value={slug} onChange={(e) => setSlug(e.target.value)} />
      <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--space-lg)" }}>
        <div>
          <div style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>Professional fee, from</div>
          <div style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)" }}>{d.price}</div>
        </div>
        <div>
          <div style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>Typical timeline</div>
          <div style={{ font: "var(--type-body-md-strong)", marginTop: 4 }}>{d.time}</div>
        </div>
      </div>
      <PillLink href={window.CA_WA(d.title)} style={{ justifyContent: "center" }}>Apply now</PillLink>
      <div style={{ font: "var(--type-caption)", color: "var(--color-mute)", textAlign: "center" }}>No hidden fees. Government charges billed at cost.</div>
    </Card>
  );
}

/* ── hero search ── */
function ServiceSearch() {
  const S = window.CA_SERVICES;
  const [q, setQ] = React.useState("");
  const [focus, setFocus] = React.useState(false);
  const hits = q.trim() ? Object.keys(S).filter((s) => S[s].title.toLowerCase().includes(q.toLowerCase())).slice(0, 6) : [];
  return (
    <div style={{ position: "relative", maxWidth: 520 }}>
      <form onSubmit={(e) => { e.preventDefault(); window.location.href = "services.html?q=" + encodeURIComponent(q); }}
        style={{ display: "flex", gap: "var(--space-sm)", alignItems: "stretch" }}>
        <div style={{ flex: 1, position: "relative" }}>
          <Input placeholder="Search a service — GST, trademark, ITR…" value={q} aria-label="Search services"
            onChange={(e) => setQ(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setTimeout(() => setFocus(false), 150)}
            prefix={<Icon name="search" size={17} color="var(--color-mute)" />} style={{ width: "100%", boxSizing: "border-box" }} />
        </div>
        <Button variant="primary" type="submit" style={{ alignSelf: "stretch" }}>Search</Button>
      </form>
      {focus && hits.length > 0 ? (
        <div style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, right: 0, background: "var(--color-canvas)", border: "1px solid var(--color-ink)", borderRadius: "var(--rounded-lg)", overflow: "hidden", zIndex: 30 }}>
          {hits.map((s) => (
            <a key={s} href={"service.html?s=" + s} style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "11px 16px", font: "var(--type-body-sm)", color: "var(--color-ink)", textDecoration: "none" }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--color-canvas-soft)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
              <span style={{ fontWeight: 600 }}>{S[s].title}</span>
              <span style={{ color: "var(--color-mute)" }}>{S[s].price}</span>
            </a>
          ))}
        </div>
      ) : null}
    </div>
  );
}

/* ── sections ── */
function Hero({ tweaks }) {
  const chips = [
    ["GST registration", "gst-registration"],
    ["Private limited company", "private-limited-company"],
    ["Trademark", "trademark-registration"],
    ["ITR filing", "income-tax-return"],
    ["LLP", "limited-liability-llp"],
  ];
  return (
    <section data-screen-label="Home / hero" className="ca-section" style={{ paddingTop: "var(--space-3xl)" }}>
      <div className="ca-wrap ca-hero-grid">
        <div>
          <Eyebrow>CA, CS &amp; advocate-led · serving all of India</Eyebrow>
          <h1 style={{ font: "var(--type-display-xl)", fontSize: "clamp(42px, 5.4vw, 72px)", lineHeight: 0.98, letterSpacing: "-0.01em" }}>
            {HOME_HEADLINES[tweaks.headline] || HOME_HEADLINES.sorted}
          </h1>
          <p style={{ font: "var(--type-body-lg)", color: "var(--color-body)", maxWidth: 500, margin: "var(--space-xl) 0" }}>
            Company registration, GST, trademarks and tax filing — handled end-to-end by experts, with fixed fees quoted upfront and every deadline tracked for you.
          </p>
          <ServiceSearch />
          <div style={{ display: "flex", gap: "var(--space-sm)", flexWrap: "wrap", marginTop: "var(--space-lg)", alignItems: "center" }}>
            <span style={{ font: "var(--type-caption)", color: "var(--color-mute)" }}>Popular:</span>
            {chips.map(([label, slug]) => (
              <PillLink key={slug} href={"service.html?s=" + slug} variant="tertiary" small style={{ fontSize: 13, padding: "6px 14px" }}>{label}</PillLink>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end" }} className="ca-reveal">
          {tweaks.heroWidget === "quote" ? <QuoteCard /> : <CalendarCard />}
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  const stats = window.CA_STATS || [];
  return (
    <section data-screen-label="Home / stats" style={{ background: "var(--color-canvas)", padding: "var(--space-3xl) 0" }}>
      <div className="ca-wrap ca-grid ca-grid-4" style={{ gap: "var(--space-2xl)" }}>
        {stats.map(([n, label]) => (
          <div key={label} className="ca-reveal">
            <div style={{ font: "var(--type-display-md)", fontSize: "clamp(32px, 3.4vw, 44px)" }}>{n}</div>
            <div style={{ font: "var(--type-body-md)", color: "var(--color-body)", marginTop: "var(--space-xs)" }}>{label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PlatformSection() {
  const feats = [
    { icon: "building", title: "Business incorporation", body: "Pvt Ltd, LLP, OPC and partnership setups — name to certificate, start to finish.", href: "services.html?cat=Startup" },
    { icon: "landmark", title: "Tax advisory", body: "ITR filing, regime planning and notice handling with a review before every filing.", href: "service.html?s=income-tax-return" },
    { icon: "shield-check", title: "Regulatory compliance", body: "GST, ROC and annual filings tracked on a calendar you can actually see.", href: "services.html?cat=GST" },
    { icon: "book-open", title: "Accounting & bookkeeping", body: "Clean monthly books that make every return and audit faster and cheaper.", href: "services.html" },
    { icon: "file-text", title: "Legal documentation", body: "Agreements, deeds and board paperwork drafted by advocates, not templates.", href: "services.html" },
    { icon: "award", title: "Trademark protection", body: "Search, filing, objections and oppositions — your brand defended nationwide.", href: "services.html?cat=Trademark%20%2F%20IPR" },
  ];
  return (
    <section data-screen-label="Home / platform" id="platform" className="ca-section">
      <div className="ca-wrap" style={{ display: "grid", gridTemplateColumns: "1fr", gap: "var(--space-2xl)" }}>
        <div className="ca-split" style={{ alignItems: "flex-start" }}>
          <div>
            <SectionHead
              eyebrow="One platform, every obligation"
              title="Everything your business must register, file and renew"
              sub="Compliance Adda pairs you with a dedicated CA, CS or advocate who owns your case end-to-end. You get one point of contact, one fixed fee, and one dashboard-clear view of where things stand."
              style={{ marginBottom: "var(--space-lg)" }}
            />
            <PillLink href="services.html" variant="tertiary">Browse all services <Icon name="arrow-right" size={16} /></PillLink>
          </div>
          <div className="ca-grid ca-grid-2">
            {feats.slice(0, 2).map((f) => <FeatureCard key={f.title} {...f} />)}
          </div>
        </div>
        <div className="ca-grid ca-grid-4">
          {feats.slice(2).map((f) => <FeatureCard key={f.title} {...f} />)}
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ icon, title, body, href }) {
  return (
    <Card className="ca-reveal" style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)", height: "100%", boxSizing: "border-box" }}>
      <span style={{ width: 46, height: 46, borderRadius: "var(--rounded-md)", background: "var(--color-primary-pale)", display: "grid", placeItems: "center" }}>
        <Icon name={icon} size={23} />
      </span>
      <div style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", fontSize: 20 }}>{title}</div>
      <p style={{ font: "var(--type-body-sm)", color: "var(--color-body)", flex: 1 }}>{body}</p>
      <TextLink href={href} style={{ font: "var(--type-body-sm-strong)" }}>Learn more <Icon name="arrow-right" size={14} /></TextLink>
    </Card>
  );
}

function ProcessSection() {
  const steps = [
    { icon: "search", title: "Select your service", body: "Search or pick what you need. The fee and timeline are on the page — no call required to see a price." },
    { icon: "users", title: "Expert consultation", body: "A dedicated professional calls to confirm your exact case and sends a simple document checklist." },
    { icon: "file-text", title: "Documentation & filing", body: "We draft, verify and file with the department — and chase the approvals so you don't have to." },
    { icon: "circle-check", title: "Completion & support", body: "Certificates delivered, next due dates loaded into your calendar, reminders on us." },
  ];
  return (
    <section data-screen-label="Home / process" id="process" style={{ background: "var(--color-ink)", padding: "72px 0" }}>
      <div className="ca-wrap">
        <SectionHead dark eyebrow="How it works" title="From enquiry to filed, in four steps"
          sub="One dedicated expert handles your case from start to finish. You always know exactly where things stand." />
        <div className="ca-grid ca-grid-4" style={{ gap: "var(--space-xl)" }}>
          {steps.map((s, i) => (
            <div key={s.title} className="ca-reveal" style={{ borderTop: "1px solid #2a2b28", paddingTop: "var(--space-xl)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", color: "var(--color-primary)" }}>{"0" + (i + 1)}</span>
                <Icon name={s.icon} size={22} color="var(--color-primary)" />
              </div>
              <div style={{ font: "var(--type-body-md-strong)", color: "#ffffff", margin: "var(--space-lg) 0 var(--space-sm)" }}>{s.title}</div>
              <p style={{ font: "var(--type-body-sm)", color: "var(--color-canvas-soft)" }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MarketplacePreview() {
  const cats = ["All"].concat(window.CA_CATS);
  const [cat, setCat] = React.useState("All");
  const slugs = Object.keys(window.CA_SERVICES).filter((s) => cat === "All" || window.CA_SERVICES[s].cat === cat);
  const featured = cat === "All" ? window.CA_POPULAR.concat(["limited-liability-llp", "msme-registration"]) : slugs.slice(0, 6);
  return (
    <section data-screen-label="Home / services" id="services" className="ca-section">
      <div className="ca-wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
          <SectionHead eyebrow="Services & pricing" title="Pick a service, see the price upfront"
            sub="Fixed professional fees on every service. Government charges, if any, are billed at actuals — no surprises." style={{ marginBottom: 0 }} />
          <PillLink href="services.html" variant="tertiary">All {Object.keys(window.CA_SERVICES).length} services <Icon name="arrow-right" size={16} /></PillLink>
        </div>
        <div style={{ display: "flex", gap: "var(--space-sm)", flexWrap: "wrap", margin: "var(--space-2xl) 0 var(--space-xl)" }}>
          {cats.map((c) => (
            <Button key={c} variant={cat === c ? "primary" : "tertiary"} onClick={() => setCat(c)} style={{ padding: "7px 16px", fontSize: 14 }}>{c}</Button>
          ))}
        </div>
        <div className="ca-grid ca-grid-3" style={{ gap: "var(--space-lg)" }}>
          {featured.slice(0, 6).map((s) => <div key={s} className="ca-reveal"><ServiceCard slug={s} /></div>)}
        </div>
      </div>
    </section>
  );
}

function AboutSection() {
  const points = [
    "Qualified CAs, CSs and advocates on every case — never a call-centre script",
    "Fixed fees quoted before we start, government charges at actuals",
    "Fully digital process with secure document handling, pan-India",
    "Free deadline reminders for as long as you're a client",
  ];
  return (
    <section data-screen-label="Home / about" id="about" style={{ background: "var(--color-canvas)", padding: "72px 0" }}>
      <div className="ca-wrap ca-split">
        <Card variant="dark" className="ca-reveal" style={{ aspectRatio: "16 / 10.5", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "var(--space-2xl)" }}>
          <div style={{ font: "var(--type-caption)", letterSpacing: ".12em", textTransform: "uppercase", color: "var(--color-canvas-soft)" }}>Watch · 90 seconds</div>
          <button type="button" aria-label="Play video: how a filing works" onClick={() => {}}
            style={{ alignSelf: "center", width: 76, height: 76, borderRadius: "var(--rounded-pill)", background: "var(--color-primary)", border: "none", display: "grid", placeItems: "center", cursor: "pointer" }}>
            <Icon name="play" size={28} fill color="var(--color-on-primary)" style={{ marginLeft: 4 }} />
          </button>
          <div>
            <div style={{ font: "var(--type-display-xs)", letterSpacing: "var(--ls-display-xs)", color: "var(--color-primary)" }}>How a filing works at Compliance Adda</div>
            <div style={{ font: "var(--type-body-sm)", color: "var(--color-canvas-soft)", marginTop: "var(--space-xs)" }}>From your WhatsApp message to the stamped acknowledgment.</div>
          </div>
        </Card>
        <div>
          <SectionHead eyebrow="Who we are" title="Your compliance partner, not just a filing service"
            sub="Compliance Adda is a Delhi-based team of chartered accountants, company secretaries and advocates helping founders, freelancers and MSMEs stay on the right side of every regulator — without the jargon or the runaround." style={{ marginBottom: "var(--space-xl)" }} />
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)" }}>
            {points.map((p) => (
              <div key={p} style={{ display: "flex", gap: "var(--space-md)", alignItems: "flex-start", font: "var(--type-body-md)", color: "var(--color-ink)" }}>
                <Icon name="circle-check" size={20} color="var(--color-positive)" style={{ marginTop: 2 }} /> {p}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhySection() {
  const items = [
    ["users", "CA / CS professional support"],
    ["indian-rupee", "Transparent, fixed pricing"],
    ["lock", "Secure document handling"],
    ["zap", "Fast turnaround"],
    ["circle-check", "End-to-end assistance"],
    ["bell", "Compliance reminders"],
    ["user", "One dedicated expert"],
    ["globe", "100% online, pan-India"],
  ];
  return (
    <section data-screen-label="Home / why" className="ca-section">
      <div className="ca-wrap">
        <SectionHead center eyebrow="Why Compliance Adda" title="Eight reasons founders stay with us" />
        <div className="ca-grid ca-grid-4" style={{ gap: "var(--space-lg)" }}>
          {items.map(([icon, label]) => (
            <Card key={label} className="ca-reveal" style={{ display: "flex", alignItems: "center", gap: "var(--space-md)", padding: "var(--space-lg) var(--space-xl)" }}>
              <span style={{ width: 40, height: 40, borderRadius: "var(--rounded-pill)", background: "var(--color-primary-pale)", display: "grid", placeItems: "center", flex: "none" }}>
                <Icon name={icon} size={19} />
              </span>
              <span style={{ font: "var(--type-body-md-strong)", fontSize: 15 }}>{label}</span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const data = window.CA_TESTIMONIALS || [];  const [vis, setVis] = React.useState(typeof window !== "undefined" && window.innerWidth < 760 ? 1 : 3);
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const onR = () => setVis(window.innerWidth < 760 ? 1 : 3);
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);
  const maxIdx = Math.max(0, data.length - vis);
  const clamped = Math.min(idx, maxIdx);
  const gap = 16;
  return (
    <section data-screen-label="Home / testimonials" id="testimonials" style={{ background: "var(--color-canvas)", padding: "72px 0" }}>
      <div className="ca-wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
          <SectionHead eyebrow="Client stories" title="Trusted by founders across India" style={{ marginBottom: 0 }} />
          <div style={{ display: "flex", gap: "var(--space-sm)" }}>
            <Button variant="tertiary" aria-label="Previous reviews" disabled={clamped === 0} onClick={() => setIdx(Math.max(0, clamped - 1))} style={{ padding: 12, borderRadius: "var(--rounded-pill)" }}><Icon name="chevron-right" size={18} style={{ transform: "rotate(180deg)" }} /></Button>
            <Button variant="tertiary" aria-label="Next reviews" disabled={clamped >= maxIdx} onClick={() => setIdx(Math.min(maxIdx, clamped + 1))} style={{ padding: 12, borderRadius: "var(--rounded-pill)" }}><Icon name="chevron-right" size={18} /></Button>
          </div>
        </div>
        <div style={{ overflow: "hidden", marginTop: "var(--space-2xl)" }}>
          <div style={{ display: "flex", gap: gap, transform: `translateX(calc(-${clamped} * (${100 / vis}% + ${gap / vis}px)))`, transition: "transform 300ms ease" }}>
            {data.map((t) => (
              <Card variant="sage" key={t.who} style={{ flex: `0 0 calc(${100 / vis}% - ${gap * (vis - 1) / vis}px)`, boxSizing: "border-box", display: "flex", flexDirection: "column", gap: "var(--space-md)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <Stars n={t.n} />
                  <Badge tone="neutral">{t.svc}</Badge>
                </div>
                <p style={{ font: "var(--type-body-md)", color: "var(--color-ink)", flex: 1 }}>“{t.text}”</p>
                <div>
                  <div style={{ font: "var(--type-body-md-strong)" }}>{t.who}</div>
                  <div style={{ font: "var(--type-body-sm)", color: "var(--color-mute)" }}>{t.role}</div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ResourcesSection() {
  const posts = window.CA_RESOURCES || [];
  return (
    <section data-screen-label="Home / resources" id="resources" className="ca-section">
      <div className="ca-wrap">
        <SectionHead eyebrow="Resources & updates" title="Know what's changing before it costs you"
          sub="Short, plain-language notes from our desk — no legalese, just what to do and by when." />
        <div className="ca-grid ca-grid-4" style={{ gap: "var(--space-lg)" }}>
          {posts.map((p) => (
            <Card key={p.title} className="ca-reveal" style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)", height: "100%", boxSizing: "border-box" }}>
              <Badge tone="neutral" style={{ alignSelf: "flex-start" }}>{p.tag}</Badge>
              <div style={{ font: "var(--type-body-md-strong)", fontSize: 17, lineHeight: 1.3 }}>{p.title}</div>
              <p style={{ font: "var(--type-body-sm)", color: "var(--color-body)", flex: 1 }}>{p.body}</p>
              <TextLink href={window.CA_WA("a question about: " + p.title)} style={{ font: "var(--type-body-sm-strong)" }}>Ask us about this <Icon name="arrow-right" size={14} /></TextLink>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function PromoBand() {
  return (
    <section data-screen-label="Home / promo" style={{ background: "var(--color-ink)", padding: "72px 0", borderBottom: "1px solid #2a2b28" }}>
      <div className="ca-wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-2xl)", flexWrap: "wrap" }}>
        <h2 style={{ font: "var(--type-display-md)", fontSize: "clamp(32px, 4vw, 48px)", lineHeight: 1.02, color: "var(--color-primary)", maxWidth: 640 }}>
          Switch your compliance to us in one afternoon.
        </h2>
        <div style={{ display: "flex", gap: "var(--space-md)", flexWrap: "wrap" }}>
          <PillLink href={window.CA_WA()}>Talk to an expert</PillLink>
          <PillLink href={window.CA_PHONE_HREF} variant="tertiary" style={{ background: "transparent", color: "var(--color-canvas)", borderColor: "var(--color-canvas)" }}>
            <Icon name="phone" size={16} /> {window.CA_PHONE}
          </PillLink>
        </div>
      </div>
    </section>
  );
}

/* ── app ── */
const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "sorted",
  "heroWidget": "calendar"
}/*EDITMODE-END*/;

function HomeApp() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);
  useReveal();
  return (
    <div>
      <SiteNav active="home" />
      <Hero tweaks={t} />
      <StatsBand />
      <PlatformSection />
      <ProcessSection />
      <MarketplacePreview />
      <AboutSection />
      <WhySection />
      <Testimonials />
      <ResourcesSection />
      <PromoBand />
      <SiteFooter />
      <WaFloat />
      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Headline" value={t.headline} options={["sorted", "chaos"]} onChange={(v) => setTweak("headline", v)} />
        <TweakRadio label="Hero widget" value={t.heroWidget} options={["calendar", "quote"]} onChange={(v) => setTweak("heroWidget", v)} />
      </TweaksPanel>
    </div>
  );
}
window.HomeApp = HomeApp;
