// About, Contact pages

function AboutPage({ t, setPage, lang }) {
  return (
    <div className="page-shell">
      <section className="block">
        <div className="wrap">
          <div className="eyebrow">{t.about.kicker}</div>
          <h2 className="section-title" style={{maxWidth:980, marginTop:18, marginBottom: 56}}>
            {t.about.title_a}<em>{t.about.title_em}</em>{t.about.title_b}
          </h2>
          <div className="about-grid">
            <div className="about-prose">
              <p>{t.about.p1}</p>
              <p>{t.about.p2}</p>
              <p>{t.about.p3}</p>
            </div>
            <div>
              <div className="fact-card">
                <div className="hero-side-label">{t.about.facts_title}</div>
                <div style={{marginTop: 8}}>
                  {t.hero.facts.map(([k, v], i) => (
                    <div className="fact-row" key={i}>
                      <span className="k">{k}</span>
                      <span className="v">{v}</span>
                    </div>
                  ))}
                  <div className="fact-row">
                    <span className="k">{lang === "en" ? "Address" : "地址"}</span>
                    <span className="v">{lang === "en" ? "30 N Gould St Ste R, Sheridan, WY 82801" : "30 N Gould St Ste R, Sheridan, WY 82801, 美国"}</span>
                  </div>
                  <div className="fact-row">
                    <span className="k">{lang === "en" ? "Contact" : "联系"}</span>
                    <span className="v">contact@fantula.net</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="block" style={{background: "var(--bg-1)"}}>
        <div className="wrap">
          <div className="eyebrow">{t.about.leadership_kicker}</div>
          <h2 className="section-title" style={{marginTop:18, marginBottom:20}}>
            {t.about.leadership_title_a}<em>{t.about.leadership_title_em}</em>{t.about.leadership_title_b}
          </h2>
          <p className="section-kicker" style={{marginBottom:48, maxWidth:760}}>{t.about.leadership_lede}</p>
          <div className="leaders-grid">
            {t.about.leaders.map((p, i) => (
              <div className="leader-card" key={i}>
                <div className="leader-avatar">{p.initials}</div>
                <div className="leader-role">{p.role}</div>
                <p className="leader-bio">{p.bio}</p>
                <div className="leader-focus">
                  {p.focus.map((f, j) => <span key={j}>{f}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="block">
        <div className="wrap">
          <div className="eyebrow">{t.about.values_kicker}</div>
          <h2 className="section-title" style={{marginTop:18, marginBottom: 48}}>
            {lang === "en" ? <>How we <em>operate</em>.</> : <>我们如何<em>运营</em>。</>}
          </h2>
          <div className="approach-list">
            {t.about.values.map(([title, desc], i) => (
              <div className="approach-row" key={i}>
                <div className="approach-num">{String(i+1).padStart(2,"0")}</div>
                <div>
                  <div className="approach-title">{title}</div>
                </div>
                <div className="approach-desc">{desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABlock t={t} setPage={setPage} />
    </div>
  );
}

const CONTACT_WORKER_URL = "https://fantula-net-contact.jiangdalin1988.workers.dev";

function ContactPage({ t, setPage, lang }) {
  const [form, setForm] = React.useState({ name: "", company: "", email: "", phone: "", interest: t.contact.form.interest_opts[0], message: "" });
  const [toast, setToast] = React.useState("");
  const [sending, setSending] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!form.email || sending) return;
    setSending(true);
    try {
      const res = await fetch(CONTACT_WORKER_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (data.ok) {
        setToast(t.contact.form.success);
        setForm({ name: "", company: "", email: "", phone: "", interest: t.contact.form.interest_opts[0], message: "" });
        setTimeout(() => setToast(""), 4000);
      } else {
        setToast(lang === "en" ? "Send failed, please email us directly." : "发送失败，请直接发邮件至 contact@fantula.net");
        setTimeout(() => setToast(""), 5000);
      }
    } catch {
      setToast(lang === "en" ? "Network error, please try again." : "网络错误，请重试");
      setTimeout(() => setToast(""), 5000);
    } finally {
      setSending(false);
    }
  };
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div className="page-shell">
      <section className="block">
        <div className="wrap">
          <div className="eyebrow">{t.contact.kicker}</div>
          <h2 className="section-title" style={{maxWidth:780, marginTop:18, marginBottom:24}}>
            {t.contact.title_a}<em>{t.contact.title_em}</em>{t.contact.title_b}
          </h2>
          <p className="section-kicker" style={{marginBottom: 56, maxWidth:680}}>{t.contact.lede}</p>

          <div className="contact-grid">
            <div>
              <div className="contact-channels">
                {t.contact.channels.map(([k, v, note], i) => (
                  <div className="channel" key={i} style={{alignItems:"flex-start"}}>
                    <span className="channel-label" style={{paddingTop:6}}>{k}</span>
                    <div>
                      <div className="channel-val">
                        {v.includes("@") ? <a href={`mailto:${v}`}>{v}</a> :
                         v.startsWith("+") ? <a href={`tel:${v.replace(/\s/g,"")}`}>{v}</a> : v}
                      </div>
                      {note && <div style={{fontSize:12.5, color:"var(--ink-3)", marginTop:6, lineHeight:1.55}}>{note}</div>}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{marginTop: 48, padding: 32, border:"1px solid var(--line)", background:"var(--bg-1)", borderRadius:"var(--r-lg)"}}>
                <div className="hero-side-label">{lang === "en" ? "Registered Office" : "注册办公地址"}</div>
                <div style={{fontFamily:"var(--serif)", fontSize:20, color:"var(--ink)", marginTop:14, lineHeight:1.5}}>
                  FANTULA LLC<br/>
                  30 N Gould St Ste R<br/>
                  Sheridan, WY 82801<br/>
                  {lang === "en" ? "United States" : "美国"}
                </div>
                <div style={{marginTop:20, fontFamily:"var(--mono)", fontSize:11, color:"var(--ink-3)", letterSpacing:"0.1em"}}>
                  REG. NO. 2026-001975679
                </div>
              </div>
            </div>

            <form className="form-card" onSubmit={submit}>
              <div className="hero-side-label" style={{marginBottom: 6}}>{t.contact.form.title}</div>
              <p style={{fontSize:12.5, color:"var(--ink-3)", marginBottom: 26, lineHeight:1.6}}>{t.contact.form.sub}</p>

              <div className="form-row">
                <div className="field">
                  <label>{t.contact.form.name}</label>
                  <input value={form.name} onChange={e=>upd("name", e.target.value)} />
                </div>
                <div className="field">
                  <label>{t.contact.form.company}</label>
                  <input value={form.company} onChange={e=>upd("company", e.target.value)} />
                </div>
              </div>

              <div className="form-row">
                <div className="field">
                  <label>{t.contact.form.email} *</label>
                  <input type="email" required value={form.email} onChange={e=>upd("email", e.target.value)} />
                </div>
                <div className="field">
                  <label>{t.contact.form.phone}</label>
                  <input value={form.phone} onChange={e=>upd("phone", e.target.value)} />
                </div>
              </div>

              <div className="field">
                <label>{t.contact.form.interest}</label>
                <select value={form.interest} onChange={e=>upd("interest", e.target.value)}>
                  {t.contact.form.interest_opts.map((o, i) => <option key={i} value={o}>{o}</option>)}
                </select>
              </div>

              <div className="field">
                <label>{t.contact.form.message}</label>
                <textarea value={form.message} onChange={e=>upd("message", e.target.value)} />
              </div>

              <div className="submit-row">
                <span className="note">{t.contact.form.privacy}</span>
                <button type="submit" className="cta-btn solid" disabled={sending} style={{opacity: sending ? 0.7 : 1}}>
                  {sending ? (lang === "en" ? "Sending…" : "发送中…") : t.contact.form.submit}
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>

      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}

Object.assign(window, { AboutPage, ContactPage });