/* global React, Ph, SpecTable, CTAStrip */

/* ============================================================
   LIGHT A SKY COMET PAGE — next-gen light show drone
============================================================ */
function CometPage({ setPage }) {
  const t = useT();
  const { lang } = useLang();
  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="crumb">
            <span onClick={() => setPage("home")} style={{ cursor: "pointer" }}>{t("crumb.home")}</span>
            <span className="sep">/</span>
            <span onClick={() => setPage("products")} style={{ cursor: "pointer" }}>{t("nav.products").toUpperCase()}</span>
            <span className="sep">/</span>
            <span style={{ color: "var(--ink)" }}>{t("crumb.comet")}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 32, flexWrap: "wrap" }}>
            <div style={{ flex: "1 1 600px" }}>
              <h1>{t("comet.h1")}</h1>
              <p className="lede">{t("comet.lede")}</p>
            </div>
          </div>

          {lang !== "LT" &&
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 32 }}>
            {[t("comet.badge1"), t("comet.badge2"), t("comet.badge3"), t("comet.badge4"), t("comet.badge5")].filter(Boolean).map((b) =>
            <span key={b} style={{
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em",
              border: "1px solid var(--line)", padding: "6px 10px", color: "var(--ink-2)",
              textTransform: "uppercase"
            }}>{b}</span>
            )}
          </div>
          }
        </div>
      </header>

      {/* HERO SHOWCASE */}
      <section style={{ padding: 0 }}>
        <div style={{ position: "relative", background: "#020812", overflow: "hidden", padding: "48px 0" }}>
          <div className="container">
            <div className="grid-3" style={{ gap: 12 }}>
              <div style={{ aspectRatio: "4/3", background: "#020812", border: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
                <img src="assets/comet-angled.png" alt="Comet — angled view" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
              </div>
              <div style={{ aspectRatio: "4/3", background: "#020812", border: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
                <img src="assets/comet-pad.png" alt="Comet — launch pad" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
              </div>
              <div style={{ aspectRatio: "4/3", background: "#020812", border: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
                <img src="assets/comet-red.png" alt="Comet — red lights" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
              </div>
            </div>
            {lang !== "LT" &&
            <div style={{ textAlign: "center", marginTop: 28, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase" }}>
              {t("comet.hero.caption")}
            </div>
            }
          </div>
        </div>
      </section>

      {/* HEADLINE STATS */}
      <section>
        <div className="container">
          <div className="grid-4" style={{ gap: 0, border: "1px solid var(--line)" }}>
            <Stat n="60 min" label={t("comet.stat.flight")} />
            <Stat n="1,800 lm" label={t("comet.stat.brightness")} border />
            <Stat n="230 g" label={t("comet.stat.weight")} border />
            <Stat n="0.01 m" label={t("comet.stat.rtk")} border />
          </div>
        </div>
      </section>

      {/* FEATURES GRID */}
      <section className="soft">
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t("comet.feat.eyebrow")}</div>
          <h2 style={{ marginBottom: 40, maxWidth: 720 }}>{t("comet.feat.headline")}</h2>
          <div className="grid-3">
            <Feature tag={t("comet.feat.lighting.tag")} title={t("comet.feat.lighting.title")} copy={t("comet.feat.lighting.copy")} />
            <Feature tag={t("comet.feat.pos.tag")} title={t("comet.feat.pos.title")} copy={t("comet.feat.pos.copy")} />
            <Feature tag={t("comet.feat.red.tag")} title={t("comet.feat.red.title")} copy={t("comet.feat.red.copy")} />
            <Feature tag={t("comet.feat.storage.tag")} title={t("comet.feat.storage.title")} copy={t("comet.feat.storage.copy")} />
            <Feature tag={t("comet.feat.ops.tag")} title={t("comet.feat.ops.title")} copy={t("comet.feat.ops.copy")} />
            <Feature tag={t("comet.feat.sw.tag")} title={t("comet.feat.sw.title")} copy={t("comet.feat.sw.copy")} />
          </div>
        </div>
      </section>

      {/* FULL SPECS */}
      <section>
        <div className="container">
          {lang === "LT" ?
          <div style={{ maxWidth: 760, margin: "0 auto" }}>
            <div className="eyebrow" style={{ textAlign: "center", marginBottom: 28 }}>{t("comet.specs.eyebrow")}</div>
            <SpecTable rows={[
            [t("comet.specs.battery"), t("comet.specs.batteryV")],
            [t("comet.specs.flight"), t("comet.specs.flightV")],
            [t("comet.specs.charge"), t("comet.specs.chargeV")],
            [t("comet.specs.flightSize"), t("comet.specs.flightSizeV")],
            [t("comet.specs.weight"), t("comet.specs.weightV")],
            [t("comet.specs.lighting"), t("comet.specs.lightingV")],
            [t("comet.specs.comm"), t("comet.specs.commV")],
            [t("comet.specs.red"), t("comet.specs.redV")],
            [t("comet.specs.proc"), t("comet.specs.procV")],
            [t("comet.specs.gnss"), t("comet.specs.gnssV")],
            [t("comet.specs.rtk"), t("comet.specs.rtkV")],
            [t("comet.specs.mag"), t("comet.specs.magV")],
            [t("comet.specs.fw"), t("comet.specs.fwV")],
            [t("comet.specs.safety"), t("comet.specs.safetyV")],
            [t("comet.specs.enclosure"), t("comet.specs.enclosureV")],
            [t("comet.specs.case"), t("comet.specs.caseV")]]
            } />
          </div> :
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56 }} className="comet-spec-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>{t("comet.specs.eyebrow")}</div>
              <h2>{t("comet.specs.headline")}</h2>
              <p style={{ marginTop: 16, color: "var(--ink-2)", maxWidth: 460 }}>
                {t("comet.specs.copy")}
              </p>
            </div>
            <SpecTable rows={[
            [t("comet.specs.battery"), t("comet.specs.batteryV")],
            [t("comet.specs.flight"), t("comet.specs.flightV")],
            [t("comet.specs.charge"), t("comet.specs.chargeV")],
            [t("comet.specs.folded"), t("comet.specs.foldedV")],
            [t("comet.specs.flightSize"), t("comet.specs.flightSizeV")],
            [t("comet.specs.weight"), t("comet.specs.weightV")],
            [t("comet.specs.lighting"), t("comet.specs.lightingV")],
            [t("comet.specs.comm"), t("comet.specs.commV")],
            [t("comet.specs.red"), t("comet.specs.redV")],
            [t("comet.specs.proc"), t("comet.specs.procV")],
            [t("comet.specs.gnss"), t("comet.specs.gnssV")],
            [t("comet.specs.rtk"), t("comet.specs.rtkV")],
            [t("comet.specs.mag"), t("comet.specs.magV")],
            [t("comet.specs.fw"), t("comet.specs.fwV")],
            [t("comet.specs.choreo"), t("comet.specs.choreoV")],
            [t("comet.specs.platform"), t("comet.specs.platformV")],
            [t("comet.specs.safety"), t("comet.specs.safetyV")],
            [t("comet.specs.enclosure"), t("comet.specs.enclosureV")],
            [t("comet.specs.case"), t("comet.specs.caseV")]]
            } />
          </div>
          }
        </div>
        <style>{`@media (max-width: 880px) { .comet-spec-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <CTAStrip
        eyebrow={t("comet.cta.eyebrow")}
        title={t("comet.cta.headline")}
        setPage={setPage} />
      
    </>);

}

function Stat({ n, label, border }) {
  return (
    <div style={{
      padding: 28, background: "#fff",
      borderLeft: border ? "1px solid var(--line)" : "none"
    }}>
      <div style={{ fontFamily: "var(--serif)", fontSize: 38, lineHeight: 1, color: "var(--ink)" }}>{n}</div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)", marginTop: 10, textTransform: "uppercase" }}>{label}</div>
    </div>);

}

function Feature({ tag, title, copy }) {
  return (
    <div className="card">
      <div className="eyebrow" style={{ color: "var(--brand)" }}>{tag}</div>
      <h3 style={{ fontFamily: "var(--serif)", fontSize: 21 }}>{title}</h3>
      <p style={{ color: "var(--ink-2)", fontSize: 14.5 }}>{copy}</p>
    </div>);

}

window.CometPage = CometPage;