const DS_SECTIONS = window.DuologueDesignSystem_a613c9;

/* Sections shared by more than one page (home, demo). Each page loads this file before
   its own screen-*.jsx and renders them from window. */

function FaqSection() {
  const { SectionHeading, FaqItem } = DS_SECTIONS;
  return (
    <section id="faq" style={{ scrollMarginTop: 84, background: "var(--surface-sunken)", paddingBlock: "var(--section-py)" }}>
      <div className="du-container du-split" style={{ display: "grid", gridTemplateColumns: "minmax(240px,1fr) minmax(0,2fr)", gap: 48 }}>
        <SectionHeading eyebrow="Questions" title="Before you ask" />
        <div>
          <FaqItem question="Where do the facts in a draft come from?" answer="Public sources, the buyer’s own words already in your inbox, and your notes. Every fact is cited with the date it was read, and stale ones are flagged before you send." defaultOpen />
          <FaqItem question="Does it send on my behalf?" answer="It drafts. You send, or schedule it for the moment it should land. Duologue never sends a message you have not read." />
          <FaqItem question="Which channels does it unify?" answer="Email and LinkedIn today, including messages, connection requests and InMails, with call notes pulled in from your dialer. One thread per account, whatever the channel." />
          <FaqItem question="What happens when a rep leaves?" answer="The account thread and its objections stay. The next rep opens with the full context, not a blank page." />
          <FaqItem question="Where does our data live?" answer="Your own region, encrypted at rest, never used to train shared models." />
        </div>
      </div>
    </section>
  );
}

function CtaBlock() {
  const { Eyebrow, Button } = DS_SECTIONS;
  return (
    <div className="du-container" style={{ paddingBlock: "var(--section-py)" }}>
      <div style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-2xl)", background: "var(--blue-700)", padding: "clamp(44px,6vw,88px)" }}>
        <span aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", backgroundImage: "linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px)", backgroundSize: "34px 34px" }} />
        <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 22, alignItems: "center", textAlign: "center" }}>
          <Eyebrow bullets="both" tone="inverse">Built for sales teams</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--text-display-2)", lineHeight: 1.04, letterSpacing: "var(--tracking-display)", color: "var(--white)", maxWidth: 900, margin: 0 }}>Account-native inbox for sales teams</h2>
          <p style={{ color: "rgba(255,255,255,.8)", fontSize: "var(--text-body-lg)", maxWidth: 620 }}>An AI-first unified sales inbox that knows every account like an insider, and works through every touch between your dial blocks, in minutes.</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center", marginTop: 8 }}>
            <Button variant="inverse" size="lg" href="https://try.duologue.co/signup">Try now</Button>
            <Button variant="outline" size="lg" href="https://try.duologue.co/chat">Book a demo</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FaqSection, CtaBlock });