/* global React, ReactDOM, window */
const { useState } = React;
const { Header, Footer, Icon, Eyebrow, Callout, SectionHeading, PageHero, ClaimBadge, useSharedLang, LangTweak, SprintProgress, AfterSubmit, FormIntro, TalkFirstCTA, IPSafetyBadge, WhyBother } = window;

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "lang": "en"
}/*EDITMODE-END*/;

const INTAKE_EMAIL = "hello@cantho2030.com";

// =====================================================================
// Pitch a Solution (v0.2, NEW) — the second side of the marketplace.
// =====================================================================
const COPY = {
  en: {
    breadcrumb: [["Home","Home.html"],["Pitch a Solution"]],
    eyebrow: "Pitch a solution",
    h1: "Pitch a solution to a Cần Thơ 2030 challenge",
    lede: "Get direct access to deploy your solution with validated Mekong institutions. We match your pitch to a live Cần Thơ 2030 challenge — or hold it for the next one in your domain — and selected matches run a 90-day Sprint. Open to startups, SMEs, corporates, researchers and student teams.",
    cta: "Pitch a solution",
    whyBother: {
      eyebrow: "Why pitch a solution",
      body: "Pitching a solution gets your RegTech, ClimateTech, AquaTech, AgriTech, or Renewables capability in front of pre-validated Mekong Delta challenges — not speculative briefs. Selected solutions get a real test environment via CICT, a Foundation Cohort working alongside, IP safety from day one, and a Day 2 Forum stage. The match is curated; the pilot is genuine; the buyer is in the room.",
    },
    who: {
      eyebrow: "Who can pitch",
      h2: "Solutions from anywhere",
      items: ["Startups", "Companies", "Software vendors", "Australian businesses", "Vietnamese businesses", "Researchers", "Student teams"],
    },
    matching: {
      eyebrow: "How matching works",
      h2: "Matched now, or held for later",
      steps: [
        { n: "1", t: "You pitch", d: "Submit your solution against a live challenge or as a general pitch in a domain." },
        { n: "2", t: "We match", d: "The Improbability Company (TIC) pairs your pitch with a live challenge — or holds it for a future challenge in your domain." },
        { n: "3", t: "Sprint", d: "Selected matches run a 3-Month Sprint and show at the Innovation Forum." },
      ],
    },
    example: {
      eyebrow: "Example match",
      h2: "How a match becomes a pilot",
      solution: { label: "Solution provider", name: "VoltaRocks", status: "proposed", note: "proposed solution provider" },
      challenge: { label: "Challenge", name: "Residential / SME ClimateTech", owner: "owned by CICT + CTU faculty + a Mekong household pilot partner" },
      outcome: { label: "90-day Sprint output", text: "A Mekong-household energy-resilience model — a deployable result the Vietnamese owner can pilot." },
    },
    criteria: {
      eyebrow: "Selection criteria",
      h2: "What makes a strong pitch",
      sub: "Strong solution pitches show:",
      items: [
        "A working product or credible prototype — not a slide deck",
        "Relevance to one of the four focus areas",
        "Evidence from another market or a prior pilot",
        "A clear understanding of what local adaptation requires",
        "Willingness to work with Partner, students and faculty during the 3-Month Sprint",
      ],
      note: "Selection by CICT + TIC; not every pitch becomes a match. Strong unselected pitches are held against future challenges in their domain.",
    },
    form: {
      eyebrow: "Pitch a solution",
      h2: "Outline the solution",
      note: "This opens your email client with the details pre-filled — no account needed.",
      progress: { basics: "1 / 3 — Your basics", solution: "2 / 3 — The solution", match: "3 / 3 — The match" },
      fields: {
        name: "Name", org: "Organisation", role: "Role", email: "Email", country: "Country / region",
        title: "Solution name", domain: "Domain it addresses", value: "One-line value proposition", solution: "The solution in one paragraph",
        stage: "Stage", challenge: "Which CT2030 challenge does this address", bring: "What you'd bring to a 90-day Sprint", need: "Resources required to deploy",
      },
      domains: ["Enterprise RegTech", "Residential / SME ClimateTech", "Mekong energy & grid", "AgriTech / AquaTech", "Other"],
      stages: ["Idea / prototype", "Working pilot", "Commercial product", "Deployed at scale"],
      challenges: ["General pitch — match me when a fitting challenge opens", "Workforce compliance for a data-centre operator", "Residential energy-resilience model for a Mekong commune", "Credential & education verification", "Distributed energy & grid-support study", "AgriTech / AquaTech challenge book", "SME flood-coordination data layer"],
      submit: "Open email to submit",
      required: "Name, organisation, email, solution name and domain are required.",
      hints: { title: "max 100 chars", value: "max 200 chars", solution: "max 400 words", bring: "optional · max 200 words", need: "optional · max 200 words" },
    },
    next: {
      eyebrow: "What happens next",
      h2: "A clear timeline",
      steps: [
        { k: "Within 2 weeks", v: "CICT + TIC triage your pitch." },
        { k: "Within 4 weeks", v: "A yes / no / hold decision." },
        { k: "If matched", v: "Paired to a challenge and a Foundation Cohort Sprint — the staffed CICT student + faculty + TIC team that runs the 90-day Sprint." },
      ],
    },
    direct: { label: "Prefer to email directly?", line: "Anh Phan is the named contact for pitches." },
    disclaimer1: "Submission does not guarantee selection, funding, partnership, presentation at the Innovation Forum, or pilot deployment. Submissions will be reviewed by CICT and TIC for alignment, feasibility, confidentiality, student suitability and pilot potential.",
    disclaimer2: "Do not submit confidential, personal, sensitive or commercially restricted information through this public form.",
  },
  vi: {
    breadcrumb: [["Trang chủ","Home.html"],["Đề xuất giải pháp"]],
    eyebrow: "Đề xuất giải pháp",
    h1: "Đề xuất một giải pháp cho thách thức Cần Thơ 2030",
    lede: "Tiếp cận trực tiếp để triển khai giải pháp của bạn cùng các đơn vị Mekong đã được xác thực. Chúng tôi ghép đề xuất của bạn với một thách thức đang mở — hoặc giữ cho thách thức tiếp theo trong lĩnh vực của bạn — và các cặp được chọn chạy một Sprint 90 ngày. Mở cho startup, SME, doanh nghiệp lớn, nhà nghiên cứu và nhóm sinh viên.",
    cta: "Đề xuất giải pháp",
    whyBother: {
      eyebrow: "Vì sao nên đề xuất một giải pháp",
      body: "Đề xuất một giải pháp đưa năng lực RegTech, ClimateTech, AquaTech, AgriTech, hay Năng lượng tái tạo của bạn tới trước các thách thức ĐBSCL đã được xác thực — không phải đề bài suy đoán. Các giải pháp được chọn nhận một môi trường thử nghiệm thực qua CICT, một Foundation Cohort đồng hành, an toàn sở hữu trí tuệ ngay từ đầu, và một sân khấu Diễn đàn Ngày 2. Cặp ghép được tuyển chọn; thí điểm là thật; người mua đã ở trong phòng.",
    },
    who: {
      eyebrow: "Ai có thể đề xuất",
      h2: "Giải pháp từ khắp nơi",
      items: ["Startup", "Doanh nghiệp", "Nhà cung cấp phần mềm", "Doanh nghiệp Úc", "Doanh nghiệp Việt Nam", "Nhà nghiên cứu", "Nhóm sinh viên"],
    },
    matching: {
      eyebrow: "Cách ghép cặp",
      h2: "Ghép ngay, hoặc giữ cho sau",
      steps: [
        { n: "1", t: "Bạn đề xuất", d: "Gửi giải pháp cho một thách thức đang mở hoặc đề xuất chung trong một lĩnh vực." },
        { n: "2", t: "Chúng tôi ghép", d: "The Improbability Company (TIC) và CICT ghép đề xuất với một thách thức đang mở — hoặc giữ cho một thách thức tương lai." },
        { n: "3", t: "Sprint", d: "Các cặp được chọn chạy Sprint 90 ngày và trình diễn tại Diễn đàn Đổi mới Sáng tạo." },
      ],
    },
    example: {
      eyebrow: "Ví dụ ghép cặp",
      h2: "Một cặp ghép trở thành thí điểm như thế nào",
      solution: { label: "Đơn vị giải pháp", name: "VoltaRocks", status: "proposed", note: "đơn vị giải pháp được đề xuất" },
      challenge: { label: "Thách thức", name: "Residential / SME ClimateTech", owner: "do CICT + giảng viên CTU + một đối tác thí điểm hộ gia đình Mekong sở hữu" },
      outcome: { label: "Kết quả Sprint 90 ngày", text: "Một mô hình chống chịu năng lượng hộ gia đình Mekong — một kết quả triển khai được mà chủ sở hữu Việt Nam có thể thí điểm." },
    },
    criteria: {
      eyebrow: "Tiêu chí tuyển chọn",
      h2: "Điều gì làm nên một đề xuất mạnh",
      sub: "Các đề xuất giải pháp mạnh thể hiện:",
      items: [
        "Một sản phẩm đang hoạt động hoặc nguyên mẫu đáng tin — không phải một bộ slide",
        "Sự liên quan tới một trong bốn lĩnh vực trọng tâm",
        "Bằng chứng từ một thị trường khác hoặc một thí điểm trước đó",
        "Hiểu rõ những gì việc thích ứng địa phương đòi hỏi",
        "Sẵn sàng làm việc với sinh viên và giảng viên CICT trong Sprint 90 ngày",
      ],
      note: "CICT + TIC tuyển chọn; không phải đề xuất nào cũng được ghép. Các đề xuất mạnh chưa được chọn sẽ được giữ cho các thách thức tương lai trong lĩnh vực của họ.",
    },
    form: {
      eyebrow: "Đề xuất giải pháp",
      h2: "Phác thảo giải pháp",
      note: "Thao tác này mở ứng dụng email của bạn với nội dung điền sẵn — không cần tài khoản.",
      progress: { basics: "1 / 3 — Thông tin cơ bản", solution: "2 / 3 — Giải pháp", match: "3 / 3 — Ghép cặp" },
      fields: {
        name: "Tên", org: "Tổ chức", role: "Vai trò", email: "Email", country: "Quốc gia / khu vực",
        title: "Tên giải pháp", domain: "Lĩnh vực giải quyết", value: "Giá trị cốt lõi một dòng", solution: "Giải pháp trong một đoạn",
        stage: "Giai đoạn", challenge: "Giải pháp này giải thách thức CT2030 nào", bring: "Bạn mang gì vào Sprint 90 ngày", need: "Nguồn lực cần để triển khai",
      },
      domains: ["Enterprise RegTech", "Residential / SME ClimateTech", "Mekong energy & grid", "AgriTech / AquaTech", "Khác"],
      stages: ["Ý tưởng / nguyên mẫu", "Thí điểm đang chạy", "Sản phẩm thương mại", "Đã triển khai quy mô"],
      challenges: ["Đề xuất chung — ghép tôi khi có thách thức phù hợp", "Tuân thủ nhân sự cho TTDL", "Mô hình chống chịu năng lượng cho xã Mekong", "Xác minh chứng chỉ & học vấn", "Nghiên cứu năng lượng phân tán & lưới", "Tập đề bài AgriTech / AquaTech", "Lớp dữ liệu điều phối lũ SME"],
      submit: "Mở email để gửi",
      required: "Tên, tổ chức, email, tên giải pháp và lĩnh vực là bắt buộc.",
      hints: { title: "tối đa 100 ký tự", value: "tối đa 200 ký tự", solution: "tối đa 400 từ", bring: "không bắt buộc · tối đa 200 từ", need: "không bắt buộc · tối đa 200 từ" },
    },
    next: {
      eyebrow: "Tiếp theo là gì",
      h2: "Một dòng thời gian rõ ràng",
      steps: [
        { k: "Trong 2 tuần", v: "CICT + TIC sàng lọc đề xuất của bạn." },
        { k: "Trong 4 tuần", v: "Quyết định có / không / giữ lại." },
        { k: "Nếu được ghép", v: "Ghép với một thách thức và một Sprint của Foundation Cohort — đội CICT gồm sinh viên + giảng viên + cố vấn TIC vận hành Sprint 90 ngày." },
      ],
    },
    direct: { label: "Muốn gửi email trực tiếp?", line: "Anh Phan là đầu mối cho các đề xuất giải pháp." },
    disclaimer1: "Việc gửi không đảm bảo được chọn, được cấp vốn, hợp tác, trình bày tại Diễn đàn Đổi mới Sáng tạo, hay triển khai thí điểm. Các đề xuất sẽ được CICT và TIC rà soát về tính phù hợp, khả thi, bảo mật, mức độ phù hợp với sinh viên và tiềm năng thí điểm.",
    disclaimer2: "Đừng gửi thông tin bảo mật, cá nhân, nhạy cảm hoặc bị hạn chế thương mại qua biểu mẫu công khai này.",
  },
};

const PitchForm = ({ F, lang }) => {
  const [v, setV] = useState({ name:"", org:"", role:"", email:"", country:"", title:"", domain:F.domains[0], value:"", solution:"", stage:F.stages[0], challenge:F.challenges[0], bring:"", need:"" });
  const set = (k) => (e) => setV(s => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!v.name || !v.org || !v.email || !v.title || !v.domain) { alert(F.required); return; }
    const L = F.fields;
    const body = `${L.name}: ${v.name}\n${L.org}: ${v.org}\n${L.role}: ${v.role}\n${L.email}: ${v.email}\n${L.country}: ${v.country}\n${L.domain}: ${v.domain}\n${L.stage}: ${v.stage}\n${L.challenge}: ${v.challenge}\n\n${L.title}: ${v.title}\n${L.value}: ${v.value}\n\n${L.solution}:\n${v.solution}\n\n${L.bring}:\n${v.bring}\n\n${L.need}:\n${v.need}`;
    window.location.href = `mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent("[CT2030 Solution] " + v.title)}&body=${encodeURIComponent(body)}`;
  };
  const input = "w-full rounded-md border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-ct-indigo-500 focus:ring-1 focus:ring-ct-indigo-500 outline-none transition";
  const label = "block text-[11px] font-mono tracking-[0.14em] uppercase text-gray-500 mb-1.5";
  const L = F.fields, H = F.hints;
  return (
    <form id="pitch" onSubmit={submit} className="rounded-lg border border-gray-200 bg-white p-6 sm:p-8 scroll-mt-20">
      <SprintProgress lang={lang} active={2} caption={lang==="vi" ? "Bước 3/5 — Đề xuất bước vào pha Xây dựng của một Sprint được ghép." : "Step 3 of 5 — Pitches enter the Build phase of a matched Sprint."}/>
      <FormIntro lang={lang} className="mb-5"/>
      <p className="text-sm text-gray-500 mb-6">{F.note}</p>
      <div className="rounded-md border-2 border-ct-indigo-300 bg-ct-indigo-50/40 p-5 sm:p-6">
        <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-800 mb-4">{F.progress.basics}</p>
        <div className="grid gap-5 sm:grid-cols-2">
          <div><label className={label}>{L.name} *</label><input className={input} value={v.name} onChange={set("name")} required/></div>
          <div><label className={label}>{L.org} *</label><input className={input} value={v.org} onChange={set("org")} required/></div>
          <div><label className={label}>{L.email} *</label><input type="email" className={input} value={v.email} onChange={set("email")} required/></div>
          <div><label className={label}>{L.role}</label><input className={input} value={v.role} onChange={set("role")}/></div>
          <div className="sm:col-span-2"><label className={label}>{L.country}</label><input className={input} value={v.country} onChange={set("country")}/></div>
        </div>
      </div>
      <div className="mt-5 rounded-md border border-gray-200 bg-gray-50/70 p-5 sm:p-6">
        <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500 mb-4">{F.progress.solution}</p>
        <div className="grid gap-5 sm:grid-cols-2">
          <div className="sm:col-span-2"><label className={label}>{L.title} * <span className="text-gray-400 normal-case tracking-normal">· {H.title}</span></label><input maxLength={100} className={input} value={v.title} onChange={set("title")} required/></div>
          <div><label className={label}>{L.domain} *</label><select className={input} value={v.domain} onChange={set("domain")}>{F.domains.map(d=><option key={d} value={d}>{d}</option>)}</select></div>
          <div><label className={label}>{L.stage}</label><select className={input} value={v.stage} onChange={set("stage")}>{F.stages.map(s=><option key={s} value={s}>{s}</option>)}</select></div>
          <div className="sm:col-span-2"><label className={label}>{L.value} <span className="text-gray-400 normal-case tracking-normal">· {H.value}</span></label><input maxLength={200} className={input} value={v.value} onChange={set("value")}/></div>
          <div className="sm:col-span-2"><label className={label}>{L.solution} <span className="text-gray-400 normal-case tracking-normal">· {H.solution}</span></label><textarea rows={4} className={input} value={v.solution} onChange={set("solution")}/></div>
          <div className="sm:col-span-2"><label className={label}>{L.bring} <span className="text-gray-400 normal-case tracking-normal">· {H.bring}</span></label><textarea rows={2} className={input} value={v.bring} onChange={set("bring")}/></div>
        </div>
      </div>
      <div className="mt-5 rounded-md border border-gray-200 bg-gray-50/70 p-5 sm:p-6">
        <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500 mb-4">{F.progress.match}</p>
        <div className="grid gap-5 sm:grid-cols-2">
          <div className="sm:col-span-2"><label className={label}>{L.challenge}</label><select className={input} value={v.challenge} onChange={set("challenge")}>{F.challenges.map(c=><option key={c} value={c}>{c}</option>)}</select></div>
          <div className="sm:col-span-2"><label className={label}>{L.need} <span className="text-gray-400 normal-case tracking-normal">· {H.need}</span></label><textarea rows={2} className={input} value={v.need} onChange={set("need")}/></div>
        </div>
      </div>
      <button type="submit" className="mt-7 inline-flex h-11 items-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{F.submit}<Icon name="mail" className="size-4"/></button>
      <AfterSubmit lang={lang}/>
      <div className="mt-7 rounded-md border border-gray-200 bg-gray-50 p-5 space-y-2.5">
        <p className="text-sm leading-relaxed text-gray-600">{F.disc1}</p>
        <p className="text-sm leading-relaxed font-semibold text-ct-indigo-900">{F.disc2}</p>
      </div>
    </form>
  );
};

const ExampleMatch = ({ t, lang }) => (
  <section data-screen-label="03 Example match" className="bg-gray-50 py-20 lg:py-24 border-y border-gray-200">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <Eyebrow n="03">{t.example.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.example.h2}</SectionHeading>
      <div className="mt-10 grid gap-4 lg:grid-cols-[1fr_auto_1fr_auto_1fr] items-stretch">
        <div className="rounded-lg border border-ct-green-200 bg-white p-6 flex flex-col">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500">{t.example.solution.label}</p>
          <div className="mt-2 flex items-center justify-between gap-2">
            <span className="text-lg font-semibold text-ct-indigo-900">{t.example.solution.name}</span>
            <ClaimBadge status={t.example.solution.status} lang={lang}/>
          </div>
          <p className="mt-2 text-sm text-gray-600 italic">{t.example.solution.note}</p>
        </div>
        <div className="hidden lg:flex items-center justify-center text-gray-400"><Icon name="arrow-right" className="size-6"/></div>
        <div className="rounded-lg border border-ct-indigo-200 bg-white p-6 flex flex-col">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500">{t.example.challenge.label}</p>
          <span className="mt-2 text-lg font-semibold text-ct-indigo-900">{t.example.challenge.name}</span>
          <p className="mt-2 text-sm text-gray-600">{t.example.challenge.owner}</p>
        </div>
        <div className="hidden lg:flex items-center justify-center text-gray-400"><Icon name="arrow-right" className="size-6"/></div>
        <div className="rounded-lg border border-ct-gold-200 bg-ct-gold-50 p-6 flex flex-col">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-gold-800">{t.example.outcome.label}</p>
          <p className="mt-2 text-sm leading-6 text-gray-700">{t.example.outcome.text}</p>
        </div>
      </div>
    </div>
  </section>
);

const TweaksMount = ({ tweaks, setLang }) => {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel } = window;
  return (<TweaksPanel title="Tweaks"><LangTweak lang={tweaks.lang} setLang={setLang}/></TweaksPanel>);
};

const App = () => {
  const [tweaks, setTweak] = (window.useTweaks || ((d) => [d, () => {}]))(TWEAK_DEFAULS);
  const lang = tweaks.lang;
  const t = COPY[lang] || COPY.en;
  const setLang = useSharedLang(tweaks, setTweak);
  const formCopy = { ...t.form, disc1: t.disclaimer1, disc2: t.disclaimer2 };

  return (
    <>
      <Header lang={lang} setLang={setLang} current="Pitch a Solution.html"/>
      <PageHero lang={lang} breadcrumb={t.breadcrumb} eyebrow={t.eyebrow} title={t.h1} lede={t.lede}/>
      <WhyBother eyebrow={t.whyBother.eyebrow}>{t.whyBother.body}</WhyBother>

      <section data-screen-label="01 Who can pitch" className="bg-white py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="01">{t.who.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.who.h2}</SectionHeading>
          <div className="mt-8 flex flex-wrap gap-2.5">
            {t.who.items.map((it, i) => (
              <span key={i} className="inline-flex items-center rounded-md border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-ct-indigo-900">{it}</span>
            ))}
          </div>
        </div>
      </section>

      <section data-screen-label="02 How matching works" className="bg-gray-50 py-20 lg:py-24 border-y border-gray-200">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="02">{t.matching.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.matching.h2}</SectionHeading>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {t.matching.steps.map((s, i) => (
              <div key={i} className="rounded-lg border border-gray-200 bg-white p-7">
                <span className="inline-flex size-10 items-center justify-center rounded-full bg-ct-indigo-900 text-white font-semibold">{s.n}</span>
                <h3 className="mt-4 text-lg font-semibold text-ct-indigo-900">{s.t}</h3>
                <p className="mt-2 text-sm leading-6 text-gray-700">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ExampleMatch t={t} lang={lang}/>

      <section data-screen-label="03b Selection criteria" className="bg-white py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Eyebrow>{t.criteria.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.criteria.h2}</SectionHeading>
          <p className="mt-4 text-base text-gray-700 leading-relaxed">{t.criteria.sub}</p>
          <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl">
            {t.criteria.items.map((it, i) => (
              <li key={i} className="flex gap-3 items-start rounded-lg border border-gray-200 bg-gray-50/70 p-5">
                <Icon name="check" className="size-5 shrink-0 text-ct-green-600 mt-0.5"/>
                <span className="text-sm leading-6 text-gray-800">{it}</span>
              </li>
            ))}
          </ul>
          <Callout className="mt-8 max-w-3xl">{t.criteria.note}</Callout>
        </div>
      </section>

      <section data-screen-label="04 Pitch form" className="bg-gray-50 py-20 lg:py-24 border-t border-gray-200">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="04">{t.form.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.form.h2}</SectionHeading>
          <div className="mt-8"><IPSafetyBadge lang={lang} formType="pitch"/></div>
          <div className="mt-4"><TalkFirstCTA lang={lang} sideHint="both" page="Pitch a Solution"/></div>
          <div className="mt-6"><PitchForm F={formCopy} lang={lang}/></div>
        </div>
      </section>

      <section data-screen-label="05 What happens next" className="bg-ct-indigo-900 text-white py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="05" className="text-ct-gold-300">{t.next.eyebrow}</Eyebrow>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl text-balance">{t.next.h2}</h2>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {t.next.steps.map((s, i) => (
              <div key={i} className="rounded-lg border border-white/15 bg-white/[0.04] p-6">
                <p className="text-lg font-semibold text-ct-gold-300">{s.k}</p>
                <p className="mt-2 text-sm leading-6 text-white/85">{s.v}</p>
              </div>
            ))}
          </div>
          <div className="mt-8 flex items-center gap-3 flex-wrap">
            <span className="text-sm text-white/80">{t.direct.label}</span>
            <a href={`mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent("[CT2030 Solution]")}`} className="inline-flex items-center gap-1.5 text-sm font-medium text-ct-gold-300 hover:text-ct-gold-200">{INTAKE_EMAIL}<Icon name="arrow-right" className="size-3.5"/></a>
            <span className="text-xs text-white/45 italic">— {t.direct.line}</span>
          </div>
        </div>
      </section>

      <Footer lang={lang}/>
      <TweaksMount tweaks={tweaks} setLang={setLang}/>
    </>
  );
};

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