const DR = window.DuologueDesignSystem_a613c9;

function PricingScreen() {
  const { Hero, PricingCard, SectionHeading, FaqItem, CtaBand, Button, Input, Select, Checkbox, Divider } = DR;
  const [ok, setOk] = React.useState(true);
  return <>
    <Hero align="center" eyebrow="Pricing" title="Priced per rep, not per email"
      lead="Every plan includes shared account memory. No sending limits, no per-seat upsell for the useful part." />

    <section className="du-container" style={{ paddingBottom: "var(--section-py)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 24, alignItems: "start" }}>
        <PricingCard name="Starter" price="$39" description="For a founder still doing their own outbound."
          cta="Start free" features={["1 seat", "Sequencing + follow-up drafts", "Gmail & Outlook", "30-day memory"]} />
        <PricingCard name="Scale" price="$89" featured description="For a full outbound team with shared accounts."
          cta="Book a demo" features={["Unlimited seats", "Shared account memory", "Call prep briefs", "HubSpot & Salesforce two-way", "Automations"]} />
        <PricingCard name="Enterprise" price="Talk to us" cadence="" description="For regulated teams and multi-region data."
          cta="Contact sales" features={["SSO & SCIM", "Regional data residency", "Custom retention", "Named support"]} />
      </div>
    </section>

    <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--section-py)" }}>
      <div className="du-container" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(320px,1fr))", gap: 48 }}>
        <SectionHeading eyebrow="Talk to us" title="Tell us how your team sells"
          lead="We will show you Duologue running on one of your own quiet threads." />
        <div style={{ background: "var(--white)", border: "var(--border-hairline)", borderRadius: "var(--radius-card)", padding: 32, display: "grid", gap: 18 }}>
          <Input id="p-email" label="Work email" placeholder='For example, "amal@duologue.com"' />
          <Select id="p-size" label="Outbound reps" options={["Just me", "2–10", "11–50", "50+"]} />
          <Select id="p-crm" label="CRM" options={["HubSpot", "Salesforce", "Pipedrive", "None yet"]} />
          <Checkbox id="p-news" checked={ok} onChange={e => setOk(e.target.checked)} label="Send me the weekly outbound teardown" />
          <Divider />
          <Button fullWidth size="lg">Book a demo</Button>
        </div>
      </div>
    </section>

    <section className="du-container" style={{ paddingBlock: "var(--section-py)", display: "grid", gridTemplateColumns: "minmax(240px,1fr) minmax(0,2fr)", gap: 48 }}>
      <SectionHeading eyebrow="Billing" title="The small print, in plain words" />
      <div>
        <FaqItem question="Can I change plan mid-term?" answer="Yes, at any point. We prorate the difference on the next invoice." defaultOpen />
        <FaqItem question="Is there a sending limit?" answer="No. We price on reps, because that is what changes the cost of running the service." />
        <FaqItem question="What happens to memory if we leave?" answer="You export it. Every fact Duologue learned belongs to your CRM record, not to us." />
      </div>
    </section>

    <div className="du-container" style={{ paddingBottom: "var(--section-py)" }}>
      <CtaBand title="Twenty minutes, your own inbox"
        actions={<><DR.Button variant="inverse" size="lg">Book a demo</DR.Button><DR.Button variant="outline" size="lg">Start free</DR.Button></>} />
    </div>
  </>;
}
window.PricingScreen = PricingScreen;