const D = window.DuologueDesignSystem_a613c9;

// Alternating value-prop row. `inverse` styles it for the vibrant blue section
// (white type, glowing card, numbered eyebrow). `flip` puts the visual on the left.
function ValueRow({ index, eyebrow, title, body, points, visual, flip, inverse, link }) {
  const { Icon } = D;
  const eyebrowColor = inverse ? "var(--blue-300)" : "var(--text-brand)";
  const titleColor = inverse ? "var(--text-inverse)" : "var(--text-strong)";
  const bodyColor = inverse ? "rgba(255,255,255,.74)" : "var(--text-body)";
  const pointColor = inverse ? "rgba(255,255,255,.82)" : "var(--text-body)";
  const checkColor = inverse ? "var(--blue-300)" : "var(--blue-700)";
  const copy = (
    <div style={{ maxWidth: 468 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase", color: eyebrowColor, marginBottom: 16, display: "flex", gap: 10, alignItems: "center" }}>
        {index ? <span style={{ color: titleColor, opacity: .85 }}>{index}</span> : null}{eyebrow}
      </div>
      <h3 style={{ fontSize: "clamp(24px,3vw,32px)", lineHeight: 1.15, letterSpacing: "-.01em", color: titleColor }}>{title}</h3>
      <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: bodyColor }}>{body}</p>
      <div style={{ marginTop: 22, display: "grid", gap: 12 }}>
        {points.map((p, i) => (
          <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <Icon name="check" size={16} color={checkColor} style={{ marginTop: 3, flex: "none" }} />
            <span style={{ fontSize: 14, color: pointColor }}>{p}</span>
          </div>
        ))}
      </div>
      {link ? <a href="#" style={{ display: "inline-flex", alignItems: "center", gap: 8, marginTop: 26, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".1em", textTransform: "uppercase", color: inverse ? "var(--text-inverse)" : "var(--text-brand)", borderBottom: "1px solid " + (inverse ? "rgba(255,255,255,.35)" : "var(--blue-300)"), paddingBottom: 4 }}>{link}<Icon name="arrow-right" size={14} color={inverse ? "var(--text-inverse)" : "var(--text-brand)"} /></a> : null}
    </div>
  );
  const art = inverse ? <div style={{ borderRadius: 16, boxShadow: "0 44px 84px -34px rgba(2,14,44,.75)" }}>{visual}</div> : visual;
  return (
    <div className="du-container" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(320px,1fr))", gap: 56, alignItems: "center", paddingBlock: 46, position: "relative", zIndex: 1 }}>
      {flip ? <><div style={{ order: 1 }}>{art}</div><div style={{ order: 2 }}>{copy}</div></> : <>{copy}{art}</>}
    </div>
  );
}

function HomeScreen() {
  const { Hero, Button, Eyebrow, LogoWall, SectionHeading, StatBlock,
    TestimonialCard, FaqItem, Icon } = D;
  return <>
    {/* Scoped overrides: widen the centred hero headline + lead, drop the corner flare */}
    <style>{`
      .du-hero-wide .du-container > div:first-child{max-width:1120px!important}
      .du-hero-wide .du-container > div:first-child > p{max-width:720px!important}
      .du-hero-wide [style*="gradient-flare-soft"]{background:none!important}
    `}</style>

    {/* Hero, centred, over a faint square grid that fades outward */}
    <section className="du-hero-wide" style={{ position: "relative", overflow: "hidden", background: "var(--surface-page)" }}>
      <span aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(to right, rgba(9,72,182,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(9,72,182,.06) 1px, transparent 1px)",
        backgroundSize: "46px 46px",
        WebkitMaskImage: "radial-gradient(120% 88% at 50% 2%, #000 30%, transparent 76%)",
        maskImage: "radial-gradient(120% 88% at 50% 2%, #000 30%, transparent 76%)"
      }} />
      <Hero
        align="center"
        style={{ background: "transparent" }}
        eyebrow="Built for sales teams"
        title={<>Account-native inbox <br />for sales teams</>}
        lead="An AI-first unified sales inbox that knows every account like an insider, and works through them alongside you."
        actions={<>
          <Button size="lg" href="https://try.duologue.co/signup">Try now</Button>
          <Button size="lg" variant="secondary" href="https://try.duologue.co/chat">Book a demo</Button>
        </>}
        visual={<WorkspaceMock />} />
    </section>

    {/* How it works, vibrant blue section, dotted texture, cards float on top */}
    <section id="how-it-works" className="du-grain" style={{ scrollMarginTop: 84, position: "relative", overflow: "hidden", background: "var(--gradient-brand-deep)", color: "var(--text-inverse)", paddingBlock: "var(--section-py)" }}>
      <span aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "radial-gradient(rgba(255,255,255,.11) 1.4px, transparent 1.6px)", backgroundSize: "22px 22px",
        WebkitMaskImage: "linear-gradient(180deg,#000 0%, rgba(0,0,0,.4) 46%, transparent 88%)",
        maskImage: "linear-gradient(180deg,#000 0%, rgba(0,0,0,.4) 46%, transparent 88%)"
      }} />
      <span aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", background: "radial-gradient(58% 80% at 88% -4%, rgba(92,155,220,.4), transparent 60%)" }} />

      <div className="du-container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: 720 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--blue-300)", marginBottom: 18, display: "flex", gap: 10, alignItems: "center" }}>
            <span style={{ width: 6, height: 6, background: "var(--blue-300)" }} />How it works
          </div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(30px,4.2vw,46px)", lineHeight: 1.08, letterSpacing: "var(--tracking-display)", color: "var(--text-inverse)" }}>An inbox that knows the account like an insider</h2>
          <p style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.74)", maxWidth: 560 }}>Duologue does three jobs between your touches, so you show up to every account current, in context, and consistent.</p>
        </div>
      </div>

      <div style={{ marginTop: 28 }}>
        <ValueRow inverse index="01"
          eyebrow="Account signals"
          title="Learns what’s changing at each account, periodically"
          body="Duologue keeps a standing watch on every account, funding, new hires, tooling changes, headcount, launches, and refreshes it on a schedule, not when someone finally remembers to check."
          points={[
            "Watches funding, hiring, tech and expansion signals",
            "Refreshes on a cadence you set, per account",
            "Surfaces the change that matters before your next touch"
          ]}
          link="Explore account signals"
          visual={<SignalsCardMock />} />

        <ValueRow inverse flip index="02"
          eyebrow="Context, not raw data"
          title="Turns account data into context automatically"
          body="A signal on its own is trivia. Duologue maps each change to the objection it answers and drafts the next line from it, no research tab, no blank page, no “let me circle back”."
          points={[
            "Maps every signal to the objection it breaks",
            "Drafts the next touch in your voice",
            "Writes it back to the CRM as context, not noise"
          ]}
          link="Explore auto-context"
          visual={<ContextCardMock />} />

        <ValueRow inverse index="03"
          eyebrow="One coherent thread"
          title="Keeps the thread coherent across multiple channels"
          body="Email, LinkedIn, call notes, Duologue stitches every channel into a single account thread, so your next message never repeats what the buyer already told you somewhere else."
          points={[
            "Unifies email, LinkedIn and calls per account",
            "Carries objections and owners across channels",
            "Survives rep changes, the thread stays with the account"
          ]}
          link="Explore the unified thread"
          visual={<ThreadCardMock />} />
      </div>

      <div className="du-container" style={{ position: "relative", zIndex: 1, marginTop: 40 }}>
        <div style={{ paddingTop: 44, borderTop: "1px solid var(--line-inverse)", display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 40 }}>
          <StatBlock tone="inverse" value="Hourly" label="Account refresh" note="Every watched account, on a schedule." />
          <StatBlock tone="inverse" value="1" label="Thread per account" note="Email, LinkedIn and calls, unified." />
          <StatBlock tone="inverse" value="0" label="Research tabs" note="Context arrives written, not looked up." />
        </div>
      </div>
    </section>

    <section id="testimonials" style={{ scrollMarginTop: 84, paddingBlock: "var(--section-py)" }}>
      <div className="du-container" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(320px,1fr))", gap: 32 }}>
        <TestimonialCard quote="Our reps walk into every account knowing what changed that week." name="Priya Raman" role="VP Sales" company="Northbeam" />
        <TestimonialCard quote="It answers the objection before the buyer raises it. Reply rates followed." name="Dana Okafor" role="Head of Revenue Ops" company="Kestrel" />
      </div>
    </section>

    <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 account signals come from?" answer="Public sources, your CRM, and the conversations already in your inbox. Duologue refreshes them on a schedule, so the context is never stale." defaultOpen />
          <FaqItem question="Does it send on my behalf?" answer="It drafts. You send. Duologue never sends a message you have not read." />
          <FaqItem question="Which channels does it unify?" answer="Email and LinkedIn today, 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>

    <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 them alongside you.</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>
  </>;
}
window.HomeScreen = HomeScreen;