/* global React, VmNav, VmFooter, VmPartnerLogos */

/* ─── Section palette ───────────────────────────────────────────────
   01 CAA Certification   white       orange numbers   dark dividers
   02 Running ITIN        warm sand   amber numbers    sand dividers
   03 Client Safety       pale sage   green numbers    sage dividers
   04 Impact & Growth     near-black  orange numbers   translucent
──────────────────────────────────────────────────────────────────── */
const SECTIONS_META = [
  { bg: "#FFFFFF",  textColor: "var(--vesta-black)", accent: "var(--vesta-orange)", divider: "rgba(0,0,0,0.10)",        eyebrowColor: "var(--vesta-orange)" },
  { bg: "#F5F0E8",  textColor: "var(--vesta-black)", accent: "#9B6B00",             divider: "rgba(0,0,0,0.10)",        eyebrowColor: "#9B6B00" },
  { bg: "#FFFFFF",  textColor: "var(--vesta-black)", accent: "var(--vesta-green)",  divider: "rgba(0,0,0,0.10)",        eyebrowColor: "var(--vesta-green)" },
  { bg: "#1A1A1A",  textColor: "#FFFFFF",            accent: "var(--vesta-orange)", divider: "rgba(255,255,255,0.12)", eyebrowColor: "rgba(255,255,255,0.55)" },
];

const SECTIONS = [
  {
    n: "01",
    eyebrow: "CAA Certification",
    title: "Becoming a Certifying Acceptance Agent is the foundation of everything.",
    lede: "CAA status lets your org verify ITIN applicants directly — no IRS appointment, no mail delays.",
    items: [
      {
        num: "01",
        href: "/partners/guides/becoming-a-caa.html",
        title: "What is a Certifying Acceptance Agent and why your org needs one",
        body: "The credential that lets you verify identity documents and submit applications without clients mailing their passports.",
        time: "8 min",
      },
      {
        num: "02",
        href: "/partners/guides/caa-application.html",
        title: "The CAA application: Form 13551, fingerprints, and what to expect",
        body: "A step-by-step walkthrough of the exam, background check, and IRS review — with a realistic timeline.",
        time: "10 min",
      },
      {
        num: "03",
        href: "/partners/guides/caa-first-year.html",
        title: "Common first-year CAA mistakes — and how to avoid them",
        body: "The IRS requires employees, not volunteers. Plus four other operational errors that derail new programs.",
        time: "7 min",
      },
    ],
  },
  {
    n: "02",
    eyebrow: "Running ITIN Services",
    title: "From intake to issuance: running a tight, client-centered ITIN program.",
    lede: "Most bottlenecks live in stages two and three. Here's how to fix them.",
    items: [
      {
        num: "01",
        href: "/partners/guides/itin-workflow.html",
        title: "The 7-stage ITIN workflow: from intake to financial connection",
        body: "Every stage mapped — with time estimates, common bottlenecks, and what a clean handoff looks like.",
        time: "9 min",
      },
      {
        num: "02",
        href: "/partners/guides/digital-intake.html",
        title: "Digital intake: cutting per-ITIN workload from 30 minutes to 5",
        body: "What changes when clients complete intake on their phones before they walk in — and what doesn't.",
        time: "7 min",
      },
    ],
  },
  {
    n: "03",
    eyebrow: "Client Safety & Trust",
    title: "Your clients are trusting you with some of the most sensitive information they have.",
    lede: "Fear is often the real barrier. Here's how to design your program around it.",
    items: [
      {
        num: "01",
        href: "/partners/guides/client-safety.html",
        title: "Protecting your clients: address privacy, PO boxes, and handling fear",
        body: "Concrete protections you can offer — and the exact language that helps hesitant clients say yes.",
        time: "8 min",
      },
      {
        num: "02",
        href: "/partners/guides/data-privacy.html",
        title: "What your organization needs to know about client data and immigration risk",
        body: "What you can share, how to respond to third-party requests, and how to build a policy that holds.",
        time: "9 min",
      },
    ],
  },
  {
    n: "04",
    eyebrow: "Impact & Growth",
    title: "Funders need numbers. Communities need stories. Here's how to deliver both.",
    lede: "Most programs underreport their impact. Here's how to fix that — in grant reports and board rooms.",
    items: [
      {
        num: "01",
        href: "/partners/guides/impact-reporting.html",
        title: "How to write ITIN program outcomes for grant reports",
        body: "The metrics to track, how to calculate financial return, and the framing language foundations respond to.",
        time: "9 min",
      },
      {
        num: "02",
        href: "/partners/guides/program-roi.html",
        title: "Making the case for Vesta in your budget and board materials",
        body: "Cost-per-client, grant leverage, staff time saved — a simple ROI framework with ready-to-adapt language.",
        time: "8 min",
      },
    ],
  },
];

/* ─── Resource Section ─────────────────────────────────────────────
   Full-width colored background, split header + 2-col numbered grid
──────────────────────────────────────────────────────────────────── */
function ResourceSection({ section, meta }) {
  const isDark = meta.textColor === "#FFFFFF";
  return (
    <section style={{ background: meta.bg, paddingBlock: "clamp(64px, 7vw, 104px)" }}>
      <div className="vm-container">

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: "clamp(24px, 4vw, 80px)",
          alignItems: "end",
          paddingBottom: "clamp(40px, 5vw, 64px)",
          borderBottom: `1px solid ${meta.divider}`,
          marginBottom: "clamp(24px, 4vw, 48px)",
        }}>
          <div>
            <span className="vm-eyebrow" style={{ color: meta.eyebrowColor }}>{section.eyebrow}</span>
            <h2 style={{
              margin: "14px 0 0",
              fontSize: "clamp(22px, 2.4vw, 34px)",
              fontWeight: 700,
              letterSpacing: "-0.025em",
              color: meta.textColor,
              lineHeight: 1.15,
              maxWidth: "22ch",
            }}>{section.title}</h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
            <p style={{
              margin: 0,
              fontSize: "clamp(15px, 1.1vw, 17px)",
              color: isDark ? "rgba(255,255,255,0.72)" : "var(--vesta-gray-4)",
              lineHeight: 1.65,
              maxWidth: "44ch",
            }}>{section.lede}</p>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: `0 clamp(24px, 4vw, 80px)`,
        }}>
          {section.items.map((it) => (
            <a
              key={it.num}
              href={it.href || "#"}
              style={{
                display: "grid",
                gridTemplateColumns: "48px 1fr",
                gap: "0 20px",
                padding: "clamp(20px, 2.5vw, 32px) 0",
                borderBottom: `1px solid ${meta.divider}`,
                textDecoration: "none",
                color: "inherit",
                transition: "opacity 150ms ease",
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = "0.75"}
              onMouseLeave={e => e.currentTarget.style.opacity = "1"}
            >
              <span style={{
                fontSize: 11,
                fontWeight: 700,
                color: meta.accent,
                letterSpacing: "0.08em",
                paddingTop: 5,
                lineHeight: 1,
              }}>{it.num}</span>
              <div>
                <h3 style={{
                  margin: 0,
                  fontSize: "clamp(15px, 1.2vw, 18px)",
                  fontWeight: 700,
                  color: meta.textColor,
                  letterSpacing: "-0.02em",
                  lineHeight: 1.25,
                }}>{it.title}</h3>
                <p style={{
                  margin: "8px 0 0",
                  fontSize: 13,
                  color: isDark ? "rgba(255,255,255,0.55)" : "var(--vesta-gray-3)",
                  lineHeight: 1.55,
                }}>{it.body}</p>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 14 }}>
                  <span style={{
                    fontSize: 13,
                    fontWeight: 700,
                    color: meta.accent,
                    letterSpacing: "0.02em",
                  }}>Read guide →</span>
                  {it.time && (
                    <span style={{
                      fontSize: 11,
                      fontWeight: 600,
                      color: isDark ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.3)",
                      letterSpacing: "0.04em",
                    }}>{it.time} read</span>
                  )}
                </div>
              </div>
            </a>
          ))}
        </div>

      </div>
    </section>
  );
}

/* ─── FAQ ──────────────────────────────────────────────────────── */
const FAQ = [
  { q: "How does our organization become a Vesta partner?", a: "Contact us at partners@growwithvesta.com or book a 30-minute call. We'll walk through your current ITIN program (or lack of one), match you to the right service tier, and handle onboarding. Most partners are operational within two weeks of signing the partnership agreement." },
  { q: "Does our organization need an existing CAA to work with Vesta?", a: "No — you don't need your own CAA to get started. Vesta's network includes credentialed CAAs who can serve your clients. If your organization wants to develop internal CAA capacity, we can help you through that process too." },
  { q: "How much does it cost to partner with Vesta?", a: "Services are free to clients. Partner organizations pay a program fee that covers case management, document handling, and platform access. Pricing scales with volume and is typically offset by grant revenue. Contact us for a quote based on your expected caseload." },
  { q: "What does digital intake actually replace?", a: "Digital intake replaces the paper-based intake interview. Instead of staff manually collecting and entering client information, clients complete a guided mobile form in their language before their appointment. Staff spend the appointment verifying and advising — not data entry. Average per-case staff time drops from 30–45 minutes to under 5." },
  { q: "Can we use Vesta to serve clients who are afraid to apply?", a: "Yes — and this is one of the most important things we do. Many clients have been told that applying for an ITIN is risky or that their information will be shared with immigration authorities. Neither is true. We provide address protection (secure PO Box), plain-language safety explanations, and case manager training on how to have these conversations effectively." },
  { q: "What metrics does Vesta track that we can use in grant reports?", a: "We track: clients served, ITINs successfully issued, average financial return per client (refunds + credits), time from intake to issuance, banking connection rate post-ITIN, and demographic breakdown. All metrics are available to partners in your program dashboard and can be exported for grant reporting." },
  { q: "How quickly does the IRS process applications submitted through Vesta?", a: "Standard IRS processing is 6–11 weeks. Applications submitted through certified CAAs typically move faster because they arrive complete and verified. We monitor application status and notify both staff and clients when ITINs are issued." },
  { q: "What languages does Vesta support?", a: "The platform and all client-facing materials are currently available in English and Spanish. We're actively developing support for additional languages. If your community has specific language needs, contact us — this directly shapes our roadmap." },
];

function PartnerFaq() {
  const [open, setOpen] = React.useState(null);
  const toggle = (i) => setOpen(open === i ? null : i);
  return (
    <section className="vm-section">
      <div className="vm-container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: "clamp(32px, 4vw, 80px)",
          paddingBottom: "clamp(40px, 4vw, 64px)",
          borderBottom: "1px solid var(--vesta-gray-2)",
          marginBottom: "clamp(8px, 2vw, 24px)",
        }}>
          <div>
            <span className="vm-eyebrow">Questions we hear often</span>
            <h2 className="vm-h1" style={{ marginTop: 14 }}>Straightforward answers for program staff.</h2>
          </div>
        </div>
        <div>
          {FAQ.map((item, i) => (
            <div key={i} style={{ borderBottom: "1px solid var(--vesta-gray-2)" }}>
              <button
                type="button"
                onClick={() => toggle(i)}
                aria-expanded={open === i}
                style={{
                  width: "100%",
                  display: "grid",
                  gridTemplateColumns: "1fr 24px",
                  alignItems: "center",
                  gap: 16,
                  padding: "clamp(18px, 2vw, 24px) 0",
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  textAlign: "left",
                  fontFamily: "var(--font-sans)",
                }}
              >
                <span style={{
                  fontSize: "clamp(15px, 1.2vw, 18px)",
                  fontWeight: 600,
                  letterSpacing: "-0.015em",
                  color: "var(--vesta-black)",
                  lineHeight: 1.3,
                }}>{item.q}</span>
                <span style={{
                  fontSize: 20,
                  fontWeight: 300,
                  color: "var(--vesta-gray-3)",
                  lineHeight: 1,
                  transform: open === i ? "rotate(45deg)" : "none",
                  transition: "transform 0.2s ease",
                  display: "block",
                  textAlign: "center",
                }}>+</span>
              </button>
              {open === i && (
                <p className="vm-body" style={{
                  margin: "0 0 clamp(18px, 2vw, 24px)",
                  color: "var(--vesta-gray-4)",
                  maxWidth: "70ch",
                  lineHeight: 1.7,
                }}>{item.a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── App ─────────────────────────────────────────────────────── */
function App() {
  return (
    <div data-surface="partners" data-screen-label="Partners resources">
      <VmNav surface="partners" links={[
        { href: "/partners/", label: "What we offer" },
        { href: "/partners/#onboarding", label: "How it works" },
        { href: "/partners/resources.html", label: "Resources", active: true },
        { href: "/partners/#newsletter", label: "Join our list" },
      ]} />

      {/* Hero */}
      <header className="vm-section" style={{ paddingTop: "clamp(48px, 6vw, 80px)", paddingBottom: "clamp(48px, 6vw, 80px)" }}>
        <div className="vm-container">
          <div className="vm-grid" style={{ alignItems: "end" }}>
            <div className="vm-col-7">
              <span className="vm-eyebrow" style={{ color: "var(--vesta-orange)" }}>Partner resources</span>
              <h1 className="vm-display" style={{ marginTop: 14 }}>
                The guides your team needs to run a strong ITIN program.
              </h1>
              <p className="vm-lede" style={{ marginTop: 16, maxWidth: "48ch" }}>
                From CAA certification to grant reporting — practical knowledge built with the partners doing this work, for the staff who need to get it done.
              </p>
            </div>
            <div className="vm-col-5">
              <div style={{
                background: "#F5F0E8",
                borderRadius: 16,
                padding: "clamp(28px, 4vw, 48px)",
                display: "flex",
                flexDirection: "column",
                gap: 16,
              }}>
                {[
                  { label: "CAA certification", desc: "What it takes to get and keep the credential" },
                  { label: "ITIN workflow", desc: "The 7 stages from intake to issuance" },
                  { label: "Client safety", desc: "Address protection and handling fear" },
                  { label: "Grant reporting", desc: "Metrics and language that lands" },
                ].map((item, i) => (
                  <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <div style={{
                      width: 8, height: 8, borderRadius: "50%",
                      background: "var(--vesta-orange)",
                      marginTop: 7, flexShrink: 0
                    }} />
                    <div>
                      <p style={{ margin: 0, fontSize: 14, fontWeight: 700, color: "var(--vesta-black)", lineHeight: 1.3 }}>{item.label}</p>
                      <p style={{ margin: "2px 0 0", fontSize: 13, color: "#888", lineHeight: 1.4 }}>{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </header>

      <VmPartnerLogos />

      {/* Resource sections */}
      {SECTIONS.map((section, i) => (
        <ResourceSection
          key={section.n}
          section={section}
          meta={SECTIONS_META[i]}
        />
      ))}

      <PartnerFaq />

      {/* CTA */}
      <section className="vm-section vm-section-orange" id="talk">
        <div className="vm-container">
          <div className="vm-grid" style={{ alignItems: "center" }}>
            <div className="vm-col-7">
              <span className="vm-eyebrow">Ready to go deeper?</span>
              <h2 className="vm-h1" style={{ marginTop: 14, color: "#fff" }}>
                Talk to a Vesta partner specialist.
              </h2>
              <p className="vm-lede" style={{ marginTop: 16 }}>
                Whether you're building a new ITIN program or scaling an existing one, we'll meet you where you are. Most conversations take 30 minutes and result in a clear next step.
              </p>
            </div>
            <div className="vm-col-5" style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
              <a href="https://calendly.com/growwithvesta/30min" className="vm-btn vm-btn-on-orange vm-btn-lg">Book a 30-minute call</a>
              <a href="mailto:partners@growwithvesta.com" style={{ fontSize: 14, fontWeight: 600, color: "rgba(255,255,255,0.7)", textDecoration: "none" }}>partners@growwithvesta.com</a>
            </div>
          </div>
        </div>
      </section>

      <VmFooter surface="partners" />
    </div>
  );
}

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