const DP = window.DuologueDesignSystem_a613c9;

function ProductScreen() {
  const { Hero, Button, SectionHeading, IconTile, Divider, GradientPanel, UspPanel, CtaBand, Icon } = DP;
  const features = [
    ["repeat", "Context carries between touches"],
    ["brain", "Account memory, not rep memory"],
    ["phone-call", "A brief before every call"],
    ["plug", "Two-way with HubSpot and Salesforce"]
  ];
  const industries = [
    ["banknote", "Fintech", "Long cycles, many stakeholders, one thread that must not go cold.", "sky"],
    ["factory", "Industrial", "Reps who sell on the road and write from the car park.", "sand"],
    ["stethoscope", "Health tech", "Compliance-heavy outreach where every claim is logged.", "sage"],
    ["shopping-cart", "Commerce", "High-volume prospecting that still has to sound human.", "lilac"]
  ];
  return <>
    <Hero align="center" eyebrow="Product"
      title="One layer over the outbound you already run"
      lead="Duologue sits beside your inbox, your dialler and your CRM. It reads what happened, and writes what is next."
      actions={<><Button size="lg">Book a demo</Button><Button size="lg" variant="secondary">Read the docs</Button></>} />

    <section className="du-container" style={{ paddingBottom: "var(--section-py)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.3fr) minmax(280px,1fr)", gap: "clamp(32px,5vw,80px)", alignItems: "center" }}>
        <div style={{ borderRadius: "var(--radius-2xl)", overflow: "hidden", boxShadow: "var(--shadow-raised)", background: "var(--white)", padding: 20 }}>
          <SequenceMock />
          <div style={{ height: 20 }} />
          <MemoryMock />
        </div>
        <div>
          {features.map(([icon, label], i) => <div key={label}>
            <div style={{ display: "flex", alignItems: "center", gap: 20, paddingBlock: 26 }}>
              <IconTile name={icon} />
              <span style={{ fontSize: "var(--text-h4)", fontWeight: 500, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>{label}</span>
            </div>
            {i < features.length - 1 && <Divider />}
          </div>)}
        </div>
      </div>
    </section>

    <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--section-py)" }}>
      <div className="du-container">
        <SectionHeading align="center" eyebrow="Industries" title="Built for teams with long, human sales cycles" style={{ marginInline: "auto" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(280px,1fr))", gap: 24, marginTop: 56 }}>
          {industries.map(([icon, name, body, tint]) => (
            <div key={name} style={{ background: "var(--white)", border: "var(--border-hairline)", borderRadius: "var(--radius-card)", overflow: "hidden" }}>
              <div style={{ height: 132, background: "var(--gradient-panel-" + (tint === "mist" ? "sky" : tint) + ")" }} />
              <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <IconTile name={icon} size={36} />
                  <span style={{ fontSize: "var(--text-h4)", fontWeight: 500, color: "var(--text-strong)" }}>{name}</span>
                </div>
                <p style={{ fontSize: "var(--text-body-sm)", color: "var(--text-body)" }}>{body}</p>
                <a href="#" style={{ fontSize: "var(--text-body-sm)", fontWeight: 500, display: "inline-flex", gap: 8, alignItems: "center" }}>Explore {name} <Icon name="arrow-right" size={14} /></a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="du-container" style={{ paddingBlock: "var(--section-py)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(300px,1fr))", gap: 32 }}>
        <UspPanel title="Call prep" tint="mist" linkLabel="See a brief" body="Fifteen minutes before the call, the brief is in your inbox."><CallPrepMock /></UspPanel>
        <UspPanel title="Automations" tint="blush" linkLabel="See automations" body="Routine work fires from a reply, a meeting, or a time you set."><AutomationsMock /></UspPanel>
      </div>
    </section>

    <div className="du-container" style={{ paddingBottom: "var(--section-py)" }}>
      <CtaBand title="See it on your own pipeline"
        actions={<><DP.Button variant="inverse" size="lg">Book a demo</DP.Button><DP.Button variant="outline" size="lg">Talk to sales</DP.Button></>} />
    </div>
  </>;
}
window.ProductScreen = ProductScreen;