/* global React */
const { useEffect, useState } = React;

const PRODUCTS = [
  {
    id: "book",
    code: "N° 001",
    title: "The 1 Percent",
    subtitleEn: "Hardcover · First Edition",
    subtitleEs: "Tapa dura · Primera edición",
    tagEn: "PRE-ORDER",
    tagEs: "PRE-VENTA",
    status: "available",
    price: "$20.00",
    img: "images/product-book.png",
    descEn: "A field manual for becoming better by one percent — physically, spiritually, emotionally. Written by Timothy Valverde, drawn from the eight-year journey beside his son.",
    descEs: "Un manual de campo para ser un uno por ciento mejor — en lo físico, lo espiritual y lo emocional. Escrito por Timothy Valverde, nacido de los ocho años de camino junto a su hijo.",
  },
  {
    id: "pray",
    code: "N° 002",
    title: "Pray for Hunt",
    subtitleEn: "Cotton Tee · Heavyweight",
    subtitleEs: "Camiseta · Algodón grueso",
    tagEn: "SOLD OUT",
    tagEs: "AGOTADO",
    status: "soldout",
    price: "$20.00",
    img: "images/product-pray-tee.png",
    descEn: "Worn by the family. Worn by the strangers who became friends. Three words that carried us through two surgeries and one removed eye.",
    descEs: "La llevó la familia. La llevaron desconocidos que se volvieron amigos. Tres palabras que nos sostuvieron a lo largo de dos cirugías y la pérdida de un ojo.",
  },
  {
    id: "hunt",
    code: "N° 003",
    title: "Hunt",
    subtitleEn: "Cotton Tee · Heavyweight",
    subtitleEs: "Camiseta · Algodón grueso",
    tagEn: "SOLD OUT",
    tagEs: "AGOTADO",
    status: "soldout",
    price: "$20.00",
    img: "images/product-hunt-tee.png",
    descEn: "His name. His fight. The proceeds support the journey — and others walking the same road.",
    descEs: "Su nombre. Su lucha. Lo recaudado sostiene el camino — y acompaña a otras familias en la misma senda.",
  },
];

function MerchHero() {
  const t = useT();
  return (
    <section className="merch-hero">
      <div className="wrap merch-hero-content">
        <h1 className="title-xl">
          {t(
            <>Worn with<br /><em>intention.</em></>,
            <>Llevadas con<br /><em>intención.</em></>
          )}
        </h1>
        <p className="body" style={{ maxWidth: "48ch", marginTop: 32 }}>
          {t(
            "A small, considered collection. Each piece carries a story — a son's name, a father's vow, a quiet protocol for becoming better.",
            "Una colección breve y deliberada. Cada pieza guarda una historia — el nombre de un hijo, la promesa de un padre, un protocolo silencioso para ser mejor."
          )}
        </p>

        <div className="merch-hero-meta-grid">
          <div><dt>{t("Items", "Piezas")}</dt><dd>03</dd></div>
          <div><dt>{t("Edition", "Edición")}</dt><dd>{t("First", "Primera")}</dd></div>
          <div><dt>{t("Currency", "Moneda")}</dt><dd>USD · EUR</dd></div>
          <div><dt>{t("Cause", "Causa")}</dt><dd>+1%</dd></div>
        </div>
      </div>
    </section>
  );
}

function ProductRow({ product, index }) {
  const t = useT();
  const flipped = index % 2 === 1;
  const tag = t(product.tagEn, product.tagEs);
  return (
    <article className={`product-row ${flipped ? "is-flipped" : ""}`} id={product.id}>
      <div className="curtain product-row-img bracket">
        <img src={product.img} alt={product.title} loading="lazy" decoding="async" />
        <span className={`product-status ${product.status === "available" ? "product-status--gold" : ""}`}>
          {tag}
        </span>
      </div>

      <div className="product-row-text reveal">
        <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 72px)", fontWeight: 300, lineHeight: 1.0, marginBottom: 12 }}>
          {product.title}
        </h2>
        <p className="mono" style={{ fontSize: 10, letterSpacing: "0.28em", color: "var(--cream-dim)", textTransform: "uppercase", marginBottom: 28 }}>
          {t(product.subtitleEn, product.subtitleEs)}
        </p>

        <p className="body" style={{ marginBottom: 36 }}>{t(product.descEn, product.descEs)}</p>

        <div className="product-row-spec">
          <div><span className="mono spec-label">{t("Price", "Precio")}</span><span className="serif spec-val">{product.price}</span></div>
          <div><span className="mono spec-label">{t("Status", "Estado")}</span><span className="serif spec-val" style={{ color: product.status === "available" ? "var(--gold)" : "var(--cream-dim)" }}>{tag}</span></div>
          <div><span className="mono spec-label">{t("Ships", "Envío")}</span><span className="serif spec-val">{t("Worldwide", "A todo el mundo")}</span></div>
        </div>

        {product.status === "available" ? (
          <a href="https://www.the1percent.work/products/the-1-percent-book" target="_blank" rel="noreferrer" className="btn">
            <span>{t("Reserve copy", "Reservar ejemplar")}</span><span className="arrow">→</span>
          </a>
        ) : (
          <button className="btn" disabled style={{ opacity: 0.5, cursor: "not-allowed" }}>
            <span>{t("Notify when restocked", "Avísame cuando regrese")}</span><span className="arrow">→</span>
          </button>
        )}
      </div>
    </article>
  );
}

function MerchGrid() {
  const t = useT();
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num="N° 01" label={t("The collection", "La colección")} title={t("<em>Three</em> pieces. One mission.", "<em>Tres</em> piezas. Una misión.")} />
        <div className="merch-rows">
          {PRODUCTS.map((p, i) => <ProductRow key={p.id} product={p} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function ProvenanceBlock() {
  const t = useT();
  const points = [
    { num: "01",
      titleEn: "Considered", titleEs: "Cuidada",
      bodyEn: "Each piece is small-batch and printed locally. Heavyweight cotton, no shortcuts.",
      bodyEs: "Cada pieza es de tirada corta e impresa localmente. Algodón grueso, sin atajos." },
    { num: "02",
      titleEn: "Purposeful", titleEs: "Con propósito",
      bodyEn: "Proceeds support the journey — Hunt's continued care and the families walking the same road.",
      bodyEs: "Lo recaudado sostiene el camino — el cuidado continuo de Hunt y las familias que recorren la misma senda." },
    { num: "03",
      titleEn: "Personal", titleEs: "Personal",
      bodyEn: "Every order is hand-packed by the family. A handwritten note, when there's time.",
      bodyEs: "Cada pedido lo empaca la familia a mano. Una nota escrita a mano, cuando alcanza el tiempo." },
  ];
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead num="N° 02" label={t("Provenance", "Procedencia")} title={t("<em>Why</em> we make these.", "<em>Por qué</em> las hacemos.")} />
        <div className="provenance-grid">
          {points.map((p) => (
            <div className="provenance-card reveal" key={p.num}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{p.num}</span>
              <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, margin: "20px 0 16px" }}>{t(p.titleEn, p.titleEs)}</h3>
              <p className="body" style={{ fontSize: 15 }}>{t(p.bodyEn, p.bodyEs)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AppInner() {
  const t = useT();
  useReveal();
  return (
    <>
      <div className="grain" />
      <TopBar active="merch" />
      <main>
        <MerchHero />
        <MerchGrid />
        <ProvenanceBlock />
      </main>
      <Footer />
    </>
  );
}

function App() {
  return <LangProvider><AppInner /></LangProvider>;
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);