const AboutPage = ({ setPage, lang }) => {
  const t = (en, id) => lang === "id" ? id : en;
  return (
    <div style={{ paddingTop: 72, background: "#f9f8f6" }}>
      {/* Hero */}
      <div style={{ background: "#111", padding: "100px 32px 80px", textAlign: "center" }}>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#666", margin: "0 0 16px" }}>
          {t("Our Story", "Cerita Kami")}
        </p>
        <h1 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: "clamp(40px, 6vw, 72px)", fontWeight: 300, color: "#f9f8f6", margin: "0 0 24px", lineHeight: 1.1 }}>
          {t("Crafted for the\nModern Woman", "Dibuat untuk\nWanita Modern")}
        </h1>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#666", maxWidth: 480, margin: "0 auto", lineHeight: 1.8 }}>
          {t("We believe every woman deserves a bag that tells her story.", "Kami percaya setiap wanita berhak atas tas yang menceritakan kisahnya.")}
        </p>
      </div>

      {/* Story */}
      <div style={{ maxWidth: 800, margin: "0 auto", padding: "96px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center", marginBottom: 80 }}>
          <div>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "#999", marginBottom: 16 }}>
              {t("Founded 2022", "Berdiri 2022")}
            </p>
            <h2 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 36, fontWeight: 400, color: "#111", marginBottom: 20, lineHeight: 1.2 }}>
              {t("Born from a love of craft", "Lahir dari kecintaan pada kerajinan")}
            </h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#666", lineHeight: 1.9 }}>
              {t(
                "LOPOBYA was born from a simple idea: that a well-made bag can be both a practical companion and a piece of art. We source only the finest materials and work with skilled artisans to bring each design to life.",
                "LOPOBYA lahir dari ide sederhana: tas yang dibuat dengan baik bisa sekaligus menjadi teman sehari-hari dan sebuah karya seni. Kami hanya menggunakan bahan terbaik dan bekerja sama dengan pengrajin terampil untuk menghidupkan setiap desain."
              )}
            </p>
          </div>
          <div style={{ background: "#f0efed", aspectRatio: "3/4", overflow: "hidden" }}>
            <img src="uploads/product_images-1777527711871.png" alt="LOPOBYA craft" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(30%)" }} />
          </div>
        </div>

        {/* Values */}
        <div style={{ borderTop: "1px solid #e8e6e2", paddingTop: 64 }}>
          <h2 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 36, fontWeight: 400, color: "#111", textAlign: "center", marginBottom: 48 }}>
            {t("Our Values", "Nilai Kami")}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
            {[
              { title: t("Quality First", "Kualitas Utama"), body: t("Every stitch, every seam — made to last. We never compromise on materials or craft.", "Setiap jahitan, setiap sambungan — dibuat untuk bertahan. Kami tidak pernah berkompromi soal bahan atau kerajinan.") },
              { title: t("Made Locally", "Buatan Lokal"), body: t("Proudly designed and crafted in Indonesia, supporting local artisans and communities.", "Dengan bangga dirancang dan dibuat di Indonesia, mendukung pengrajin dan komunitas lokal.") },
              { title: t("Timeless Design", "Desain Abadi"), body: t("We create pieces that transcend trends — elegant, functional, and built to be loved for years.", "Kami menciptakan produk yang melampaui tren — elegan, fungsional, dan dicintai bertahun-tahun.") }
            ].map((v, i) => (
              <div key={i}>
                <div style={{ width: 32, height: 1, background: "#111", marginBottom: 20 }} />
                <h3 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 22, fontWeight: 400, color: "#111", marginBottom: 12 }}>{v.title}</h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#777", lineHeight: 1.8 }}>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA */}
      <div style={{ background: "#111", padding: "80px 32px", textAlign: "center" }}>
        <h2 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 44, fontWeight: 300, color: "#f9f8f6", marginBottom: 24 }}>
          {t("Ready to find your bag?", "Siap menemukan tas kamu?")}
        </h2>
        <button onClick={() => setPage("catalog")} style={{
          background: "#f9f8f6", color: "#111", border: "none", cursor: "pointer",
          fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.16em",
          textTransform: "uppercase", fontWeight: 600, padding: "16px 40px"
        }}>
          {t("Shop Collection", "Lihat Koleksi")}
        </button>
      </div>
    </div>
  );
};

const ContactPage = ({ lang }) => {
  const t = (en, id) => lang === "id" ? id : en;
  const [form, setForm] = React.useState({ name: "", email: "", message: "" });
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const inputStyle = {
    width: "100%", padding: "12px 14px",
    background: "#fff", border: "1px solid #e8e6e2",
    fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#111",
    outline: "none", boxSizing: "border-box"
  };
  const labelStyle = {
    fontFamily: "'DM Sans', sans-serif", fontSize: 10,
    letterSpacing: "0.14em", textTransform: "uppercase",
    color: "#888", display: "block", marginBottom: 8, fontWeight: 600
  };

  return (
    <div style={{ paddingTop: 72, background: "#f9f8f6", minHeight: "100vh" }}>
      <div style={{ background: "#111", padding: "80px 32px 64px", textAlign: "center" }}>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#666", margin: "0 0 16px" }}>LOPOBYA</p>
        <h1 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: "clamp(36px, 5vw, 60px)", fontWeight: 400, color: "#f9f8f6", margin: 0 }}>
          {t("Get in Touch", "Hubungi Kami")}
        </h1>
      </div>

      <div style={{ maxWidth: 900, margin: "0 auto", padding: "80px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          {/* Info */}
          <div>
            <h2 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 30, fontWeight: 400, color: "#111", marginBottom: 32 }}>
              {t("Contact Info", "Info Kontak")}
            </h2>
            {[
              { label: "WhatsApp", value: "(+62) 895 1264 5973", href: "https://wa.me/6289512645973" },
              { label: "Instagram", value: "@lopobya", href: "https://instagram.com/lopobya" },
              { label: "Email", value: "hello@lopobya.com", href: "mailto:hello@lopobya.com" },
            ].map((c, i) => (
              <div key={i} style={{ marginBottom: 28 }}>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#999", margin: "0 0 6px", fontWeight: 600 }}>{c.label}</p>
                <a href={c.href} style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#111", textDecoration: "none" }}
                  onMouseEnter={e => e.target.style.textDecoration = "underline"}
                  onMouseLeave={e => e.target.style.textDecoration = "none"}
                >{c.value}</a>
              </div>
            ))}
            <div style={{ marginTop: 48 }}>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#999", margin: "0 0 10px", fontWeight: 600 }}>
                {t("Location", "Lokasi")}
              </p>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#555", lineHeight: 1.7 }}>
                Bekasi, Jawa Barat<br />Indonesia
              </p>
            </div>
          </div>

          {/* Form */}
          <div>
            {sent ? (
              <div style={{ textAlign: "center", padding: "48px 0" }}>
                <h3 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 28, fontWeight: 400, color: "#111", marginBottom: 12 }}>
                  {t("Message Sent!", "Pesan Terkirim!")}
                </h3>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, color: "#888" }}>
                  {t("We'll get back to you soon.", "Kami akan segera menghubungi kamu.")}
                </p>
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                <div>
                  <label style={labelStyle}>{t("Name", "Nama")}</label>
                  <input style={inputStyle} value={form.name} onChange={e => set("name", e.target.value)} placeholder={t("Your name", "Nama kamu")} />
                </div>
                <div>
                  <label style={labelStyle}>{t("Email", "Email")}</label>
                  <input style={inputStyle} type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="email@example.com" />
                </div>
                <div>
                  <label style={labelStyle}>{t("Message", "Pesan")}</label>
                  <textarea style={{ ...inputStyle, height: 120, resize: "vertical" }} value={form.message} onChange={e => set("message", e.target.value)} placeholder={t("How can we help you?", "Bagaimana kami bisa membantu?")} />
                </div>
                <button
                  onClick={() => { if (form.name && form.email && form.message) setSent(true); }}
                  style={{
                    padding: "15px 36px", background: "#111", border: "none", cursor: "pointer",
                    fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.16em",
                    textTransform: "uppercase", color: "#f9f8f6", fontWeight: 600, alignSelf: "flex-start"
                  }}
                >
                  {t("Send Message", "Kirim Pesan")}
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

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