/* global React, Ph, CTAStrip */

/* ============================================================
   DRONE LIGHT SHOWS PAGE
============================================================ */
function LightShowsPage({ setPage }) {
  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 onClick={() => setPage("services")} style={{ cursor: "pointer" }}>SERVICES</span>
            <span className="sep">/</span>
            <span style={{ color: "var(--ink)" }}>DRONE LIGHT SHOWS</span>
          </div>
          <h1>Drone light shows — choreographed in the night sky.</h1>
          <p className="lede">
            Dozens or hundreds of LED-equipped drones forming images, logos, animations and text.
            Designed, programmed and operated for corporate clients, event organisers and public
            celebrations across Lithuania and the Baltic region. Fully automated, custom choreography, no open fire.
          </p>
        </div>
      </header>

      {/* Showcase visual */}
      <section style={{ padding: 0 }}>
        <div style={{ height: 480, position: "relative", background: "#020812", overflow: "hidden" }}>
          <DroneShowSky />
          <div style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background: "linear-gradient(to bottom, rgba(2,8,18,0) 60%, rgba(2,8,18,0.9) 100%)",
          }} />
          <div style={{
            position: "absolute", bottom: 24, left: 0, right: 0, textAlign: "center",
            fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.55)", textTransform: "uppercase",
          }}>
            300 DRONES · CHOREOGRAPHED FORMATION · LIVE PREVIEW
          </div>
        </div>
      </section>

      {/* EVENT TYPES */}
      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Event types</div>
          <h2 style={{ marginBottom: 40, maxWidth: 720 }}>Three formats, hundreds of drones.</h2>
          <div className="grid-3">
            <EventCard
              tag="100—300 DRONES"
              title="Corporate events"
              copy="Product launches, brand activations, company anniversaries. Display your logo or brand message in the sky. Unforgettable for guests."
            />
            <EventCard
              tag="100—500 DRONES"
              title="Concerts & festivals"
              copy="Synchronised with live music. 100—500 drone formations. Replaces fireworks — safer, reusable, no fire risk."
            />
            <EventCard
              tag="FULL PERMITTING"
              title="National & public events"
              copy="City celebrations, state occasions, stadium shows. Full permitting and airspace coordination included."
            />
          </div>
        </div>
      </section>

      {/* VS FIREWORKS INFOGRAPHIC */}
      <section className="dark" style={{ padding: "88px 0" }}>
        <div className="container">
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>Drone shows vs fireworks</div>
          <h2 style={{ color: "#fff", marginBottom: 40, maxWidth: 760 }}>Six reasons clients are switching.</h2>

          <div style={{ border: "1px solid rgba(255,255,255,0.12)" }}>
            {/* Header row */}
            <div style={{
              display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr",
              padding: "16px 24px", borderBottom: "1px solid rgba(255,255,255,0.12)",
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "rgba(255,255,255,0.55)",
            }}>
              <span>Attribute</span>
              <span style={{ color: "var(--brand-cyan)" }}>● Drone show</span>
              <span style={{ color: "rgba(255,180,120,0.8)" }}>○ Fireworks</span>
            </div>
            {[
              ["Fire risk",          "100% safe in dry conditions",    "High — not allowed in many venues"],
              ["Programmable",       "Any logo, image or animation",   "Fixed shell patterns only"],
              ["Permitting",         "We handle airspace authorisation", "Pyrotechnic licensing required"],
              ["Reusable",           "Zero waste — drones fly again",  "Single-use — burned once"],
              ["Acoustic",           "Quiet — no explosions",          "Loud — distress for animals & infants"],
              ["Novelty",            "Still rare in Lithuania",         "Common — expected"],
            ].map(([k, a, b], i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr",
                padding: "20px 24px",
                borderBottom: i < 5 ? "1px solid rgba(255,255,255,0.08)" : "none",
                alignItems: "center",
              }} className="vs-row">
                <span style={{ color: "rgba(255,255,255,0.85)", fontWeight: 500 }}>{k}</span>
                <span style={{ color: "var(--brand-cyan)", fontSize: 14, display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--brand-cyan)" }} />
                  {a}
                </span>
                <span style={{ color: "rgba(255,180,120,0.7)", fontSize: 14, display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", border: "1px solid rgba(255,180,120,0.7)" }} />
                  {b}
                </span>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 700px) {
              .vs-row { grid-template-columns: 1fr !important; gap: 6px; }
              .vs-row + .vs-row { border-top: 1px solid rgba(255,255,255,0.08); }
            }
          `}</style>
        </div>
      </section>

      {/* GALLERY */}
      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Gallery</div>
          <h2 style={{ marginBottom: 32 }}>Recent shows & formations.</h2>
          <div className="grid-3">
            <Ph tag="LOGO FORMATION" label="Brand logo · 200 drones" ratio="4/3" />
            <Ph tag="CONCERT" label="Festival opener · 350 drones" ratio="4/3" />
            <Ph tag="CITY CELEBRATION" label="State occasion · 500 drones" ratio="4/3" />
            <Ph tag="ANIMATION" label="Animated text formation" ratio="4/3" />
            <Ph tag="PRODUCT LAUNCH" label="Corporate activation" ratio="4/3" />
            <Ph tag="STADIUM" label="Stadium show overhead" ratio="4/3" />
          </div>
        </div>
      </section>

      <CTAStrip
        eyebrow="Plan a show"
        title="Tell us your event date — we'll quote drone count, choreography time and permitting."
        setPage={setPage}
      />
    </>
  );
}

/* Animated drone formation in the sky */
function DroneShowSky() {
  // Static SVG of a starry sky + drone-formed shape (DT logo formation)
  const points = [];
  // Form a rough circle of drones forming a "DT" shape
  // Letter D
  for (let i = 0; i < 14; i++) {
    const t = i / 13;
    points.push({ x: 0.32 + Math.sin(t * Math.PI) * 0.06, y: 0.35 + t * 0.30, c: i % 5 });
  }
  for (let i = 0; i < 6; i++) {
    points.push({ x: 0.26, y: 0.35 + (i / 5) * 0.30, c: i % 5 });
  }
  // Letter T
  for (let i = 0; i < 8; i++) {
    points.push({ x: 0.42 + (i / 7) * 0.14, y: 0.35, c: i % 5 });
  }
  for (let i = 0; i < 7; i++) {
    points.push({ x: 0.49, y: 0.35 + (i / 6) * 0.30, c: i % 5 });
  }
  // Surrounding ambient drones
  for (let i = 0; i < 80; i++) {
    points.push({
      x: 0.05 + Math.random() * 0.9,
      y: 0.10 + Math.random() * 0.75,
      c: 5 + (i % 3),
      ambient: true,
    });
  }
  const colors = ["#5cd672", "#4ea3ff", "#ffd166", "#ff6b9d", "#ffffff", "rgba(255,255,255,0.4)", "rgba(78,163,255,0.5)", "rgba(92,214,114,0.5)"];
  return (
    <svg viewBox="0 0 1000 480" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="bg" cx="50%" cy="80%" r="80%">
          <stop offset="0%" stopColor="#0a1f3a" />
          <stop offset="60%" stopColor="#040e1c" />
          <stop offset="100%" stopColor="#020812" />
        </radialGradient>
      </defs>
      <rect width="1000" height="480" fill="url(#bg)" />
      {/* faint stars */}
      {Array.from({ length: 120 }).map((_, i) => (
        <circle key={"s" + i} cx={Math.random() * 1000} cy={Math.random() * 250} r={Math.random() * 0.8 + 0.3} fill="rgba(255,255,255,0.4)" />
      ))}
      {/* horizon */}
      <line x1="0" y1="430" x2="1000" y2="430" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
      {/* drones */}
      {points.map((p, i) => {
        const cx = p.x * 1000;
        const cy = p.y * 480;
        const size = p.ambient ? 1.5 : 3;
        const col = colors[p.c] || "#fff";
        return (
          <g key={i}>
            {!p.ambient && <circle cx={cx} cy={cy} r={size * 3} fill={col} opacity="0.18">
              <animate attributeName="opacity" values="0.18;0.35;0.18" dur={(2 + (i % 5) * 0.3) + "s"} repeatCount="indefinite" />
            </circle>}
            <circle cx={cx} cy={cy} r={size} fill={col}>
              {!p.ambient && <animate attributeName="r" values={`${size};${size * 1.3};${size}`} dur={(1.6 + (i % 4) * 0.2) + "s"} repeatCount="indefinite" />}
            </circle>
          </g>
        );
      })}
    </svg>
  );
}

function EventCard({ tag, title, copy }) {
  return (
    <article className="card">
      <Ph dark tag={tag} label={`${title} show photo`} ratio="16/10" style={{ marginBottom: 4 }} />
      <h3 style={{ fontFamily: "var(--serif)" }}>{title}</h3>
      <p style={{ color: "var(--ink-2)", fontSize: 14.5 }}>{copy}</p>
    </article>
  );
}

window.LightShowsPage = LightShowsPage;