/* global React, Ph, SpecTable, CTAStrip */
const { useState: useStateProd } = React;

/* ============================================================
   PRODUCTS PAGE — Parrot ANAFI UKR range
============================================================ */
function ProductsPage({ setPage }) {
  const [active, setActive] = useStateProd("ukr");

  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="crumb">
            <span onClick={() => setPage("home")} style={{ cursor: "pointer" }}>HOME</span>
            <span className="sep">/</span>
            <span style={{ color: "var(--ink)" }}>PRODUCTS · PARROT ANAFI UKR RANGE</span>
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 32, flexWrap: "wrap" }}>
            <div style={{ flex: "1 1 600px" }}>
              <h1>The Parrot ANAFI UKR range — defence-grade micro-UAVs.</h1>
              <p className="lede">
                Parrot is a French company and European leader in professional micro-UAVs.
                The ANAFI UKR range is used by defence forces, law enforcement, first responders
                and government agencies in over 100 countries.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end", minWidth: 180 }}>
              <img src="assets/parrot-black.png" alt="Parrot" style={{ height: 28, width: "auto" }} />
              <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.16em", color: "var(--ink-3)" }}>OFFICIAL RESELLER · LT</div>
            </div>
          </div>

          {/* Compliance badges row */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 32 }}>
            {["GDPR compliant", "Blue UAS approved", "NDAA compliant", "No Chinese components", "European servers"].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>

      {/* Product nav tabs */}
      <div style={{ position: "sticky", top: 72, zIndex: 20, background: "rgba(255,255,255,0.95)", backdropFilter: "blur(8px)", borderBottom: "1px solid var(--line-soft)" }}>
        <div className="container" style={{ display: "flex", gap: 4, overflowX: "auto" }}>
          {[
            { id: "ukr", label: "ANAFI UKR" },
            { id: "gov", label: "ANAFI UKR GOV" },
            { id: "xlr", label: "XLR Battery" },
            { id: "acc", label: "Accessories" },
          ].map(t => (
            <button key={t.id} onClick={() => {
              setActive(t.id);
              const el = document.getElementById("p-" + t.id);
              if (el) window.scrollTo({ top: el.offsetTop - 130, behavior: "smooth" });
            }} style={{
              background: "transparent", border: "none",
              padding: "16px 20px", fontSize: 13, fontWeight: 500,
              color: active === t.id ? "var(--ink)" : "var(--ink-3)",
              borderBottom: active === t.id ? "2px solid var(--brand)" : "2px solid transparent",
              fontFamily: "var(--sans)", letterSpacing: "0.02em",
            }}>{t.label}</button>
          ))}
        </div>
      </div>

      {/* PRODUCT 1 — ANAFI UKR */}
      <section id="p-ukr">
        <div className="container">
          <ProductBlock
            tagText="PRODUCT 01 / 04"
            name="Parrot ANAFI UKR"
            tagline="Compact, foldable tactical drone for defence missions and high-threat environments."
            featureBadges={[
              { label: "35x ZOOM RGB", icon: "camera" },
              { label: "FLIR BOSON THERMAL", icon: "thermal" },
              { label: "GPS-DENIED OP", icon: "gps" },
              { label: "IP53 RATED", icon: "shield" },
              { label: "READY < 2 MIN", icon: "clock" },
              { label: "AES-256", icon: "lock" },
            ]}
            description="Developed from direct frontline field feedback, it combines embedded AI, optical navigation and full offline autonomy in a sub-1 kg format. Dual EO/IR payload: 35x zoom RGB camera and FLIR Boson thermal camera. Operates without GPS using visual-inertial odometry and satellite image matching."
            specs={[
              ["Weight", "959 g (standard battery)"],
              ["Max takeoff weight", "1,450 g"],
              ["Flight time", "38 min standard / 70 min XLR battery"],
              ["Max range", "23 km standard / 40 km XLR battery"],
              ["RGB camera", "35x zoom · 1080p at 30fps live stream"],
              ["Thermal camera", "FLIR Boson 640×512 px"],
              ["Connectivity", "Wi-Fi · 5G · MARS radio 15 km · LoRa 20 km"],
              ["Navigation", "GPS · GLONASS · Galileo · BeiDou"],
              ["Environmental", "IP53 · −36°C to +50°C · 15 m/s wind"],
              ["Service ceiling", "5,000 m above sea level"],
              ["Acoustic", "77 dBA at 1 m"],
              ["Security", "AES-256 · FIPS 140-2 · CC EAL5+"],
            ]}
            phLabel="ANAFI UKR · 3/4 view"
            productImage="assets/anafi-ukr-3-4.png"
            onEnquire={() => setPage("contact")}
          />
        </div>
      </section>

      {/* PRODUCT 2 — ANAFI UKR GOV */}
      <section className="soft" id="p-gov">
        <div className="container">
          <ProductBlock
            tagText="PRODUCT 02 / 04"
            name="Parrot ANAFI UKR GOV"
            tagline="The defence-grade ANAFI UKR adapted for law enforcement, first responders and government institutions."
            featureBadges={[
              { label: "BLUE UAS APPROVED" },
              { label: "NSN COMPLIANT" },
              { label: "NDAA COMPLIANT" },
              { label: "LAW ENFORCEMENT" },
              { label: "FIRST RESPONDERS" },
              { label: "NATO-ALLIED DEPLOYED" },
            ]}
            description="Inherits the full ANAFI UKR operational capability with Blue UAS approval and NSN compliance, deployed by several European, North American and NATO-allied forces since mid-2024. Use cases: inspection of government and strategic facilities; search and rescue in GNSS-denied environments (collapsed buildings, forests, mountain rescue); rapid threat assessment during fires, chemical spills and industrial incidents."
            specs={[
              ["Platform", "ANAFI UKR — public safety version"],
              ["Flight time", "38 min standard / 70 min XLR battery"],
              ["Cameras", "35x zoom RGB · FLIR Boson thermal"],
              ["Navigation", "GPS · GNSS-denied mode · optical nav"],
              ["Data storage", "Local by default · optional European Parrot.Cloud"],
              ["Simulator", "Parrot Sphinx virtual training environment"],
              ["Certifications", "Blue UAS · NSN · NDAA · GDPR"],
              ["Max range", "23 km standard / 40 km XLR battery"],
              ["Connectivity", "Wi-Fi · 5G · MARS radio · LoRa backup"],
              ["Security", "AES-256 · signed firmware · secure boot"],
              ["Deployment", "Ready in under 2 minutes"],
              ["Environmental", "IP53 · −36°C to +50°C"],
            ]}
            phLabel="ANAFI UKR GOV · hovering"
            productImage="assets/anafi-ukr-hover.png"
            onEnquire={() => setPage("contact")}
            reverse
          />
        </div>
      </section>

      {/* PRODUCT 3 — XLR BATTERY */}
      <section id="p-xlr">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="xlr-grid">
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-3)", marginBottom: 12 }}>PRODUCT 03 / 04</div>
              <h2>Parrot ANAFI UKR XLR Battery</h2>
              <p style={{ marginTop: 16, fontSize: 16, color: "var(--ink-2)", maxWidth: 520 }}>
                Extended-capacity battery compatible with both ANAFI UKR and ANAFI UKR GOV.
                Nearly doubles flight endurance and extends operational range to 40 km.
              </p>
              <BatteryBars />
              <div style={{ marginTop: 28 }}>
                <button className="btn" onClick={() => setPage("contact")}>Enquire about XLR Battery <span className="arrow">→</span></button>
              </div>
            </div>
            <div>
              <div style={{
                aspectRatio: "4/3", background: "linear-gradient(160deg, #0e1c2c, #06101a)",
                border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center",
                padding: 24, position: "relative", overflow: "hidden",
              }}>
                <img src="assets/anafi-ukr-front.jpg" alt="ANAFI UKR XLR" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
                <div style={{ position: "absolute", top: 14, left: 14 }}>
                  <img src="assets/parrot-white.png" alt="Parrot" style={{ height: 13, width: "auto", opacity: 0.85, display: "block" }} />
                </div>
              </div>
              <div style={{ marginTop: 16 }}>
                <SpecTable rows={[
                  ["Type", "High-density Li-ion (300 Wh/kg)"],
                  ["Voltage", "10.20 V (3 × 3.40 V cells)"],
                  ["Capacity", "20,200 mAh"],
                  ["Flight time", "70 min at 6.5 m/s airspeed"],
                  ["Range", "40 km at 14 m/s airspeed"],
                  ["Charging time", "5 h 15 min · USB-PD charger included"],
                  ["Max charge power", "45 W"],
                  ["Weight", "686 g"],
                  ["Compatible with", "ANAFI UKR · ANAFI UKR GOV"],
                  ["Winter mode", "Yes — increases durability in cold climates"],
                ]} />
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .xlr-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* PRODUCT 4 — ACCESSORIES */}
      <section className="soft" id="p-acc">
        <div className="container">
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-3)", marginBottom: 12 }}>PRODUCT 04 / 04</div>
          <h2 style={{ marginBottom: 12 }}>Accessories</h2>
          <p style={{ color: "var(--ink-2)", maxWidth: 600, marginBottom: 32 }}>Official Parrot field equipment for the ANAFI UKR range.</p>
          <div className="grid-4">
            <Accessory
              tag="GROUND CONTROLLER"
              title="Skycontroller UKR"
              copy="Official Parrot ground controller with Samsung tablet or iPad Mini. IP53 rated. 4.5 hours battery life. Folded: 171×302×77 mm."
              image="assets/anafi-ukr-angled.jpg"
            />
            <Accessory
              tag="PROPELLERS"
              title="Spare propellers"
              copy="Official replacement propellers for all ANAFI UKR models."
            />
            <Accessory
              tag="TRANSPORT"
              title="Hard carry case"
              copy="Rugged transport case for field missions. Foam-lined protection."
              image="assets/anafi-ukr-case.png"
            />
            <Accessory
              tag="ANTENNA"
              title="MARS Ranger antenna kit"
              copy="Extended remote antenna configuration for extended-range covert operations."
            />
          </div>
        </div>
      </section>

      <CTAStrip
        eyebrow="Sales enquiry"
        title="All Parrot product enquiries are handled through the contact form."
        setPage={setPage}
      />
    </>
  );
}

function ProductBlock({ tagText, name, tagline, featureBadges, description, specs, phLabel, productImage, onEnquire, reverse }) {
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: reverse ? "1fr 1.1fr" : "1.1fr 1fr",
      gap: 56, alignItems: "flex-start",
    }} className="prod-grid">
      <div style={{ order: reverse ? 2 : 1 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-3)", marginBottom: 12 }}>{tagText}</div>
        <h2>{name}</h2>
        <p style={{ marginTop: 14, fontSize: 17, color: "var(--ink-2)", maxWidth: 540 }}>{tagline}</p>

        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 24 }}>
          {featureBadges.map((b, i) => (
            <span key={i} style={{
              fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em",
              border: "1px solid var(--ink)", padding: "6px 10px",
              color: "var(--ink)",
            }}>{b.label}</span>
          ))}
        </div>

        <p style={{ marginTop: 24, color: "var(--ink-2)", fontSize: 15, maxWidth: 540 }}>{description}</p>

        <div style={{ marginTop: 32 }}>
          <SpecTable rows={specs} />
        </div>

        <div style={{ marginTop: 28 }}>
          <button className="btn" onClick={onEnquire}>Enquire about {name} <span className="arrow">→</span></button>
        </div>
      </div>

      <div style={{ order: reverse ? 1 : 2, position: "sticky", top: 160 }}>
        <div style={{
          aspectRatio: "4/5", background: "linear-gradient(160deg, #0e1c2c, #06101a)",
          border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center",
          padding: 24, position: "relative", overflow: "hidden",
        }}>
          <img src={productImage} alt={name} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", filter: "drop-shadow(0 20px 30px rgba(0,0,0,0.5))" }} />
          <div style={{
            position: "absolute", top: 16, left: 16,
            fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.2em",
            color: "rgba(255,255,255,0.5)", textTransform: "uppercase",
          }}>
            <img src="assets/parrot-white.png" alt="Parrot" style={{ height: 14, width: "auto", opacity: 0.85, display: "block" }} />
          </div>
          <div style={{
            position: "absolute", bottom: 16, right: 16,
            fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.2em",
            color: "rgba(255,255,255,0.4)", textTransform: "uppercase",
          }}>
            {phLabel}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr !important; } .prod-grid > div { position: static !important; order: unset !important; } }`}</style>
    </div>
  );
}

function BatteryBars() {
  return (
    <div style={{ marginTop: 28, padding: 20, border: "1px solid var(--line)", background: "#fff" }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-3)", marginBottom: 16 }}>FLIGHT TIME · STANDARD VS XLR</div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
        <span style={{ width: 70, fontSize: 13, color: "var(--ink-2)" }}>Standard</span>
        <div style={{ flex: 1, height: 14, background: "var(--bg-soft)", position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "54%", background: "var(--ink-2)" }} />
        </div>
        <span className="mono" style={{ width: 60, fontSize: 12, textAlign: "right" }}>38 MIN</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ width: 70, fontSize: 13, color: "var(--ink-2)" }}>XLR</span>
        <div style={{ flex: 1, height: 14, background: "var(--bg-soft)", position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "100%", background: "var(--brand)" }} />
        </div>
        <span className="mono" style={{ width: 60, fontSize: 12, textAlign: "right", color: "var(--brand-deep)" }}>70 MIN</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 18 }}>
        <span style={{ width: 70, fontSize: 13, color: "var(--ink-2)" }}>Range std</span>
        <div style={{ flex: 1, height: 14, background: "var(--bg-soft)", position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "57.5%", background: "var(--ink-2)" }} />
        </div>
        <span className="mono" style={{ width: 60, fontSize: 12, textAlign: "right" }}>23 KM</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 12 }}>
        <span style={{ width: 70, fontSize: 13, color: "var(--ink-2)" }}>Range XLR</span>
        <div style={{ flex: 1, height: 14, background: "var(--bg-soft)", position: "relative" }}>
          <div style={{ position: "absolute", left: 0, top: 0, height: "100%", width: "100%", background: "var(--brand)" }} />
        </div>
        <span className="mono" style={{ width: 60, fontSize: 12, textAlign: "right", color: "var(--brand-deep)" }}>40 KM</span>
      </div>
    </div>
  );
}

function Accessory({ tag, title, copy, image }) {
  return (
    <div className="card">
      {image ? (
        <div style={{
          aspectRatio: "1/1", background: "#fff", border: "1px solid var(--line-soft)",
          display: "flex", alignItems: "center", justifyContent: "center", padding: 16, overflow: "hidden",
        }}>
          <img src={image} alt={title} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
        </div>
      ) : (
        <Ph tag={tag} label={title} ratio="1/1" />
      )}
      <h3 style={{ fontFamily: "var(--serif)", fontSize: 19 }}>{title}</h3>
      <p style={{ color: "var(--ink-2)", fontSize: 13.5 }}>{copy}</p>
    </div>
  );
}

window.ProductsPage = ProductsPage;