// pages-misc.jsx — About, Contact, Cart

const { useState: useStateAC } = React;

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT
function AboutPage({ navigate }) {
  return (
    <main data-screen-label="About">
      <section style={{ paddingTop: 88, paddingBottom: 80 }}>
        <div className="container">
          <Eyebrow>About Genmax</Eyebrow>
          <h1 style={{
            fontSize: "clamp(48px, 6vw, 88px)",
            fontWeight: 400,
            letterSpacing: "-0.035em",
            margin: "32px 0 0",
            lineHeight: 0.98,
            maxWidth: 900,
          }}>
            We started Genmax because we couldn't find a peptide supplier we trusted.
          </h1>
          <p style={{
            fontSize: 18,
            lineHeight: 1.6,
            color: "var(--muted)",
            marginTop: 40,
            maxWidth: 640,
          }}>
            Genmax Laboratories is a small, independent supplier of research-grade peptides. We exist
            for one reason: to make laboratory peptides honest, traceable, and boring — in the best
            possible way.
          </p>
        </div>
      </section>

      <section>
        <div className="container">
          <div style={{
            width: "100%",
            aspectRatio: "2/1",
            overflow: "hidden",
            border: "1px solid var(--border)",
          }}>
            <img
              src="assets/lab-desk.jpg"
              alt="Genmax laboratory — wide view"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                objectPosition: "center",
                display: "block",
              }}
            />
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 120 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }} className="about-grid">
            <div style={{ position: "sticky", top: 96, alignSelf: "start" }}>
              <Eyebrow>The story</Eyebrow>
            </div>
            <div style={{ maxWidth: 680 }}>
              <h2 style={{ fontSize: 32, fontWeight: 400, letterSpacing: "-0.02em", margin: 0, lineHeight: 1.15 }}>
                Founded in 2022 by two researchers who were tired of unverified vials.
              </h2>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--muted)", marginTop: 28 }}>
                Between us we'd seen too many batches arrive without paperwork, too many "99% pure"
                claims that didn't survive a real HPLC run, and too many suppliers who confused
                marketing with science. We thought we could do better — not by being the biggest
                catalog, but by being the most disciplined one.
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--muted)", marginTop: 16 }}>
                Today, Genmax supplies labs in 14 countries. Every compound we sell is HPLC-verified
                by an independent partner facility before it ships. Our catalog stays deliberately
                small. We'd rather be known for the things we do well.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section style={{ paddingTop: 120 }}>
        <div className="container">
          <SectionHeader eyebrow="What we stand for" title="Three commitments. No exceptions." />
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 0,
            borderTop: "1px solid var(--fg)",
          }} className="values-grid">
            {[
              ["Transparency",
                "Every batch ships with its own third-party HPLC certificate. The same chromatogram you see in our test reports is the one for the vial in your hand. No batch substitution, no recycled paperwork."],
              ["Discipline",
                "We don't add products to chase volume. Every compound in the catalog earned its place through repeated synthesis runs, stability testing, and customer demand. We say no often."],
              ["Responsibility",
                "Our peptides are sold for laboratory research only. We make no medical claims, never suggest dosing, and won't ship to jurisdictions where research peptides are restricted. Good science requires honest sourcing."],
            ].map(([t, d], i) => (
              <div key={t} style={{
                padding: "32px 32px 32px 0",
                paddingLeft: i === 0 ? 0 : 32,
                borderRight: i === 2 ? "none" : "1px solid var(--border)",
              }}>
                <Code>0{i + 1}</Code>
                <h3 style={{ fontSize: 22, fontWeight: 500, margin: "20px 0 12px", letterSpacing: "-0.01em" }}>{t}</h3>
                <p style={{ fontSize: 13, lineHeight: 1.65, color: "var(--muted)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* STATS */}
      <section style={{ paddingTop: 120 }}>
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            borderTop: "1px solid var(--border)",
            borderBottom: "1px solid var(--border)",
          }} className="stats-grid">
            {[
              ["14", "countries shipped"],
              ["≥99%", "purity threshold"],
              ["100%", "batches third-party tested"],
              ["48h", "support response SLA"],
            ].map(([n, l], i) => (
              <div key={l} style={{
                padding: "48px 32px",
                borderLeft: i === 0 ? "none" : "1px solid var(--border)",
              }}>
                <div style={{ fontSize: 56, fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1 }}>{n}</div>
                <Code style={{ marginTop: 16, display: "block" }}>{l}</Code>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 120 }}>
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
            <Eyebrow style={{ justifyContent: "center" }}>Next step</Eyebrow>
            <h2 style={{ fontSize: 40, fontWeight: 400, letterSpacing: "-0.025em", margin: "20px 0 0", lineHeight: 1.1 }}>
              Browse the catalog or get in touch with the lab.
            </h2>
            <div style={{ marginTop: 40, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <Button size="lg" onClick={() => navigate("shop")}>View catalog</Button>
              <Button size="lg" variant="secondary" onClick={() => navigate("contact")}>Contact us</Button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CONTACT
function ContactPage({ navigate }) {
  const [form, setForm] = useStateAC({ name: "", email: "", lab: "", topic: "general", msg: "" });
  const [sent, setSent] = useStateAC(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main data-screen-label="Contact">
      <section style={{ paddingTop: 88, paddingBottom: 64 }}>
        <div className="container">
          <Eyebrow>Contact</Eyebrow>
          <h1 style={{
            fontSize: "clamp(48px, 6vw, 80px)",
            fontWeight: 400,
            letterSpacing: "-0.03em",
            margin: "28px 0 0",
            lineHeight: 1,
            maxWidth: 900,
          }}>
            Talk to the lab.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--muted)", marginTop: 28, maxWidth: 560 }}>
            Real responses, written by real lab staff. We aim to reply within one business day, and
            we won't pass you to a chatbot.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80 }} className="contact-grid">
            {/* Info */}
            <div>
              <Eyebrow>Channels</Eyebrow>
              <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 28 }}>
                {[
                  ["General inquiries", "lab@genmax.bio", "Replies within 24h, Mon–Fri"],
                  ["Order support", "orders@genmax.bio", "Tracking, COAs, replacements"],
                  ["Research collaborations", "partners@genmax.bio", "Custom synthesis, bulk orders"],
                  ["Press & media", "press@genmax.bio", "Information requests"],
                ].map(([t, e, sub]) => (
                  <div key={t}>
                    <div style={{ fontSize: 13, color: "var(--muted)" }}>{t}</div>
                    <div style={{ fontSize: 18, marginTop: 4, fontWeight: 500, letterSpacing: "-0.005em" }}>{e}</div>
                    <Code style={{ marginTop: 4, display: "block" }}>{sub}</Code>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--border)" }}>
                <Eyebrow>Laboratory</Eyebrow>
                <div style={{ fontSize: 14, marginTop: 16, lineHeight: 1.7, color: "var(--fg)" }}>
                  Genmax Laboratories<br/>
                  Strada Frumoasă 12<br/>
                  010987 București<br/>
                  Romania
                </div>
                <Code style={{ marginTop: 16, display: "block" }}>Visits by appointment only</Code>
              </div>
            </div>

            {/* Form */}
            <form onSubmit={onSubmit} style={{
              padding: 40,
              border: "1px solid var(--border)",
              background: "var(--surface)",
            }}>
              {sent ? (
                <div style={{ padding: "40px 0", textAlign: "center" }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: "50%",
                    background: "var(--accent)",
                    margin: "0 auto",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "#fff",
                    fontSize: 18,
                  }}>✓</div>
                  <h3 style={{ fontSize: 22, fontWeight: 500, margin: "20px 0 8px", letterSpacing: "-0.01em" }}>Message received.</h3>
                  <p style={{ fontSize: 14, color: "var(--muted)", margin: 0 }}>We'll be in touch within one business day.</p>
                </div>
              ) : (
                <React.Fragment>
                  <Eyebrow>Send a message</Eyebrow>
                  <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                    <Field label="Name" value={form.name} onChange={(v) => setForm({ ...form, name: v })} />
                    <Field label="Email" type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} />
                  </div>
                  <div style={{ marginTop: 16 }}>
                    <Field label="Laboratory / institution" value={form.lab} onChange={(v) => setForm({ ...form, lab: v })} optional />
                  </div>
                  <div style={{ marginTop: 16 }}>
                    <FieldLabel>Topic</FieldLabel>
                    <select
                      value={form.topic}
                      onChange={(e) => setForm({ ...form, topic: e.target.value })}
                      style={{
                        width: "100%",
                        marginTop: 8,
                        padding: "14px 14px",
                        background: "var(--bg)",
                        border: "1px solid var(--border)",
                        fontFamily: "inherit",
                        fontSize: 14,
                        color: "var(--fg)",
                        borderRadius: 0,
                      }}
                    >
                      <option value="general">General inquiry</option>
                      <option value="order">Order support</option>
                      <option value="partner">Research partnership</option>
                      <option value="press">Press</option>
                    </select>
                  </div>
                  <div style={{ marginTop: 16 }}>
                    <FieldLabel>Message</FieldLabel>
                    <textarea
                      value={form.msg}
                      onChange={(e) => setForm({ ...form, msg: e.target.value })}
                      rows={6}
                      style={{
                        width: "100%",
                        marginTop: 8,
                        padding: "14px",
                        background: "var(--bg)",
                        border: "1px solid var(--border)",
                        fontFamily: "inherit",
                        fontSize: 14,
                        color: "var(--fg)",
                        borderRadius: 0,
                        resize: "vertical",
                        boxSizing: "border-box",
                      }}
                    />
                  </div>
                  <div style={{ marginTop: 24, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                    <Code>Encrypted submission · GDPR compliant</Code>
                    <Button type="submit" size="lg">Send message</Button>
                  </div>
                </React.Fragment>
              )}
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

function FieldLabel({ children, optional }) {
  return (
    <label style={{
      fontFamily: "var(--mono)",
      fontSize: 10,
      letterSpacing: "0.14em",
      textTransform: "uppercase",
      color: "var(--muted)",
      display: "flex",
      gap: 8,
    }}>
      {children}
      {optional && <span style={{ opacity: 0.6 }}>· optional</span>}
    </label>
  );
}

function Field({ label, value, onChange, type = "text", optional }) {
  return (
    <div>
      <FieldLabel optional={optional}>{label}</FieldLabel>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        required={!optional}
        style={{
          width: "100%",
          marginTop: 8,
          padding: "14px",
          background: "var(--bg)",
          border: "1px solid var(--border)",
          fontFamily: "inherit",
          fontSize: 14,
          color: "var(--fg)",
          borderRadius: 0,
          boxSizing: "border-box",
          outline: "none",
        }}
      />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CART
function CartPage({ navigate, cart, updateQty, removeItem }) {
  const subtotal = cart.reduce((s, l) => s + l.product.price * l.qty, 0);
  const shipping = subtotal > 0 ? 18 : 0;
  const total = subtotal + shipping;
  const empty = cart.length === 0;

  return (
    <main data-screen-label="Cart">
      <section style={{ paddingTop: 64, paddingBottom: 24, borderBottom: "1px solid var(--border)" }}>
        <div className="container">
          <Eyebrow>Cart</Eyebrow>
          <h1 style={{ fontSize: 56, fontWeight: 400, letterSpacing: "-0.03em", margin: "16px 0 0", lineHeight: 1 }}>
            Checkout
            {!empty && <span style={{ color: "var(--muted)" }}> · {cart.length} {cart.length === 1 ? "item" : "items"}</span>}
          </h1>
        </div>
      </section>

      <section style={{ paddingTop: 48, paddingBottom: 40 }}>
        <div className="container">
          {empty ? (
            <div style={{ padding: "80px 0", textAlign: "center" }}>
              <Code>Your cart is empty</Code>
              <h2 style={{ fontSize: 32, fontWeight: 400, letterSpacing: "-0.02em", margin: "20px 0 0" }}>Nothing here yet.</h2>
              <p style={{ fontSize: 14, color: "var(--muted)", margin: "12px 0 32px" }}>Browse the catalog to add research compounds.</p>
              <Button onClick={() => navigate("shop")} size="lg">Browse catalog →</Button>
            </div>
          ) : (
            <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64 }} className="cart-grid">
              {/* Items */}
              <div>
                <div style={{ borderTop: "1px solid var(--fg)" }}>
                  {cart.map((line) => (
                    <div key={line.product.id} style={{
                      display: "grid",
                      gridTemplateColumns: "96px 1fr auto",
                      gap: 24,
                      padding: "24px 0",
                      borderBottom: "1px solid var(--border)",
                      alignItems: "center",
                    }}>
                      <div style={{ width: 96 }}>
                        <Placeholder label={line.product.shortName} ratio="1/1" />
                      </div>
                      <div>
                        <Code>{line.product.code} · {line.product.dose}</Code>
                        <h3 style={{ fontSize: 17, fontWeight: 500, margin: "4px 0 0", letterSpacing: "-0.005em" }}>{line.product.name}</h3>
                        <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 4 }}>{line.product.category}</div>
                        <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 16 }}>
                          <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--border)" }}>
                            <button onClick={() => updateQty(line.product.id, Math.max(1, line.qty - 1))} style={qtyBtn}>−</button>
                            <div style={{ width: 28, textAlign: "center", fontFamily: "var(--mono)", fontSize: 13 }}>{line.qty}</div>
                            <button onClick={() => updateQty(line.product.id, line.qty + 1)} style={qtyBtn}>+</button>
                          </div>
                          <button onClick={() => removeItem(line.product.id)} style={{
                            background: "transparent",
                            border: 0,
                            color: "var(--muted)",
                            fontSize: 12,
                            cursor: "pointer",
                            fontFamily: "inherit",
                            textDecoration: "underline",
                            textDecorationColor: "var(--border)",
                            textUnderlineOffset: 3,
                            padding: 0,
                          }}>Remove</button>
                        </div>
                      </div>
                      <div style={{ fontSize: 16, fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>
                        ${line.product.price * line.qty}
                      </div>
                    </div>
                  ))}
                </div>

                <button onClick={() => navigate("shop")} style={{
                  marginTop: 24,
                  background: "transparent",
                  border: 0,
                  fontSize: 13,
                  color: "var(--accent)",
                  cursor: "pointer",
                  fontFamily: "inherit",
                  padding: 0,
                }}>← Continue shopping</button>
              </div>

              {/* Summary */}
              <aside>
                <div style={{ position: "sticky", top: 96 }}>
                  <div style={{ border: "1px solid var(--border)", background: "var(--surface)", padding: 32 }}>
                    <Eyebrow>Order summary</Eyebrow>
                    <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 12, fontSize: 14 }}>
                      <Row k="Subtotal" v={`$${subtotal}`} />
                      <Row k="Cold-chain shipping" v={`$${shipping}`} />
                      <Row k="Tax" v="Calculated at checkout" muted />
                    </div>
                    <div style={{
                      marginTop: 20,
                      paddingTop: 20,
                      borderTop: "1px solid var(--border)",
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "baseline",
                    }}>
                      <span style={{ fontSize: 14, color: "var(--muted)" }}>Total</span>
                      <span style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em" }}>${total}</span>
                    </div>
                    <div style={{ marginTop: 24 }}>
                      <Button size="lg" full>Secure checkout →</Button>
                    </div>
                    <div style={{
                      marginTop: 20,
                      display: "flex",
                      flexDirection: "column",
                      gap: 8,
                      fontSize: 12,
                      color: "var(--muted)",
                    }}>
                      <TrustLine>256-bit SSL encryption</TrustLine>
                      <TrustLine>No card details stored on our servers</TrustLine>
                      <TrustLine>Cold-chain shipping included</TrustLine>
                      <TrustLine>Insured shipment with replacement guarantee</TrustLine>
                    </div>
                    <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
                      {["Visa", "Mastercard", "Amex", "SEPA", "Crypto"].map((m) => (
                        <span key={m} style={{
                          fontFamily: "var(--mono)",
                          fontSize: 10,
                          letterSpacing: "0.08em",
                          textTransform: "uppercase",
                          padding: "4px 8px",
                          border: "1px solid var(--border)",
                          color: "var(--muted)",
                        }}>{m}</span>
                      ))}
                    </div>
                  </div>

                  <div style={{ marginTop: 24, padding: 20, border: "1px solid var(--border)" }}>
                    <Code>For research use only</Code>
                    <p style={{ fontSize: 12, lineHeight: 1.6, color: "var(--muted)", margin: "10px 0 0" }}>
                      By completing this order, you confirm you are a qualified researcher purchasing
                      these compounds strictly for laboratory and research use.
                    </p>
                  </div>
                </div>
              </aside>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

const qtyBtn = {
  width: 32, height: 36,
  background: "transparent",
  border: 0,
  fontFamily: "var(--mono)",
  fontSize: 14,
  color: "var(--fg)",
  cursor: "pointer",
};

function Row({ k, v, muted }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <span style={{ color: "var(--muted)" }}>{k}</span>
      <span style={{ color: muted ? "var(--muted)" : "var(--fg)", fontVariantNumeric: "tabular-nums" }}>{v}</span>
    </div>
  );
}

function TrustLine({ children }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{
        width: 5, height: 5, background: "var(--accent)", display: "inline-block",
      }} />
      {children}
    </div>
  );
}

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