// Contact page

function ContactPage() {
  const { lang } = useT();
  const L = window.I18N[lang].contact;
  const [form, setForm] = useState({ name: "", email: "", topic: L.topics[0], message: "" });
  const [sent, setSent] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 60 }}>
        <div className="container">
          <div className="eyebrow">{L.eyebrow} ✉️</div>
          <h1 style={{ marginTop: 18 }}>{L.title}</h1>
          <p style={{ fontSize: "1.2rem", maxWidth: 640 }}>{L.sub}</p>
        </div>
      </section>

      <section style={{ paddingTop: 20 }}>
        <div className="container">
          <div className="grid grid-2" style={{ gap: 36 }}>
            {/* Form */}
            <div className="card" style={{ background: "var(--paper)", padding: 36, transform: "rotate(-0.5deg)" }}>
              {sent ? (
                <div className="center" style={{ padding: "30px 10px" }}>
                  <Burst size={90} color="var(--green)" style={{ display: "inline-block" }} />
                  <h2 style={{ marginTop: 16 }}>{lang === "th" ? "ส่งแล้ว! 🎉" : "Sent! 🎉"}</h2>
                  <p style={{ fontSize: "1.1rem" }}>{L.sent}</p>
                  <button className="btn btn-small mt-2" onClick={() => { setSent(false); setForm({ name: "", email: "", topic: L.topics[0], message: "" }); }}>
                    {lang === "th" ? "ส่งอีกข้อความ" : "Send another"}
                  </button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="field">
                    <label>{L.labels.name}</label>
                    <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
                  </div>
                  <div className="field">
                    <label>{L.labels.email}</label>
                    <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required />
                  </div>
                  <div className="field">
                    <label>{L.labels.topic}</label>
                    <select value={form.topic} onChange={(e) => setForm({ ...form, topic: e.target.value })}>
                      {L.topics.map((t, i) => <option key={i} value={t}>{t}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>{L.labels.message}</label>
                    <textarea rows={5} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} required />
                  </div>
                  <button type="submit" className="btn btn-red btn-big" style={{ width: "100%", justifyContent: "center" }}>
                    {L.labels.send} 🚀
                  </button>
                </form>
              )}
            </div>

            {/* Info */}
            <div>
              <div className="card" style={{ background: "var(--green)", color: "#fff", transform: "rotate(0.8deg)", marginBottom: 24 }}>
                <div className="display" style={{ fontSize: "1.2rem", marginBottom: 12 }}>📍 {L.visit}</div>
                <p className="hand" style={{ fontSize: "1.15rem", margin: 0 }}>{L.address}</p>
              </div>

              <div className="card" style={{ background: "var(--paper)", transform: "rotate(-0.6deg)", marginBottom: 24 }}>
                <div className="display" style={{ fontSize: "1.1rem", marginBottom: 12 }}>🕐 {lang === "th" ? "เวลาเปิด" : "Hours"}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {L.hours.map((h, i) => (
                    <li key={i} style={{ display: "flex", justifyContent: "space-between", padding: "6px 0", borderBottom: i < 2 ? "1px dashed rgba(0,0,0,0.15)" : "none" }}>
                      <span style={{ fontFamily: "var(--font-hand)", fontSize: "1.1rem" }}>{h.d}</span>
                      <span style={{ fontFamily: "var(--font-display)", fontSize: "0.9rem" }}>{h.h}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="card" style={{ background: "var(--red)", color: "#fff", transform: "rotate(0.8deg)" }}>
                <div style={{ marginBottom: 10, display: "flex", gap: 10, alignItems: "center" }}>
                  <span style={{ fontSize: "1.5rem" }}>📱</span>
                  <span className="hand" style={{ fontSize: "1.2rem" }}>{L.phone}</span>
                </div>
                <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <span style={{ fontSize: "1.5rem" }}>✉️</span>
                  <span className="hand" style={{ fontSize: "1.2rem" }}>{L.email}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Map placeholder */}
      <section>
        <div className="container">
          <div className="card" style={{ padding: 0, overflow: "hidden", aspectRatio: "16 / 7", background: "var(--paper)" }}>
            <div style={{
              width: "100%", height: "100%",
              backgroundImage: "repeating-linear-gradient(0deg, rgba(43,91,255,0.15) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(43,91,255,0.15) 0 1px, transparent 1px 40px)",
              background: `
                repeating-linear-gradient(0deg, rgba(43,91,255,0.18) 0 1px, transparent 1px 40px),
                repeating-linear-gradient(90deg, rgba(43,91,255,0.18) 0 1px, transparent 1px 40px),
                #f0f4ff
              `,
              position: "relative",
              display: "grid", placeItems: "center",
            }}>
              {/* Roads */}
              <div style={{ position: "absolute", top: "40%", left: 0, right: 0, height: 18, background: "var(--paper)", borderTop: "3px solid var(--ink)", borderBottom: "3px solid var(--ink)" }} />
              <div style={{ position: "absolute", top: 0, bottom: 0, left: "55%", width: 18, background: "var(--paper)", borderLeft: "3px solid var(--ink)", borderRight: "3px solid var(--ink)" }} />
              {/* Pin */}
              <div style={{ position: "absolute", top: "32%", left: "53%", transform: "translate(-50%, -100%)" }}>
                <svg width="60" height="80" viewBox="0 0 60 80">
                  <g filter="url(#wobble-soft)">
                    <path d="M30 4 Q4 4, 4 30 Q4 50, 30 76 Q56 50, 56 30 Q56 4, 30 4 Z" fill="var(--red)" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
                    <circle cx="30" cy="28" r="10" fill="var(--paper)" stroke="var(--ink)" strokeWidth="3" />
                  </g>
                </svg>
                <div className="pill" style={{ background: "var(--ink)", color: "var(--paper)", marginTop: 4, whiteSpace: "nowrap" }}>Pixel Craft</div>
              </div>
              {/* Mini doodles */}
              <div style={{ position: "absolute", top: "70%", left: "20%" }}><span style={{ fontSize: "1.6rem" }}>🌳</span></div>
              <div style={{ position: "absolute", top: "20%", left: "30%" }}><span style={{ fontSize: "1.4rem" }}>🏢</span></div>
              <div style={{ position: "absolute", top: "65%", left: "75%" }}><span style={{ fontSize: "1.4rem" }}>🏠</span></div>
              <div style={{ position: "absolute", top: "10%", left: "75%" }}><span style={{ fontSize: "1.4rem" }}>🌳</span></div>
            </div>
          </div>
          <p className="hand center" style={{ marginTop: 12, opacity: 0.6 }}>
            {lang === "th" ? "(แผนที่แบบแน่นๆ มีเร็วๆนี้)" : "(real map coming soon — this is doodled)"}
          </p>
        </div>
      </section>
    </div>
  );
}

window.ContactPage = ContactPage;