const TEMPLATES = [
  {
    key: "collab",
    label: "Collaborate",
    hint: "Industry or academic partnership",
    subject: "Collaboration inquiry — NetDB Lab",
    body:
      "Dear Prof. Chuang,\n\n" +
      "I'd like to explore a potential collaboration with NetDB Lab on <topic>.\n\n" +
      "A bit about me / my team:\n- \n\nWhat I'm hoping to discuss:\n- \n\nBest,\n<Your name>",
  },
  {
    key: "visit",
    label: "Visit the lab",
    hint: "Schedule a tour or short visit",
    subject: "Lab visit request — <your institution>",
    body:
      "Dear Prof. Chuang,\n\n" +
      "I'd love to visit NetDB Lab during <dates>. I'm especially interested in <area>.\n\n" +
      "Best,\n<Your name>",
  },
  {
    key: "join",
    label: "Join as student",
    hint: "PhD / MS / research assistant",
    subject: "Prospective student — <your name>",
    body:
      "Dear Prof. Chuang,\n\n" +
      "I'm applying to NCKU CSIE for <PhD/MS> and am interested in joining NetDB Lab.\n\n" +
      "Background:\n- \n\nResearch interests:\n- \n\nCV attached.\n\nBest,\n<Your name>",
  },
];

const mailto = (to, t) =>
  `mailto:${to}?subject=${encodeURIComponent(t.subject)}&body=${encodeURIComponent(t.body)}`;

const Contact = () => {
  const c = window.CONTACT;
  const [picked, setPicked] = React.useState(TEMPLATES[0].key);
  const tpl = TEMPLATES.find(t => t.key === picked) || TEMPLATES[0];

  return (
    <section className="section" id="contact">
      <div className="section-head">
        <span className="section-eyebrow">Postcard · /contact</span>
        <Cli path="contact" cmd="echo" flags={' "hello@netdb" | mail -s visit'}/>
        <h2 className="section-title">Get in <em style={{fontStyle:"italic",color:"var(--mint-deep)"}}>touch</em></h2>
        <p className="section-sub">Questions about joining, collaborating, or visiting the lab? Pick a template — it opens your email app with the subject and greeting pre-filled.</p>
      </div>
      <div className="postcard-wrap">
        <div className="postcard" aria-label="Email templates">
          <div className="postcard-stamp">
            <span className="big">ND</span>
            <span>NETDB<br/>LAB · TW</span>
          </div>
          <div className="postcard-body">
            <h3 className="postcard-title">Drop us a postcard</h3>
            <p className="postcard-sub">Pick a starting point — your mail client will open with the rest ready to edit.</p>

            <div className="tpl-picker">
              {TEMPLATES.map(t => (
                <button
                  key={t.key}
                  type="button"
                  className={"tpl-chip" + (picked === t.key ? " on" : "")}
                  onClick={() => setPicked(t.key)}>
                  <b>{t.label}</b>
                  <small>{t.hint}</small>
                </button>
              ))}
            </div>

            <div className="tpl-preview" aria-live="polite">
              <div className="tpl-head">
                <div><span className="tpl-k">To</span><code>{c.email}</code></div>
                <div><span className="tpl-k">Subject</span><code>{tpl.subject}</code></div>
              </div>
              <pre className="tpl-body">{tpl.body}</pre>
            </div>

            <a className="btn btn-primary form-submit" href={mailto(c.email, tpl)}>
              Open in email app <Icon name="arrow" size={16}/>
            </a>
          </div>
        </div>

        <div>
          <div className="mailbox">
            <h4><Icon name="pin" size={18} color="var(--mint-deep)"/> Island Mailbox</h4>
            <address>{c.address}</address>
            <div className="mailbox-row"><span className="lbl">Email</span><a href={`mailto:${c.email}`}>{c.email}</a></div>
            <div className="mailbox-row"><span className="lbl">Phone</span><span>{c.phone}</span></div>
            <div className="mailbox-row"><span className="lbl">Map</span><a href={c.map_url} target="_blank" rel="noreferrer">Google Maps ↗</a></div>
            <div className="socials">
              {c.socials.map(s => (
                <a key={s.label} className="social" href={s.url} target="_blank" rel="noreferrer" title={s.label}>
                  {s.label}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Contact = Contact;