// pricing-section.jsx — HCP pricing section.
// Tiers (Basic / Growth / Enterprise) + a details block with two selectable styles:
//   variant "A" — borderless fine-print footer
//   variant "B" — credit-math chips + Full-Cycle Hiring callout (default)
// Exports to window: PricingSection. Depends on React + window.HiringCopilotDesignSystem_f7306a (Icon).
(function () {
  const { Icon } = window.HiringCopilotDesignSystem_f7306a;
  const { useEffect, useState } = React;
  const ink = "#0C1B33", primary = "#0D68AC", muted = "#5A6A80", body = "#3A4A63", border = "#DCE8F2", canvas = "#F8FAFC";

  const TIERS = [
    {
      name: "Basic", priceMain: "$199", annualPriceMain: "$167", priceUnit: "/ seat / month",
      lines: ["1,000 monthly credits included", "Up to 5 roles"],
      cta: "Try One Role Free", featured: false,
      included: [
        "Screen up to 1,000 resumes, or unlock up to 200 sourced candidate profiles",
        "Alice AI Account Manager for intake",
        "Chat and voice-to-text intake",
        "Good Fit / Possible Fit recommendations",
        "Standard Excel / CSV export",
        "Shared organization credit pool",
        "Full-Cycle Hiring access",
      ],
    },
    {
      name: "Growth", priceMain: "$799", annualPriceMain: "$667", priceUnit: "/ seat / month",
      lines: ["5,000 monthly credits included", "Unlimited roles"],
      cta: "Try One Role Free", featured: true,
      included: [
        "Screen up to 5,000 resumes, or unlock up to 1,000 sourced candidate profiles",
        "__Everything in Basic",
        "Batch unlock by company, school, or location",
        "Bulk export for paid outputs",
        "API export access",
        "ATS-ready export format",
        "Human AM support for onboarding and workflow questions",
        "Full-Cycle Hiring access",
      ],
    },
    {
      name: "Enterprise", priceMain: "Custom plan", priceUnit: "",
      lines: ["Custom credits, roles, support, and terms"],
      cta: "Contact Sales", featured: false,
      included: [
        "__Everything in Growth",
        "Custom credit package",
        "Custom export templates",
        "Custom API export contract",
        "24/7 Human AM support",
        "Enterprise pilot option",
        "Compliance review support",
        "Custom Full-Cycle Hiring terms",
      ],
    },
  ];

  // Credit math for variant B.
  const CREDIT_CHIPS = [
    { big: "1 credit", sub: "per screened candidate" },
    { big: "5 credits", sub: "per sourced unlock" },
    { big: "$1 = 5", sub: "extra credits" },
  ];
  const CREDIT_FINE = [
    "Credits are shared across the organization.",
  ];
  const CREDIT_RULES = [
    "Credits are shared across the organization.",
    "Resume Screening uses 1 credit per successfully screened candidate.",
    "Candidate Sourcing uses 5 credits per successfully unlocked sourced profile.",
    "Extra credits: $1 = 5 credits.",
  ];
  const FULL_CYCLE = [
    "Available with any active HCP subscription.",
    "Charged separately by success fee; estimate shown before sourcing starts.",
    "Success fee is charged only after a successful hire.",
    "Save up to 80% compared with traditional agency fees.",
  ];

  function Feat({ text }) {
    const meta = text.startsWith("__");
    const label = meta ? text.slice(2) : text;
    return (
      <li style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 13.5, lineHeight: 1.45, color: meta ? ink : body, fontWeight: meta ? 700 : 500 }}>
        <Icon name="check-circle" size={15} color="#16A34A" style={{ flexShrink: 0, marginTop: 2 }} />
        <span style={{ textWrap: "pretty" }}>{label}</span>
      </li>
    );
  }

  function BillingToggle({ billing, setBilling, compact }) {
    const itemStyle = (active) => ({
      border: "none",
      borderRadius: 999,
      background: active ? primary : "transparent",
      color: active ? "#fff" : body,
      padding: compact ? "9px 15px" : "11px 20px",
      fontFamily: "inherit",
      fontSize: compact ? 14 : 15,
      fontWeight: 700,
      cursor: "pointer",
      display: "inline-flex",
      alignItems: "center",
      gap: 8,
      transition: "background 0.16s ease, color 0.16s ease",
    });
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 4, marginTop: 28, padding: 5, borderRadius: 999, border: `1px solid ${border}`, background: "#fff", boxShadow: "0 10px 26px -20px rgba(12,27,51,0.35)" }}>
        <button type="button" onClick={() => setBilling("monthly")} style={itemStyle(billing === "monthly")}>Monthly</button>
        <button type="button" onClick={() => setBilling("annual")} style={itemStyle(billing === "annual")}>
          Annual
          <span style={{ display: "inline-flex", alignItems: "center", borderRadius: 999, padding: compact ? "2px 7px" : "3px 8px", background: billing === "annual" ? "rgba(255,255,255,0.18)" : "#EAF4FB", color: billing === "annual" ? "#fff" : primary, fontSize: compact ? 11 : 12, fontWeight: 800, whiteSpace: "nowrap" }}>Save 16%</span>
        </button>
      </div>
    );
  }

  function TierCard({ t, compact, onMessageAlice, onContactSales, billing }) {
    const handleCta = () => {
      if (t.name === "Basic" || t.name === "Growth") {
        if (typeof onMessageAlice === "function") onMessageAlice();
        return;
      }
      if (t.cta === "Contact Sales") {
        if (typeof onContactSales === "function") onContactSales();
        else if (typeof onMessageAlice === "function") onMessageAlice();
      }
    };
    const annual = billing === "annual" && t.annualPriceMain;
    const priceMain = annual ? t.annualPriceMain : t.priceMain;

    return (
      <div style={{ position: "relative", background: "#fff", borderRadius: 16,
        border: t.featured ? `1.5px solid ${primary}` : `1px solid ${border}`,
        boxShadow: t.featured ? "0 22px 48px -24px rgba(13,104,172,0.40)" : "0 1px 2px rgba(12,27,51,0.04)",
        padding: compact ? "26px 22px" : "30px 28px", display: "flex", flexDirection: "column", height: "100%" }}>
        {t.featured && (
          <span style={{ position: "absolute", top: -12, left: 28, fontSize: 11, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "#fff", background: primary, padding: "5px 12px", borderRadius: 999, whiteSpace: "nowrap" }}>Most popular</span>
        )}
        <div style={{ fontSize: 18, fontWeight: 700, color: ink }}>{t.name}</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, margin: "12px 0 0", flexWrap: "wrap", minHeight: 40 }}>
          <span style={{ fontFamily: "var(--hcp-font-display)", fontSize: compact ? (t.priceUnit ? 34 : 27) : (t.priceUnit ? 38 : 30), fontWeight: 800, letterSpacing: "-0.02em", color: ink, lineHeight: 1 }}>{priceMain}</span>
          {t.priceUnit && <span style={{ fontSize: 14, color: muted, fontWeight: 500 }}>{t.priceUnit}</span>}
        </div>
        <div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 4, minHeight: 44 }}>
          {t.lines.map((l, i) => (
            <div key={i} style={{ fontSize: 13.5, color: i === 0 ? ink : muted, fontWeight: i === 0 ? 700 : 500 }}>{l}</div>
          ))}
        </div>
        <button onClick={handleCta} style={{ marginTop: 20, width: "100%", padding: "12px 18px", borderRadius: 10, fontFamily: "inherit", fontSize: 14.5, fontWeight: 700, cursor: "pointer",
          border: "none",
          background: primary,
          color: "#fff" }}>{t.cta}</button>
        <div style={{ height: 1, background: border, margin: "24px 0 18px" }} />
        <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: "0.06em", textTransform: "uppercase", color: muted, marginBottom: 14 }}>Included</div>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
          {t.included.map((f) => <Feat key={f} text={f} />)}
        </ul>
      </div>
    );
  }

  // ── Variant A — borderless fine-print footer ──────────────────────────────
  function DetailsA({ compact }) {
    const col = (icon, title, items) => (
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
          <Icon name={icon} size={17} color={primary} />
          <h3 style={{ margin: 0, fontSize: 13, fontWeight: 800, letterSpacing: "0.05em", textTransform: "uppercase", color: ink, whiteSpace: "nowrap" }}>{title}</h3>
        </div>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
          {items.map((it) => (
            <li key={it} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 13.5, lineHeight: 1.5, color: body }}>
              <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#B8C6D8", flexShrink: 0, marginTop: 8 }} />
              <span style={{ textWrap: "pretty" }}>{it}</span>
            </li>
          ))}
        </ul>
      </div>
    );
    return (
      <div style={{ marginTop: compact ? 42 : 56, paddingTop: compact ? 30 : 40, borderTop: `1px solid ${border}`, display: "grid", gridTemplateColumns: compact ? "1fr" : "1fr 1fr", gap: compact ? 30 : 64 }}>
        {col("zap", "Credit rules", CREDIT_RULES)}
        {col("user-check", "Full-Cycle Hiring", FULL_CYCLE)}
      </div>
    );
  }

  // ── Variant B — credit-math chips + Full-Cycle callout ────────────────────
  function DetailsB() {
    return (
      <div style={{ marginTop: 28, display: "flex", flexDirection: "column", gap: 20 }}>
        {/* credit math */}
        <div style={{ background: "#fff", border: `1px solid ${border}`, borderRadius: 16, padding: "28px 30px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
            <span style={{ width: 34, height: 34, borderRadius: 9, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "#EEF7FC" }}>
              <Icon name="zap" size={17} color={primary} />
            </span>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: ink }}>How credits work</h3>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {CREDIT_CHIPS.map((c) => (
              <div key={c.big} style={{ background: canvas, border: `1px solid ${border}`, borderRadius: 12, padding: "18px 20px" }}>
                <div style={{ fontFamily: "var(--hcp-font-display)", fontSize: 26, fontWeight: 800, letterSpacing: "-0.02em", color: primary, lineHeight: 1 }}>{c.big}</div>
                <div style={{ fontSize: 13, color: muted, marginTop: 6, fontWeight: 500 }}>{c.sub}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "6px 22px", marginTop: 18 }}>
            {CREDIT_FINE.map((f) => (
              <span key={f} style={{ display: "flex", gap: 7, alignItems: "center", fontSize: 12.5, color: muted }}>
                <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#B8C6D8" }} /> {f}
              </span>
            ))}
          </div>
        </div>

        {/* Full-Cycle Hiring callout — distinct model (success fee) */}
        <div style={{ background: "linear-gradient(180deg,#F2F8FD 0%, #EAF4FB 100%)", border: `1px solid #CFE3F4`, borderRadius: 16, padding: "28px 30px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ width: 34, height: 34, borderRadius: 9, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", background: primary }}>
              <Icon name="user-check" size={17} color="#fff" />
            </span>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: ink }}>Full-Cycle Hiring</h3>
            <span style={{ marginLeft: 4, fontSize: 11, fontWeight: 700, letterSpacing: "0.03em", textTransform: "uppercase", color: primary, background: "#fff", border: `1px solid #CFE3F4`, padding: "3px 9px", borderRadius: 999, whiteSpace: "nowrap" }}>Success fee</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 40px", marginTop: 14 }}>
            {FULL_CYCLE.map((it) => (
              <div key={it} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 13.5, lineHeight: 1.45, color: body }}>
                <Icon name="check-circle" size={15} color="#16A34A" style={{ flexShrink: 0, marginTop: 2 }} />
                <span style={{ textWrap: "pretty" }}>{it}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  function PricingSection({ variant = "B", onMessageAlice, onContactSales }) {
    const [billing, setBilling] = useState("annual");
    const [viewportWidth, setViewportWidth] = useState(() => window.innerWidth || 1200);
    useEffect(() => {
      const onResize = () => setViewportWidth(window.innerWidth || 1200);
      window.addEventListener("resize", onResize);
      return () => window.removeEventListener("resize", onResize);
    }, []);
    const compact = viewportWidth < 760;
    const tablet = viewportWidth >= 760 && viewportWidth < 1080;

    return (
      <section data-screen-label="Pricing section" style={{ background: canvas, padding: compact ? "52px 0" : "84px 0", fontFamily: "var(--hcp-font-sans)", boxSizing: "border-box" }}>
        <div style={{ maxWidth: 1360, margin: "0 auto", padding: compact ? "0 20px" : "0 48px" }}>
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
            <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: "0.09em", textTransform: "uppercase", color: primary }}>Pricing</span>
            <h2 style={{ fontFamily: "var(--hcp-font-display)", fontWeight: 700, letterSpacing: "-0.025em", color: ink, fontSize: compact ? 27 : 44, lineHeight: compact ? 1.16 : 1.1, margin: "12px 0 0" }}>Pricing that scales with your hiring</h2>
            <p style={{ fontSize: compact ? 16 : 18, color: muted, lineHeight: 1.5, margin: "16px auto 0", maxWidth: 580 }}>Start with one role free. Pay only for delivered results.</p>
            <BillingToggle billing={billing} setBilling={setBilling} compact={compact} />
            <div style={{ marginTop: 10, fontSize: compact ? 12.5 : 13, color: muted, fontWeight: 500 }}>Annual plans are billed annually.</div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : tablet ? "repeat(2, minmax(0, 1fr))" : "repeat(3, 1fr)", gap: 24, alignItems: "stretch", margin: compact ? "36px 0 0" : "52px 0 0" }}>
            {TIERS.map((t) => <TierCard key={t.name} t={t} compact={compact} onMessageAlice={onMessageAlice} onContactSales={onContactSales} billing={billing} />)}
          </div>

          {variant === "A" ? <DetailsA compact={compact} /> : <DetailsB />}
        </div>
      </section>
    );
  }

  window.PricingSection = PricingSection;
})();