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

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

const EMAIL = "hello@cantho2030.com";

// =====================================================================
// Contact — make it easy to reach the right person. Meeting-request form.
// =====================================================================
const COPY = {
  en: {
    breadcrumb: [["Home","Home.html"],["Contact"]],
    eyebrow: "Contact",
    h1: "Reach the right person",
    lede: "Three named contacts, one meeting-request form, and our operating footprint in Cần Thơ (Vietnam) and Melbourne (Australia). Tell us why you're reaching out and we'll route it.",
    contacts: {
      eyebrow: "Named contacts",
      h2: "Who to talk to",
      people: [
        { name: "Anh Phan", role: "CT2030 Project Lead · main contact", place: "Cần Thơ", line: "Main CICT liaison; coordinates the partnership between The Improbability Company (TIC) and CICT.", email: EMAIL },
        { name: "Oz Omegna", role: "Australia Lead", place: "Australia", line: "Sponsor and partner conversations.", email: EMAIL },
        { name: "TIC / Magrathea operations", role: "Operations", place: "Logistics", line: "Scheduling, logistics, and general enquiries.", email: EMAIL },
      ],
    },
    form: {
      eyebrow: "Meeting request",
      h2: "Request a meeting",
      note: "This opens your email client with the details pre-filled.",
      fields: { name: "Your name", org: "Organisation", email: "Your email", reason: "Reason", message: "Message" },
      reasons: ["Sponsorship", "Government partnership", "Innovator pitch", "Student / faculty", "Press", "Other"],
      submit: "Open email to send",
      required: "Name and email are required.",
      disc1: "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.",
      disc2: "Do not submit confidential, personal, sensitive or commercially restricted information through this public form.",
    },
    offices: (window.CT_OFFICES && window.CT_OFFICES.en) || { eyebrow: "Operating footprint", h2: "Two homes, one programme", items: [] },
    social: { eyebrow: "Follow", h2: "Stay in the loop", items: [["LinkedIn","linkedin"],["X / Twitter","twitter"],["Newsletter","mail"]], note: "Social handles coming soon." },
    disclaimer: "Any public use of CICT's name or logo will be reviewed by CICT before release.",
  },
  vi: {
    breadcrumb: [["Trang chủ","Home.html"],["Liên hệ"]],
    eyebrow: "Liên hệ",
    h1: "Tìm đúng người để liên hệ",
    lede: "Ba đầu mối được nêu tên, một biểu mẫu yêu cầu gặp, và phạm vi hoạt động tại Cần Thơ (Việt Nam) và Melbourne (Úc). Cho chúng tôi biết lý do liên hệ và chúng tôi sẽ chuyển đến đúng nơi.",
    contacts: {
      eyebrow: "Đầu mối",
      h2: "Liên hệ với ai",
      people: [
        { name: "Anh Phan", role: "Trưởng dự án CT2030 · đầu mối chính", place: "Cần Thơ", line: "Đầu mối chính với CICT; điều phối quan hệ hợp tác giữa TIC và CICT.", email: EMAIL },
        { name: "Oz Omegna", role: "Phụ trách Úc", place: "Úc", line: "Trao đổi với nhà tài trợ và đối tác.", email: EMAIL },
        { name: "Vận hành TIC / Magrathea", role: "Vận hành", place: "Hậu cần", line: "Sắp xếp lịch, hậu cần và các yêu cầu chung.", email: EMAIL },
      ],
    },
    form: {
      eyebrow: "Yêu cầu gặp",
      h2: "Yêu cầu một cuộc gặ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.",
      fields: { name: "Tên của bạn", org: "Tổ chức", email: "Email của bạn", reason: "Lý do", message: "Lời nhắn" },
      reasons: ["Tài trợ", "Hợp tác chính quyền", "Đề xuất doanh nghiệp", "Sinh viên / giảng viên", "Báo chí", "Khác"],
      submit: "Mở email để gửi",
      required: "Tên và email là bắt buộc.",
      disc1: "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.",
      disc2: "Đừ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.",
    },
    offices: (window.CT_OFFICES && window.CT_OFFICES.vi) || { eyebrow: "Phạm vi hoạt động", h2: "Hai trụ sở, một chương trình", items: [] },
    social: { eyebrow: "Theo dõi", h2: "Cập nhật cùng chúng tôi", items: [["LinkedIn","linkedin"],["X / Twitter","twitter"],["Bản tin","mail"]], note: "Tài khoản mạng xã hội sắp ra mắt." },
    disclaimer: "Mọi việc sử dụng công khai tên hoặc logo của CICT sẽ được CICT rà soát trước khi công bố.",
  },
};

const MeetingForm = ({ F, lang }) => {
  const [v, setV] = useState({ name:"", org:"", email:"", reason: F.reasons[0], message:"" });
  const set = (k) => (e) => setV(s => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!v.name || !v.email) { alert(F.required); return; }
    const L = F.fields;
    const body = `${L.name}: ${v.name}\n${L.org}: ${v.org}\n${L.email}: ${v.email}\n${L.reason}: ${v.reason}\n\n${L.message}:\n${v.message}`;
    window.location.href = `mailto:${EMAIL}?subject=${encodeURIComponent("Meeting request — " + v.reason)}&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;
  return (
    <form onSubmit={submit} className="rounded-lg border border-gray-200 bg-white p-6 sm:p-8">
      <FormIntro lang={lang} className="mb-5"/>
      <p className="text-sm text-gray-500 mb-6">{F.note}</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")}/></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.reason}</label>
          <select className={input} value={v.reason} onChange={set("reason")}>{F.reasons.map(r => <option key={r} value={r}>{r}</option>)}</select>
        </div>
        <div className="sm:col-span-2"><label className={label}>{L.message}</label><textarea rows={5} className={input} value={v.message} onChange={set("message")}/></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 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);
  return (
    <>
      <Header lang={lang} setLang={setLang} current="Contact.html"/>
      <PageHero lang={lang} breadcrumb={t.breadcrumb} eyebrow={t.eyebrow} title={t.h1} lede={t.lede}/>

      <section data-screen-label="01 Named contacts" 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.contacts.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.contacts.h2}</SectionHeading>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {t.contacts.people.map((p, i) => (
              <div key={i} className="flex flex-col rounded-lg border border-gray-200 bg-white p-6">
                <div className="flex items-center gap-4">
                  <div className="shrink-0 size-12 rounded-full bg-ct-indigo-900 text-white flex items-center justify-center font-mono text-xs tracking-wider">{p.name.split(" ").map(w=>w[0]).slice(0,2).join("")}</div>
                  <div>
                    <p className="text-base font-semibold text-ct-indigo-900 leading-tight">{p.name}</p>
                    <p className="text-[11px] font-mono tracking-wide text-ct-gold-700 uppercase mt-1">{p.place}</p>
                  </div>
                </div>
                <p className="mt-4 text-sm font-medium text-ct-indigo-800">{p.role}</p>
                <p className="mt-2 text-sm leading-6 text-gray-700 flex-grow">{p.line}</p>
                <a href={`mailto:${p.email}`} className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-ct-indigo-900 hover:gap-2.5 transition-all">{p.email}<Icon name="arrow-right" className="size-3.5"/></a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section data-screen-label="02 Meeting form" className="bg-gray-50 py-20 lg:py-24 border-y border-gray-200">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="02">{t.form.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.form.h2}</SectionHeading>
          <div className="mt-8"><TalkFirstCTA lang={lang} sideHint="both" page="Contact" className="mb-6"/><MeetingForm F={t.form} lang={lang}/></div>
        </div>
      </section>

      <section data-screen-label="03 Offices" 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="03">{t.offices.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.offices.h2}</SectionHeading>
          <div className="mt-10 grid gap-5 sm:grid-cols-2 max-w-4xl">
            {t.offices.items.map((o, i) => (
              <div key={i} className={`rounded-lg border p-6 lg:p-7 ${o.tone==="anchor" ? "border-ct-indigo-300 bg-ct-indigo-50/50" : "border-gray-200 bg-white"}`}>
                <Icon name="pin" className={`size-5 ${o.tone==="anchor" ? "text-ct-indigo-700" : "text-gray-400"}`}/>
                <div className="mt-3 flex items-baseline gap-2">
                  <p className="text-lg font-semibold text-ct-indigo-900">{o.city}</p>
                  {o.country && <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-gray-400">{o.country}</p>}
                </div>
                <p className="mt-2 text-sm leading-6 text-gray-600">{o.note}</p>
              </div>
            ))}
          </div>
          {t.offices.satellites && (
            <p className="mt-4 max-w-4xl text-sm italic text-gray-500">{t.offices.satellites}</p>
          )}
        </div>
      </section>

      <section data-screen-label="04 Social" className="bg-gray-50 py-16 lg:py-20 border-t border-gray-200">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="04">{t.social.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4 !text-2xl sm:!text-3xl">{t.social.h2}</SectionHeading>
          <div className="mt-6 flex items-center gap-3 flex-wrap">
            {t.social.items.map(([labelTxt, icon], i) => (
              <a key={i} href="#" title={`${labelTxt} — coming soon`} className="inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-ct-indigo-900 hover:border-ct-indigo-900 transition-colors">
                <Icon name={icon} className="size-4"/>{labelTxt}
              </a>
            ))}
            <span className="text-xs font-mono tracking-wide text-gray-400 uppercase">{t.social.note}</span>
          </div>
          <Callout className="mt-10 max-w-3xl">{t.disclaimer}</Callout>
        </div>
      </section>

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

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