/* global React, VmNav, VmFooter, VmPhoto, VmQuote, VmPartnerLogos, VmStat, VmIcon, VmCard */
const { Fragment } = React;

function PartnersHero() {
  return (
    <header className="vm-section" style={{ paddingBottom: "clamp(48px, 6vw, 80px)" }}>
      <div className="vm-container">
        <div className="vm-grid" style={{ alignItems: "center" }}>
          <div className="vm-col-7" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <span className="vm-eyebrow">For nonprofits doing financial empowerment work</span>
            <h1 className="vm-display">Spend less time on&nbsp;paperwork. More time supporting clients.</h1>
            <p className="vm-lede">
              Streamline ITIN, tax, and financial empowerment workflows so your staff can go deeper with every client.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 6, flexWrap: "wrap" }}>
              <a href="https://calendly.com/growwithvesta/team" className="vm-btn vm-btn-primary vm-btn-lg">Talk to our team →</a>
              <a href="#how" className="vm-btn vm-btn-secondary vm-btn-lg">See how it works ↓</a>
            </div>
          </div>
          <div className="vm-col-5 vm-hero-img-wrap" style={{ display: "flex", alignItems: "center" }}>
            <img
              src="hero-photo.png"
              alt="Case manager working with a client at a nonprofit office"
              className="vm-hero-img"
              style={{
                width: "100%",
                height: "clamp(300px, 38vw, 500px)",
                borderRadius: 16,
                display: "block",
                objectFit: "cover",
                objectPosition: "center top",
              }}
            />
          </div>
        </div>
      </div>
    </header>
  );
}

function PartnersStats() {
  return (
    <section className="vm-section-tight vm-section-orange" style={{ position: "relative", overflow: "hidden" }}>
      <div className="vm-container">
        <div className="vm-grid">
          <div className="vm-col-3"><VmStat num="3" lbl="Nonprofit partners" /></div>
          <div className="vm-col-3"><VmStat num="72" lbl="ITIN clients supported" /></div>
          <div className="vm-col-3"><VmStat num="280" lbl="ITIN partner call attendees" /></div>
          <div className="vm-col-3"><VmStat num="50%" lbl="Estimated time saved per client" /></div>
        </div>
      </div>
    </section>
  );
}

function PartnersWhat() {
  const [open, setOpen] = React.useState(() => new Set());
  const toggle = (i) => setOpen((prev) => {
    const next = new Set(prev);
    if (next.has(i)) next.delete(i); else next.add(i);
    return next;
  });
  const items = [
    {
      num: "01",
      title: "ITIN & tax processing",
      body: "Mobile intake, W-7 auto-generated, remote doc verification by Certified Acceptance Agents. Clients never mail a passport.",
    },
    {
      num: "02",
      title: "Schedule C prep",
      body: "Self-employed clients arrive ready. Expense summaries built before appointments, so 45-minute sessions stay 45 minutes.",
    },
    {
      num: "03",
      title: "Staff training & tools",
      body: "On-platform training, scheduling, and intake optimization. Give your team what they need to do their best work.",
    },
    {
      num: "04",
      title: "Custom partner portal",
      body: "A portal with your unique link. Your brand on the experience your clients trust, configured for how your team works.",
    },
    {
      num: "05",
      title: "Banking & savings",
      body: "Connect clients to ITIN-friendly banking by ZIP. Automated savings setup. A tax return is step one, not the finish line.",
    },
    {
      num: "06",
      title: "Impact reporting",
      body: "Better outcomes data makes your program more fundable. Formatted ready for grant narratives and board reports.",
    },
  ];
  return (
    <section className="vm-section vm-section-black" id="how" style={{ paddingBottom: "clamp(64px, 8vw, 120px)" }}>
      <div className="vm-container">
        {/* Header — full width */}
        <div
          style={{
            paddingBottom: "clamp(48px, 5vw, 80px)",
            borderBottom: "1px solid rgba(255,255,255,0.15)",
            marginBottom: "clamp(32px, 4vw, 56px)",
          }}
        >
          <span className="vm-eyebrow">What partners get</span>
          <h2 className="vm-display" style={{ marginTop: 14, color: "#fff", fontSize: "clamp(28px, 3.6vw, 46px)" }}>
            Everything your team needs to reach more people.
          </h2>
          <p className="vm-lede" style={{ marginTop: 18, maxWidth: "60ch" }}>
            One platform. Every tool your program needs, from the first client intake through tax preparation to the final grant report.
          </p>
          <div style={{ marginTop: 28 }}>
            <a href="#assessment" className="vm-btn vm-btn-on-black vm-btn-lg">
              Take the assessment →
            </a>
          </div>
        </div>

        {/* Feature rows — collapsed by default, click to expand */}
        <div className="vm-feat-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 clamp(32px, 4vw, 80px)" }}>
          {items.map((it, i) => {
            const isOpen = open.has(i);
            return (
              <div
                key={it.num}
                style={{
                  borderBottom: "1px solid rgba(255,255,255,0.12)",
                }}
              >
                <button
                  type="button"
                  onClick={() => toggle(i)}
                  aria-expanded={isOpen}
                  style={{
                    all: "unset",
                    boxSizing: "border-box",
                    cursor: "pointer",
                    width: "100%",
                    display: "grid",
                    gridTemplateColumns: "48px 1fr 24px",
                    gap: "0 20px",
                    padding: "clamp(20px, 2.5vw, 32px) 0",
                    alignItems: "start",
                  }}
                >
                  <span
                    style={{
                      fontSize: 11,
                      fontWeight: 700,
                      color: "var(--vesta-orange)",
                      letterSpacing: "0.08em",
                      paddingTop: 5,
                      lineHeight: 1,
                    }}
                  >
                    {it.num}
                  </span>
                  <h3 style={{ margin: 0, fontSize: "clamp(18px, 1.5vw, 22px)", fontWeight: 700, color: "#fff", letterSpacing: "-0.02em", lineHeight: 1.1 }}>
                    {it.title}
                  </h3>
                  <span
                    aria-hidden="true"
                    style={{
                      fontSize: 22,
                      lineHeight: 1,
                      color: "rgba(255,255,255,0.6)",
                      transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                      transition: "transform 200ms cubic-bezier(0.22,1,0.36,1)",
                      paddingTop: 2,
                      justifySelf: "end",
                    }}
                  >
                    +
                  </span>
                </button>
                {isOpen && (
                  <p
                    className="vm-body"
                    style={{
                      margin: 0,
                      paddingLeft: 68,
                      paddingBottom: "clamp(20px, 2.5vw, 32px)",
                      color: "rgba(255,255,255,0.65)",
                      lineHeight: 1.5,
                    }}
                  >
                    {it.body}
                  </p>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function PartnersHow() {
  const steps = [
    {
      n: "01",
      label: "Prepare",
      title: "Tax & ITIN Processing",
      tagline: "Clients arrive ready. Your team focuses on people, not paperwork.",
      features: [
        "Mobile-first digital intake",
        "Schedule C client prep",
        "Remote doc verification by CAA",
        "W-7 auto-generation",
      ],
      note: "Clients never mail a passport.",
    },
    {
      n: "02",
      label: "Equip",
      title: "Staff Training & Tools",
      tagline: "Give your team what they need to do their best work.",
      features: [
        "On-platform training",
        "Scheduling and intake optimization",
        "Custom partner portal with your unique link",
      ],
      note: "Designed for the way nonprofit teams actually work.",
    },
    {
      n: "03",
      label: "Empower",
      title: "Financial Empowerment",
      tagline: "A tax return is step one, not the finish line.",
      features: [
        "ITIN-friendly banking by ZIP",
        "Automated savings setup",
        "Retirement account referrals",
        "Long-term financial pathways",
      ],
    },
  ];
  return (
    <section className="vm-section vm-section-alt" id="onboarding">
      <div className="vm-container">
        {/* Header — full width */}
        <div style={{ maxWidth: "60ch" }}>
          <span className="vm-eyebrow">How it works</span>
          <h2 className="vm-h1" style={{ marginTop: 14 }}>Prepare. Equip. Empower.</h2>
          <p className="vm-lede" style={{ marginTop: 18 }}>
            One platform. Three ways to serve more people, so you spend more time supporting clients and less on paperwork.
          </p>
          <div style={{ marginTop: 28 }}>
            <a href="https://calendly.com/growwithvesta/team" className="vm-btn vm-btn-primary">Talk to our team →</a>
          </div>
        </div>

        {/* Three columns below */}
        <ol
          className="vm-how-cols"
          style={{
            listStyle: "none", padding: 0,
            marginTop: "clamp(48px, 6vw, 80px)",
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: "clamp(24px, 3vw, 48px)",
          }}
        >
          {steps.map((s) => (
            <li
              key={s.n}
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 12,
                paddingTop: 24,
                borderTop: "1px solid var(--vesta-gray-2)",
              }}
            >
              <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: "var(--vesta-orange)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{s.label}</span>
                <span style={{ fontSize: 12, fontWeight: 700, color: "var(--vesta-gray-3)" }}>{s.n}</span>
              </div>
              <h4 className="vm-h3" style={{ margin: 0 }}>{s.title}</h4>
              <p style={{ margin: 0, fontSize: 15, fontWeight: 500, color: "var(--vesta-black)", fontStyle: "italic" }}>{s.tagline}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: "4px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
                {s.features.map((f) => (
                  <li
                    key={f}
                    style={{
                      display: "grid",
                      gridTemplateColumns: "16px 1fr",
                      gap: 10,
                      fontSize: 14,
                      color: "var(--vesta-gray-4)",
                      lineHeight: 1.45,
                    }}
                  >
                    <span aria-hidden="true" style={{ color: "var(--vesta-orange)", fontWeight: 700, lineHeight: 1.45 }}>✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              {s.note && (
                <p style={{ margin: "4px 0 0", fontSize: 13, color: "var(--vesta-gray-3)", fontStyle: "italic" }}>
                  {s.note}
                </p>
              )}
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function PartnersTestimonial() {
  return (
    <section className="vm-section vm-section-alt">
      <div className="vm-container">
        <div className="vm-grid" style={{ alignItems: "center", gap: "clamp(40px, 5vw, 80px)" }}>

          {/* Image */}
          <div className="vm-col-5">
            <img
              src="hartwick.png"
              alt="Lee from Hartwick VITA with a client"
              className="vm-testimonial-img"
              style={{
                width: "100%",
                aspectRatio: "1 / 1",
                objectFit: "cover",
                objectPosition: "center top",
                borderRadius: 16,
                display: "block",
              }}
            />
          </div>

          {/* Story */}
          <div className="vm-col-7" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <span className="vm-eyebrow">Partner story</span>

            {/* Pull quote */}
            <p style={{
              margin: 0,
              fontSize: "clamp(24px, 2.8vw, 38px)",
              fontWeight: 400,
              letterSpacing: "-0.025em",
              lineHeight: 1.12,
              color: "var(--vesta-black)",
            }}>
              "You are really saving the whole community."
            </p>

            {/* Attribution */}
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <span style={{ fontSize: 15, fontWeight: 700, color: "var(--vesta-black)" }}>
                Hartwick VITA/TCE &amp; Upstate Caring Partners
              </span>
              <span style={{ fontSize: 13, color: "var(--vesta-gray-3)", letterSpacing: "0.01em" }}>
                ITIN + W-7 Processing · Refugee Community · Utica, NY
              </span>
            </div>

            {/* Divider */}
            <div style={{ width: 40, height: 2, background: "var(--vesta-orange)", borderRadius: 99 }} />

            {/* Story body */}
            <p className="vm-body" style={{ margin: 0, maxWidth: "52ch", color: "var(--vesta-gray-4)", lineHeight: 1.65 }}>
              Refugee families. 14+ languages. IRS appointments nearly impossible to schedule. With Vesta,
              Lee's team could process ITIN applications digitally: documents scanned, W-7s populated,
              families served. <em style={{ color: "var(--vesta-black)", fontStyle: "normal" }}>"That's really very helpful. It's easy to scan a document — documents is no problem."</em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function PartnersResources() {
  const items = [
    {
      tag: "Guide · CAA Certification",
      title: "How to become a Certified Acceptance Agent",
      body: "What a CAA credential unlocks, who qualifies, and how to add ITIN certification to your organization's existing tax program.",
      cta: "Read guide",
      href: "/partners/guides/becoming-a-caa.html",
    },
    {
      tag: "Guide · Operations",
      title: "The ITIN workflow: from intake to issuance",
      body: "A step-by-step map of every stage in an ITIN application — with time estimates, common bottlenecks, and where Vesta reduces the load.",
      cta: "Read guide",
      href: "/partners/guides/itin-workflow.html",
    },
    {
      tag: "Community Call · Free",
      title: "Bi-monthly ITIN and tax calls",
      body: "Peer learning for nonprofits and CAAs. Case discussions, policy updates, open Q&A. Next session with our IRS Acceptance Agent team.",
      cta: "Register for next call",
      href: "https://codeforamerica.zoom.us/meeting/register/XYAj2jn9Qoi_M-iZBHtQmw#/registration",
    },
  ];
  return (
    <section className="vm-section">
      <div className="vm-container">
        {/* Header — full width */}
        <div style={{ marginBottom: "clamp(48px, 6vw, 80px)" }}>
          <span className="vm-eyebrow">Partner resources</span>
          <h2 className="vm-h1" style={{ marginTop: 14 }}>Free tools we offer to get your program started.</h2>
          <p className="vm-lede" style={{ marginTop: 18, maxWidth: "60ch" }}>
            Before you commit to anything, we want your team to have what it needs. These are free, no signup required.
          </p>
          <div style={{ marginTop: 28 }}>
            <a href="/partners/resources.html" className="vm-btn vm-btn-secondary">See all resources</a>
          </div>
        </div>

        {/* Resource columns */}
        <ol
          className="vm-how-cols"
          style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: "clamp(24px, 3vw, 48px)",
          }}
        >
          {items.map((it) => (
            <li
              key={it.title}
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 12,
                paddingTop: 24,
                borderTop: "1px solid var(--vesta-gray-2)",
              }}
            >
              <span style={{
                fontSize: 11, fontWeight: 600,
                letterSpacing: "0.08em", textTransform: "uppercase",
                color: "var(--vesta-gray-3)",
              }}>
                {it.tag}
              </span>
              <h3 style={{ margin: 0, fontSize: "clamp(17px, 1.4vw, 20px)", fontWeight: 700, letterSpacing: "-0.015em" }}>{it.title}</h3>
              <p className="vm-body" style={{ margin: 0, color: "var(--vesta-gray-4)" }}>{it.body}</p>
              <a
                href={it.href}
                style={{
                  marginTop: "auto",
                  paddingTop: 8,
                  fontSize: 14,
                  fontWeight: 600,
                  color: "var(--vesta-orange)",
                  textDecoration: "none",
                  alignSelf: "flex-start",
                }}
              >
                {it.cta} →
              </a>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function ReadinessQuiz() {
  const { useState } = React;

  // 10-question ITIN Readiness Assessment — based on Darren Liddell's assessment doc
  // Scoring: top answer = 10, second = 7, third = 3, last = 0
  // Weights applied at score calculation: Q3 (ICE safety) 1.5×, Q5 (address) 1.5×, Q8 (systems) 1.3×
  // Presented in engagement-optimized order (neutral → harder → close)
  const questions = [
    {
      id: "itin_support",
      q: "How does your org currently handle ITIN applicants?",
      opts: [
        "It's a core service we actively offer",
        "We help when clients come to us",
        "Ad hoc — no consistent approach",
        "We don't support ITIN clients yet",
      ],
      weight: 1,
    },
    {
      id: "scalability",
      q: "If ITIN volume doubled next season...",
      opts: [
        "We'd handle it without major changes",
        "We'd manage with some adjustments",
        "It would be a real stretch",
        "It would overwhelm us",
      ],
      weight: 1,
    },
    {
      id: "ice_safety",
      q: "Do you have protocols for sensitive situations — client safety, law enforcement?",
      opts: [
        "Yes — trained staff and clear procedures",
        "Discussed internally, not yet formalized",
        "Thought about it, not addressed",
        "Not on our radar yet",
      ],
      weight: 1.5,
    },
    {
      id: "client_trust",
      q: "How do you handle privacy and risk conversations with clients?",
      opts: [
        "Built into every intake and conversation",
        "We address it when clients raise concerns",
        "Comes up situationally",
        "We don't typically discuss it",
      ],
      weight: 1,
    },
    {
      id: "address",
      q: "Can clients use an address other than their home for ITIN mail?",
      opts: [
        "Yes — we actively offer safe alternatives",
        "We help them figure it out when asked",
        "They handle it on their own",
        "Not part of our process",
      ],
      weight: 1.5,
    },
    {
      id: "beyond_return",
      q: "What happens after a client files their return?",
      opts: [
        "We connect them to banking, savings, or credit",
        "We make referrals to financial resources",
        "We answer questions if they come up",
        "Our support ends at filing",
      ],
      weight: 1,
    },
    {
      id: "certification",
      q: "How confident is your team with ITIN applications end-to-end?",
      opts: [
        "Very — we have certified staff (CAA)",
        "Strong experience, not formally certified",
        "Still learning as we go",
        "We usually refer clients elsewhere",
      ],
      weight: 1,
    },
    {
      id: "systems",
      q: "How does your team manage ITIN intake and documents?",
      opts: [
        "Secure, streamlined system",
        "Some systems, but inconsistent",
        "Mix of tools and manual tracking",
        "Mostly paper-based or ad hoc",
      ],
      weight: 1.3,
    },
    {
      id: "ecosystem",
      q: "When clients need help beyond taxes, what do you do?",
      opts: [
        "Refer to trusted partners regularly",
        "Make referrals, but inconsistently",
        "Try to help — no strong connections",
        "We don't typically make referrals",
      ],
      weight: 1,
    },
    {
      id: "strategy",
      q: "Where do ITIN services fit in your org's broader strategy?",
      opts: [
        "A key priority we're actively investing in",
        "Important, but one of many focus areas",
        "We support it when needed",
        "Not currently a focus",
      ],
      weight: 1,
    },
  ];

  const SCORE_VALUES = [10, 7, 3, 0];
  const MAX_RAW = questions.reduce((sum, q) => sum + 10 * q.weight, 0); // 113

  function calcScore(answers) {
    let raw = 0;
    questions.forEach((q, i) => {
      const idx = q.opts.indexOf(answers[i]);
      if (idx >= 0) raw += SCORE_VALUES[idx] * q.weight;
    });
    return Math.round((raw / MAX_RAW) * 100);
  }

  function getBand(score) {
    if (score <= 30) return {
      label: "Early Stage",
      emoji: "🌱",
      color: "#e67e22",
      desc: "You're building the foundation. That's exactly where meaningful change starts.",
      cta: "Get a 3-week roadmap →",
      ctaHref: "https://calendly.com/growwithvesta/team",
      ctaSub: "We'll share practical steps to start safely supporting ITIN clients.",
    };
    if (score <= 60) return {
      label: "Developing",
      emoji: "🔧",
      color: "#2980b9",
      desc: "You're supporting ITIN clients, but key systems and protections are still being built.",
      cta: "See what's missing →",
      ctaHref: "https://calendly.com/growwithvesta/team",
      ctaSub: "A quick consult to identify the highest-leverage gaps in your workflow.",
    };
    if (score <= 80) return {
      label: "Strong",
      emoji: "💪",
      color: "#27ae60",
      desc: "You have solid ITIN support. The opportunity now is efficiency and deeper outcomes.",
      cta: "Book a working session →",
      ctaHref: "https://calendly.com/growwithvesta/team",
      ctaSub: "We'll help you streamline operations and scale with confidence.",
    };
    return {
      label: "Leader",
      emoji: "🦁",
      color: "#8e44ad",
      desc: "You're operating at a high level. The field needs more programs like yours.",
      cta: "Join our ITIN Leaders Network →",
      ctaHref: "https://calendly.com/growwithvesta/team",
      ctaSub: "Connect with peer programs at our bi-monthly partner calls.",
    };
  }

  function getInsights(answers) {
    const insights = [];
    const idxOf = (qId) => questions.findIndex(q => q.id === qId);
    const score = (qId) => {
      const i = idxOf(qId);
      return i >= 0 ? SCORE_VALUES[questions[i].opts.indexOf(answers[i])] ?? -1 : -1;
    };

    if (score("ice_safety") <= 3) insights.push("Your team may not have formal protocols for sensitive situations involving client safety — this is one of the highest-risk gaps in ITIN programs right now.");
    if (score("address") <= 3) insights.push("Address protection is a key vulnerability. Many ITIN clients need alternatives to their home address — and most programs don't offer it consistently.");
    if (score("systems") <= 3) insights.push("Manual or paper-based intake processes slow down your team and create compliance risk. Streamlining here is the fastest way to reach more clients.");
    if (score("beyond_return") <= 3) insights.push("Clients who file taxes are often ready for the next step — banking, savings, credit. Without a bridge, that opportunity disappears.");
    if (score("ecosystem") <= 3) insights.push("Strong referral partnerships multiply your impact without adding staff. Formalizing these connections is a leverage point most programs underuse.");
    if (score("certification") <= 3) insights.push("CAA certification opens up more services for clients and strengthens your program's credibility — it's more accessible than most programs think.");

    return insights.slice(0, 3);
  }

  const [current, setCurrent] = useState(0);
  const [answers, setAnswers] = useState(Array(questions.length).fill(null));
  const [selected, setSelected] = useState(null);
  const [complete, setComplete] = useState(false);
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState(null);

  const total = questions.length;
  const progress = complete ? 1 : (current + (selected !== null ? 0.5 : 0)) / total;

  // Pre-compute results so JSX stays simple (no IIFEs)
  const resultScore = complete ? calcScore(answers) : 0;
  const resultBand  = complete ? getBand(resultScore) : null;
  const resultInsights = complete ? getInsights(answers) : [];

  function handleNext() {
    const next = [...answers];
    next[current] = selected;
    setAnswers(next);
    if (current + 1 >= total) {
      setComplete(true);
    } else {
      setCurrent(current + 1);
      setSelected(next[current + 1]);
    }
  }

  function handleBack() {
    const prev = current - 1;
    setCurrent(prev);
    setSelected(answers[prev]);
  }

  const S = {
    orange: "#ff543f",
    black: "#000000",
    gray1: "#f4f3f0",
    gray2: "#b7b6b4",
    gray3: "#7a7a78",
    white: "#ffffff",
    green: "#0d3e1b",
  };

  return (
    <section
      id="assessment"
      style={{
        background: S.gray1,
        padding: "clamp(64px, 8vw, 120px) 0",
      }}
    >
      <div className="vm-container">
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 400px), 1fr))",
            gap: "clamp(40px, 5vw, 96px)",
            alignItems: "center",
          }}
        >
          {/* Left: static content */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <span
              style={{
                display: "flex",
                alignItems: "center",
                gap: 10,
                fontSize: 11,
                fontWeight: 600,
                letterSpacing: "0.10em",
                textTransform: "uppercase",
                color: S.orange,
              }}
            >
              <span style={{ width: 24, height: 2, background: S.orange, flexShrink: 0 }} />
              Program readiness
            </span>
            <h2
              style={{
                margin: 0,
                fontSize: "clamp(32px, 4vw, 52px)",
                fontWeight: 400,
                letterSpacing: "-0.025em",
                lineHeight: 1.05,
                color: S.black,
              }}
            >
              See where your program stands, in 5 minutes.
            </h2>
            <p
              style={{
                margin: 0,
                fontSize: "clamp(16px, 1.25vw, 18px)",
                color: S.gray3,
                lineHeight: 1.55,
                maxWidth: "44ch",
              }}
            >
              Ten questions. A clear picture of where your ITIN program stands across safety, systems, and
              reach — so you know exactly what to focus on next.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 8 }}>
              {["No signup required", "Personalized score + insights", "Free, always"].map((t) => (
                <div key={t} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span
                    style={{
                      width: 20, height: 20, borderRadius: "50%",
                      background: S.orange,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      flexShrink: 0,
                    }}
                  >
                    <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                      <path d="M1 4l2.5 2.5L9 1" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                  <span style={{ fontSize: 14, color: S.black, fontWeight: 500 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right: quiz card */}
          <div
            className="vm-quiz-card"
            style={{
              background: S.white,
              borderRadius: 16,
              padding: "clamp(28px, 3.5vw, 48px)",
              border: "1px solid rgba(0,0,0,0.08)",
            }}
          >
            {/* Progress bar */}
            <div style={{ marginBottom: 32 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                <span style={{ fontSize: 12, color: S.gray3, fontWeight: 500 }}>
                  {complete ? "Complete" : `Question ${current + 1} of ${total}`}
                </span>
                <span style={{ fontSize: 12, color: S.orange, fontWeight: 600 }}>
                  {Math.round(progress * 100)}%
                </span>
              </div>
              <div style={{ height: 4, background: S.gray1, borderRadius: 99, overflow: "hidden" }}>
                <div
                  style={{
                    height: "100%",
                    width: `${progress * 100}%`,
                    background: S.orange,
                    borderRadius: 99,
                    transition: "width 0.35s ease",
                  }}
                />
              </div>
            </div>

            {complete && !submitted && (
              <>
                {/* Score ring + band */}
                <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 24 }}>
                  <div style={{ position: "relative", width: 80, height: 80, flexShrink: 0 }}>
                    <svg width="80" height="80" viewBox="0 0 80 80">
                      <circle cx="40" cy="40" r="34" fill="none" stroke={S.gray1} strokeWidth="7" />
                      <circle
                        cx="40" cy="40" r="34" fill="none"
                        stroke={resultBand.color} strokeWidth="7"
                        strokeDasharray={`${2 * Math.PI * 34}`}
                        strokeDashoffset={`${2 * Math.PI * 34 * (1 - resultScore / 100)}`}
                        strokeLinecap="round"
                        transform="rotate(-90 40 40)"
                        style={{ transition: "stroke-dashoffset 0.6s ease" }}
                      />
                    </svg>
                    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <span style={{ fontSize: 18, fontWeight: 700, color: S.black, lineHeight: 1 }}>{resultScore}</span>
                    </div>
                  </div>
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                      <span style={{ fontSize: 18 }}>{resultBand.emoji}</span>
                      <span style={{ fontSize: 16, fontWeight: 700, color: resultBand.color }}>{resultBand.label}</span>
                    </div>
                    <p style={{ margin: 0, fontSize: 13, color: S.gray3, lineHeight: 1.5, maxWidth: "26ch" }}>{resultBand.desc}</p>
                  </div>
                </div>

                {/* Insights */}
                {resultInsights.length > 0 && (
                  <div style={{ marginBottom: 24 }}>
                    <p style={{ margin: "0 0 10px", fontSize: 12, fontWeight: 700, color: S.gray3, textTransform: "uppercase", letterSpacing: "0.08em" }}>Key observations</p>
                    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                      {resultInsights.map((ins, i) => (
                        <div key={i} style={{ display: "flex", gap: 10, padding: "10px 12px", background: S.gray1, borderRadius: 8 }}>
                          <span style={{ color: S.orange, flexShrink: 0, marginTop: 1 }}>→</span>
                          <span style={{ fontSize: 13, color: S.black, lineHeight: 1.5 }}>{ins}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Email capture */}
                <p style={{ margin: "0 0 10px", fontSize: 13, color: S.gray3 }}>
                  Enter your email to get your full results, tailored to your program:
                </p>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <input
                    type="email"
                    placeholder="you@yourorg.org"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    style={{
                      padding: "13px 16px", borderRadius: 10, border: "none",
                      background: S.gray1, fontSize: 14, color: S.black,
                      fontFamily: "inherit", outline: "none", width: "100%", boxSizing: "border-box",
                    }}
                  />
                  <button
                    disabled={sending}
                    onClick={async () => {
                      if (!email.includes("@") || sending) return;
                      setSendError(null);
                      setSending(true);
                      try {
                        const res = await fetch("/api/send-results", {
                          method: "POST",
                          headers: { "Content-Type": "application/json" },
                          body: JSON.stringify({
                            email,
                            score: resultScore,
                            band: resultBand.label,
                            insights: resultInsights,
                          }),
                        });
                        if (!res.ok) throw new Error("HTTP " + res.status);
                        setSubmitted(true);
                      } catch (err) {
                        setSendError("Couldn't send right now. Try again, or email us at hello@growwithvesta.com.");
                      } finally {
                        setSending(false);
                      }
                    }}
                    style={{
                      padding: "13px 0", borderRadius: 999, border: "none",
                      background: S.orange, color: S.white,
                      cursor: sending ? "wait" : "pointer",
                      opacity: sending ? 0.7 : 1,
                      fontSize: 14, fontWeight: 600, fontFamily: "inherit", width: "100%",
                    }}
                  >
                    {sending ? "Sending…" : "Send my results →"}
                  </button>
                  {sendError ? (
                    <p style={{ margin: 0, fontSize: 12, color: S.orange, textAlign: "center" }}>{sendError}</p>
                  ) : (
                    <p style={{ margin: 0, fontSize: 12, color: S.gray3, textAlign: "center" }}>No spam. We'll follow up once, within 24 hours.</p>
                  )}
                </div>
              </>
            )}

            {complete && submitted && (
              <div style={{ textAlign: "center", padding: "16px 0" }}>
                <div style={{ marginBottom: 16 }}>
                  <span style={{ fontSize: 40 }}>{resultBand.emoji}</span>
                </div>
                <div style={{ display: "inline-block", padding: "4px 14px", borderRadius: 999, background: resultBand.color + "18", marginBottom: 14 }}>
                  <span style={{ fontSize: 13, fontWeight: 700, color: resultBand.color }}>{resultBand.label} · {resultScore}/100</span>
                </div>
                <h3 style={{ margin: "0 0 8px", fontSize: "clamp(18px, 1.5vw, 22px)", fontWeight: 600, letterSpacing: "-0.02em", color: S.black }}>
                  Results on their way.
                </h3>
                <p style={{ margin: "0 0 24px", fontSize: 14, color: S.gray3, lineHeight: 1.55 }}>
                  Sent to <strong style={{ color: S.black }}>{email}</strong>. We'll follow up within 24 hours.
                </p>
                <a
                  href={resultBand.ctaHref}
                  style={{
                    display: "inline-block", padding: "12px 28px", borderRadius: 999,
                    background: S.orange, color: S.white, fontSize: 14, fontWeight: 600,
                    textDecoration: "none", marginBottom: 10,
                  }}
                >
                  {resultBand.cta}
                </a>
                <p style={{ margin: "8px 0 0", fontSize: 12, color: S.gray3 }}>{resultBand.ctaSub}</p>
              </div>
            )}

            {!complete && (
              <>
                <p
                  style={{
                    margin: "0 0 24px",
                    fontSize: "clamp(17px, 1.4vw, 20px)",
                    fontWeight: 600,
                    letterSpacing: "-0.015em",
                    lineHeight: 1.25,
                    color: S.black,
                  }}
                >
                  {questions[current].q}
                </p>

                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 32 }}>
                  {questions[current].opts.map((opt) => {
                    const isSelected = selected === opt;
                    return (
                      <button
                        key={opt}
                        onClick={() => setSelected(opt)}
                        style={{
                          display: "block",
                          width: "100%",
                          padding: "13px 16px",
                          background: isSelected ? "#fff4f1" : S.gray1,
                          border: "none",
                          borderRadius: 10,
                          cursor: "pointer",
                          textAlign: "left",
                          fontSize: 14,
                          color: isSelected ? S.orange : S.black,
                          fontWeight: isSelected ? 600 : 400,
                          lineHeight: 1.4,
                          transition: "all 0.15s ease",
                          fontFamily: "inherit",
                        }}
                      >
                        {opt}
                      </button>
                    );
                  })}
                </div>

                <div style={{ display: "flex", gap: 10, justifyContent: "space-between", alignItems: "center" }}>
                  {current > 0 ? (
                    <button
                      onClick={handleBack}
                      style={{
                        padding: "11px 22px",
                        borderRadius: 999,
                        border: `1px solid ${S.black}`,
                        background: "transparent",
                        cursor: "pointer",
                        fontSize: 14,
                        fontWeight: 500,
                        color: S.black,
                        fontFamily: "inherit",
                      }}
                    >
                      ← Back
                    </button>
                  ) : (
                    <span />
                  )}
                  <button
                    onClick={handleNext}
                    disabled={selected === null}
                    style={{
                      padding: "12px 28px",
                      borderRadius: 999,
                      border: "none",
                      background: selected !== null ? S.orange : S.gray2,
                      color: S.white,
                      cursor: selected !== null ? "pointer" : "default",
                      fontSize: 14,
                      fontWeight: 600,
                      fontFamily: "inherit",
                      transition: "background 0.15s ease",
                    }}
                  >
                    {current + 1 === total ? "See my results →" : "Next →"}
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function PartnersCTA() {
  return (
    <section className="vm-section vm-section-black" id="talk">
      <div className="vm-container">
        <div className="vm-grid" style={{ alignItems: "center" }}>
          <div className="vm-col-7">
            <span className="vm-eyebrow">Ready when you are</span>
            <h2 className="vm-h1" style={{ marginTop: 14, color: "#fff" }}>Ready to serve more people in your program?</h2>
            <p className="vm-lede" style={{ marginTop: 16 }}>
              We'll walk through your program's setup, your existing intake, and where Vesta could lighten the load,
              with no obligation and no slide deck.
            </p>
          </div>
          <div className="vm-col-5" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="https://calendly.com/growwithvesta/team" className="vm-btn vm-btn-on-black vm-btn-lg" style={{ alignSelf: "flex-start" }}>
              Talk to our team →
            </a>
            <a href="mailto:partners@growwithvesta.com" className="vm-link" style={{ color: "rgba(255,255,255,0.85)" }}>
              partners@growwithvesta.com
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <div data-screen-label="Partners home" data-surface="partners">
      <VmNav surface="partners" links={[
        { href: "#how", label: "What we offer" },
        { href: "#onboarding", label: "How it works" },
        { href: "/partners/resources.html", label: "Resources" },
        { href: "#newsletter", label: "Join our list" },
      ]} />
      <PartnersHero />
      <VmPartnerLogos />
      <PartnersStats />
      <PartnersWhat />
      <PartnersHow />
      <PartnersTestimonial />
      <PartnersResources />
      <ReadinessQuiz />
      <NewsletterIntake id="newsletter" surface="partners" />
      <PartnersCTA />
      <VmFooter surface="partners" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);