// ============================================================
// SIGNALS · PRICING · FAQ · MARQUEE + FINAL CTA
// ============================================================

// ---------- SIGNALS / PILOT FRAMING --------------------------

function SignalsSection() {
  const theme = window.useActiveTheme();
  const { Section, Eyebrow, AccentPhrase, Reveal } = window;
  const { isMobile } = window.useViewport();

  return (
    <Section id="signals" tone="alt" padding="120px 0" mobilePadding="56px 0">
      <Reveal>
        <div
          style={{
            position: "relative",
            background: `linear-gradient(135deg, ${theme.accent}14 0%, ${theme.accent}05 100%)`,
            border: `1px solid ${theme.accent}40`,
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
            borderRadius: 22,
            padding: isMobile ? "36px 22px" : "60px 56px",
            overflow: "hidden",
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr",
            gap: isMobile ? 28 : 56,
            alignItems: "center",
          }}
        >
          <svg
            aria-hidden
            viewBox="0 0 600 200"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.16, pointerEvents: "none" }}
            preserveAspectRatio="none"
          >
            <path
              d="M0 140 L100 110 L140 130 L240 70 L320 90 L420 50 L520 80 L600 60"
              stroke={theme.accent}
              strokeWidth="1.2"
              fill="none"
              strokeLinecap="round"
            />
          </svg>

          <div style={{ position: "relative" }}>
            <Eyebrow>In pilot</Eyebrow>
            <h2
              style={{
                fontFamily: "'Lexend', sans-serif",
                fontSize: "clamp(26px, 3.8vw, 44px)",
                lineHeight: 1.06,
                fontWeight: 600,
                letterSpacing: -1,
                margin: "0 0 20px 0",
                color: theme.ink,
                textWrap: "balance",
              }}
            >
              Currently in pilot with{" "}
              <AccentPhrase>early customers</AccentPhrase>{" "}
              in neurodiversity AI evaluation and AI governance.
            </h2>
            <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.6, color: theme.sub, margin: "0 0 26px 0", maxWidth: 540 }}>
              We built Shard because we couldn't find a single tool that did rubric-based,
              council-evaluated, audit-ready AI evaluation. So we built it. Reach out if you want
              early access — we're sizing pilots for teams who need the evidence yesterday.
            </p>
            <a
              href="/contact?subject=pilot"
              className="sv-press"
              style={{
                padding: "14px 26px",
                borderRadius: 999,
                background: theme.accent,
                color: theme.onAccent,
                fontSize: 15,
                fontWeight: 600,
                textDecoration: "none",
                boxShadow: `0 10px 28px -12px ${theme.accent}99, inset 0 1px 0 rgba(255,255,255,0.25)`,
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              Request early access →
            </a>
          </div>

          <div
            style={{
              position: "relative",
              background: theme.dark ? "rgba(4,7,14,0.6)" : "rgba(250,246,234,0.8)",
              backdropFilter: "blur(10px)",
              WebkitBackdropFilter: "blur(10px)",
              border: `1px solid ${theme.cardBorder}`,
              boxShadow: "inset 0 1px 0 rgba(255,255,255,0.07)",
              borderRadius: 16,
              padding: isMobile ? "20px 20px" : "26px 28px",
              fontFamily: "'JetBrains Mono', monospace",
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                marginBottom: 22,
                fontSize: 11,
                letterSpacing: 1.4,
                textTransform: "uppercase",
                color: theme.sub,
                fontWeight: 600,
              }}
            >
              <span
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: "50%",
                  background: theme.success,
                  animation: window.motionAllowed() ? "sv-breathe 2.6s ease-in-out infinite" : "none",
                }}
              />
              Pilot status
            </div>
            {[
              ["Active workspaces", "Limited"],
              ["Models supported", "Anthropic · OpenAI · Google · Custom"],
              ["Council size", "Up to 6 members"],
              ["Self-host", "On request"],
              ["Pricing", "Free during pilot"],
            ].map(([k, v], i, arr) => (
              <div
                key={k}
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                  padding: "10px 0",
                  borderBottom: i === arr.length - 1 ? "none" : `1px solid ${theme.cardBorder}`,
                  fontSize: 13,
                  gap: 12,
                }}
              >
                <span style={{ color: theme.sub, whiteSpace: "nowrap" }}>{k}</span>
                <span style={{ color: theme.ink, fontWeight: 500, textAlign: "right" }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

// ---------- PRICING — asymmetric tiers ------------------------

function PricingSection() {
  const theme = window.useActiveTheme();
  const { Section, SectionHeader, SpotlightCard, Reveal } = window;
  const { isMobile } = window.useViewport();

  const tiers = [
    {
      name: "Starter",
      price: "Free",
      sub: "During pilot",
      cta: "Book a demo",
      features: ["1 workspace", "100 test runs / month", "Template rubrics"],
      tone: "default",
    },
    {
      name: "Team",
      price: "Talk to us",
      sub: "Per workspace",
      cta: "Book a demo",
      features: [
        "5 workspaces",
        "1,000 test runs / month",
        "3 AI Council members",
        "Custom certifications",
        "Audit log + SSO (planned)",
      ],
      tone: "featured",
    },
    {
      name: "Enterprise",
      price: "Talk to us",
      sub: "Per organisation",
      cta: "Book a demo",
      features: [
        "Unlimited workspaces",
        "Unlimited test runs",
        "Unlimited Council members",
        "SSO + SCIM",
        "Region pinning (EU / US / on-prem)",
        "Single-tenant deploy",
      ],
      tone: "default",
    },
  ];

  return (
    <Section id="pricing" padding="130px 0" mobilePadding="56px 0">
      <SectionHeader
        eyebrow="Pricing"
        title="Free during"
        accentPart="pilot"
        lede="Plans scale by workspace, evaluation volume, and council usage. Sizing is illustrative while we tune unit costs — talk to us about what fits your team."
        isMobile={isMobile}
      />

      <div
        style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1.15fr 1fr",
          gap: isMobile ? 14 : 20,
          alignItems: "stretch",
        }}
      >
        {tiers.map((t, i) => (
          <Reveal key={t.name} delay={i * 110} style={{ display: "flex", flexDirection: "column" }}>
            <SpotlightCard
              radius={18}
              padding={isMobile ? "26px 22px" : t.tone === "featured" ? "36px 30px" : "30px 26px"}
              style={{
                height: "100%",
                display: "flex",
                flexDirection: "column",
                ...(t.tone === "featured"
                  ? {
                      background: `linear-gradient(180deg, ${theme.accent}16, ${theme.accent}05)`,
                      border: `1px solid ${theme.accent}55`,
                    }
                  : {}),
              }}
            >
              <div style={{ display: "flex", flexDirection: "column", gap: 16, height: "100%" }}>
                {t.tone === "featured" && (
                  <div
                    style={{
                      alignSelf: "flex-start",
                      padding: "4px 10px",
                      background: theme.accent,
                      color: theme.onAccent,
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 10.5,
                      letterSpacing: 1.4,
                      textTransform: "uppercase",
                      fontWeight: 600,
                      borderRadius: 999,
                    }}
                  >
                    Most teams
                  </div>
                )}
                <div>
                  <div
                    style={{
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 11,
                      letterSpacing: 1.4,
                      textTransform: "uppercase",
                      color: t.tone === "featured" ? theme.accent : theme.sub,
                      fontWeight: 600,
                      marginBottom: 6,
                    }}
                  >
                    {t.name}
                  </div>
                  <div
                    style={{
                      fontFamily: "'Lexend', sans-serif",
                      fontSize: isMobile ? 28 : t.tone === "featured" ? 38 : 32,
                      fontWeight: 600,
                      letterSpacing: -1,
                      color: theme.ink,
                      lineHeight: 1,
                      marginBottom: 4,
                    }}
                  >
                    {t.price}
                  </div>
                  <div style={{ fontSize: 12.5, color: theme.mute, fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.2 }}>
                    {t.sub}
                  </div>
                </div>

                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9, flex: 1 }}>
                  {t.features.map((f) => (
                    <li key={f} style={{ fontSize: 14, lineHeight: 1.5, color: theme.sub, display: "flex", alignItems: "flex-start", gap: 10 }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ marginTop: 3, flexShrink: 0 }}>
                        <path d="M4 12l5 5L20 6" stroke={theme.accent} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>

                <a
                  href={`/contact?subject=demo-${t.name.toLowerCase()}`}
                  className="sv-press"
                  style={{
                    padding: "13px 22px",
                    borderRadius: 999,
                    background: t.tone === "featured" ? theme.accent : "transparent",
                    color: t.tone === "featured" ? theme.onAccent : theme.ink,
                    border: t.tone === "featured" ? "none" : `1px solid ${theme.chipBorder}`,
                    fontSize: 14.5,
                    fontWeight: 600,
                    textDecoration: "none",
                    textAlign: "center",
                    boxShadow: t.tone === "featured" ? `inset 0 1px 0 rgba(255,255,255,0.25)` : "none",
                  }}
                >
                  {t.cta} →
                </a>
              </div>
            </SpotlightCard>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ---------- FAQ ----------------------------------------------

function FAQItem({ q, a, isOpen, onClick }) {
  const theme = window.useActiveTheme();
  const { isMobile } = window.useViewport();
  return (
    <div
      style={{
        borderBottom: `1px solid ${theme.cardBorder}`,
        padding: isMobile ? "18px 0" : "22px 0",
      }}
    >
      <button
        onClick={onClick}
        aria-expanded={isOpen}
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 16,
          width: "100%",
          padding: 0,
          background: "transparent",
          border: "none",
          color: theme.ink,
          fontFamily: "'Lexend', sans-serif",
          fontSize: isMobile ? 16 : 18,
          fontWeight: 500,
          letterSpacing: -0.3,
          cursor: "pointer",
          textAlign: "left",
          lineHeight: 1.3,
        }}
      >
        <span style={{ flex: 1 }}>{q}</span>
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: 28,
            height: 28,
            borderRadius: "50%",
            border: `1px solid ${isOpen ? theme.accent : theme.chipBorder}`,
            color: theme.accent,
            fontSize: 20,
            lineHeight: 1,
            flexShrink: 0,
            transition: "transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease",
            transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
          }}
        >
          +
        </span>
      </button>
      <div
        style={{
          overflow: "hidden",
          maxHeight: isOpen ? 600 : 0,
          transition: "max-height .45s cubic-bezier(.16,1,.3,1)",
        }}
      >
        <p style={{ fontSize: 15, lineHeight: 1.65, color: theme.sub, margin: "16px 36px 0 0", maxWidth: 720 }}>
          {a}
        </p>
      </div>
    </div>
  );
}

function FAQSection() {
  const theme = window.useActiveTheme();
  const { Section, Eyebrow, AccentPhrase, Reveal } = window;
  const { isMobile } = window.useViewport();
  const [open, setOpen] = React.useState(0);

  const faq = [
    {
      q: "Does Shard host the AI models?",
      a: "No. You bring your own API keys (Anthropic, OpenAI, Google, or any custom endpoint). Shard orchestrates the calls and stores the evaluations — never the model weights, never your scenarios as training data.",
    },
    {
      q: "Can I use Shard for ISO 42001 / NIST AI RMF / EU AI Act compliance?",
      a: "The evaluation evidence Shard produces directly maps to AI Management System controls around verification, validation, monitoring, and event logging. Compliance teams use Shard's reports as audit evidence — we frame it as evidence that maps to those frameworks, not certified compliance in itself.",
    },
    {
      q: "Do I need to write my rubric from scratch?",
      a: "No — Shard ships template frameworks (neurodiversity, accessibility, compliance, general-purpose) you can clone and customise. Or import your own from CSV / JSON.",
    },
    {
      q: "How does the AI Council prevent bias?",
      a: "Each council member scores independently before seeing peers. Member identities are anonymised during deliberation. The platform flags self-scoring bias — e.g. a Claude member rating a Claude response — and weights the consensus accordingly.",
    },
    {
      q: "Can I self-host?",
      a: "Yes, on Enterprise. Single-tenant deployment with full source access, region-locked storage, and on-prem deployment supported.",
    },
  ];

  return (
    <Section id="faq" tone="alt" padding="120px 0" mobilePadding="56px 0">
      <div
        style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1.6fr",
          gap: isMobile ? 24 : 80,
          alignItems: "start",
        }}
      >
        <Reveal>
          <Eyebrow>FAQ</Eyebrow>
          <h2
            style={{
              fontFamily: "'Lexend', sans-serif",
              fontSize: "clamp(28px, 4.2vw, 52px)",
              lineHeight: 1.04,
              fontWeight: 600,
              letterSpacing: -1.2,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Questions <AccentPhrase>worth answering</AccentPhrase>.
          </h2>
        </Reveal>
        <div>
          {faq.map((item, i) => (
            <Reveal key={i} delay={i * 70}>
              <FAQItem
                q={item.q}
                a={item.a}
                isOpen={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
              />
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ---------- FINAL CTA — marquee + asymmetric close -------------

function FinalCTA() {
  const theme = window.useActiveTheme();
  const { Section, AccentPhrase, Marquee, Reveal } = window;
  const { isMobile } = window.useViewport();

  return (
    <React.Fragment>
      <Marquee
        items={["Rubrics", "Scenarios", "Councils", "Evidence", "Audit trails", "Certification"]}
        speed={34}
        style={{ borderTop: `1px solid ${theme.cardBorder}`, borderBottom: `1px solid ${theme.cardBorder}` }}
      />

      <Section id="demo" padding="120px 0 130px" mobilePadding="64px 0">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "1.5fr 1fr",
            gap: isMobile ? 28 : 72,
            alignItems: "center",
          }}
        >
          <Reveal>
            <h2
              style={{
                fontFamily: "'Lexend', sans-serif",
                fontSize: "clamp(32px, 4.8vw, 62px)",
                lineHeight: 1.02,
                fontWeight: 600,
                letterSpacing: -1.6,
                margin: "0 0 24px 0",
                color: theme.ink,
                textWrap: "balance",
              }}
            >
              Ready to know how good your AI <AccentPhrase>really is</AccentPhrase>?
            </h2>
            <p style={{ fontSize: isMobile ? 17 : 19, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 560 }}>
              A 20-minute demo will show you a real rubric, a real council deliberation, and an
              audit trail your compliance team will actually use.
            </p>
          </Reveal>

          <Reveal delay={140}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: isMobile ? "flex-start" : "stretch" }}>
              <a
                href="/contact?subject=demo"
                className="sv-press"
                style={{
                  padding: "18px 34px",
                  borderRadius: 999,
                  background: theme.accent,
                  color: theme.onAccent,
                  fontSize: 16,
                  fontWeight: 600,
                  textDecoration: "none",
                  boxShadow: `0 14px 36px -12px ${theme.accent}99, inset 0 1px 0 rgba(255,255,255,0.25)`,
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 8,
                }}
              >
                Book a demo →
              </a>
              <div
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11.5,
                  letterSpacing: 0.4,
                  color: theme.mute,
                  textAlign: isMobile ? "left" : "center",
                }}
              >
                20 minutes · a person, not a deck
              </div>
            </div>
          </Reveal>
        </div>
      </Section>
    </React.Fragment>
  );
}

window.SignalsSection = SignalsSection;
window.PricingSection = PricingSection;
window.FAQSection = FAQSection;
window.FinalCTA = FinalCTA;