/* global React, Logo, Nav, Footer, Ph, PointCloudHero */
const { useState: useStateHome } = React;

/* ============================================================
   Marquee logo strip
============================================================ */
function LogoMarquee() {
  const clients = [
    "VILNIUS CITY", "LRT", "PORSCHE", "BITĖ", "LRV", "KN", "ESO",
    "BIOVELA", "EIKA", "VILNIUS FEZ", "PANEVĖŽYS", "TRAKAI",
    "LDM", "KAUNO GRŪDAI", "KIETAVIŠKĖS", "URM",
  ];
  // duplicate so the loop is seamless
  const items = [...clients, ...clients];
  return (
    <div style={{ borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)", overflow: "hidden", background: "#fff" }}>
      <div style={{ padding: "20px 0 12px", textAlign: "center" }}>
        <div className="eyebrow">Trusted by 25+ leading organisations</div>
      </div>
      <div className="logo-marquee">
        <div className="logo-marquee-track">
          {items.map((c, i) => (
            <div key={i} className="logo-marquee-item">{c}</div>
          ))}
        </div>
      </div>
      <style>{`
        .logo-marquee { padding: 12px 0 28px; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
        .logo-marquee-track {
          display: flex; gap: 56px; animation: scroll 60s linear infinite;
          white-space: nowrap; width: max-content;
        }
        .logo-marquee-item {
          font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
          color: #6b7c8c; padding: 14px 0; flex: 0 0 auto;
        }
        @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      `}</style>
    </div>
  );
}

/* ============================================================
   Homepage
============================================================ */
function HomePage({ setPage }) {
  return (
    <>
      {/* HERO */}
      <section style={{ padding: 0, background: "#06101a", color: "#fff" }}>
        <div style={{ position: "relative", overflow: "hidden", height: 720 }}>
          {/* Real action shot as full-bleed background */}
          <img src="assets/hero-action.jpg" alt="ANAFI UKR in field deployment"
            style={{
              position: "absolute", inset: 0,
              width: "100%", height: "100%", objectFit: "cover",
              zIndex: 0,
            }} />
          {/* Dark gradient overlay for legibility */}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(90deg, rgba(6,16,26,0.85) 0%, rgba(6,16,26,0.55) 45%, rgba(6,16,26,0.15) 75%, rgba(6,16,26,0.4) 100%)",
            zIndex: 1,
          }} />
          {/* Bottom fade */}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(to bottom, rgba(6,16,26,0) 60%, rgba(6,16,26,0.7) 100%)",
            zIndex: 1,
          }} />
          {/* HUD corner markers — keep technical Droneteam DNA */}
          <div style={{
            position: "absolute", top: 24, left: 24, zIndex: 3,
            fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.7)", textTransform: "uppercase",
            display: "flex", gap: 20, alignItems: "center",
          }}>
            <span style={{display: "flex", gap: 8, alignItems: "center"}}>
              <span style={{width: 7, height: 7, borderRadius: "50%", background: "#5cd672", boxShadow: "0 0 10px #5cd672"}} />
              FIELD DEPLOYMENT · LIVE
            </span>
          </div>
          <div style={{
            position: "absolute", top: 24, right: 24, zIndex: 3,
            fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em",
            color: "rgba(255,255,255,0.55)", textTransform: "uppercase",
          }}>
            ANAFI UKR · EO/IR · 35× ZOOM
          </div>

          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "flex-end",
            pointerEvents: "none", zIndex: 2,
          }}>
            <div className="container" style={{ padding: "0 32px 80px", width: "100%", pointerEvents: "auto" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
                <span className="eyebrow" style={{ color: "rgba(255,255,255,0.8)" }}>
                  Official Parrot reseller — Lithuania
                </span>
                <img src="assets/parrot-white.png" alt="Parrot" style={{ height: 14, width: "auto", opacity: 0.9 }} />
              </div>
              <h1 style={{ color: "#fff", maxWidth: 820 }}>
                Drone solutions for businesses.
              </h1>
              <p style={{ marginTop: 24, fontSize: 18, lineHeight: 1.55, color: "rgba(255,255,255,0.85)", maxWidth: 580 }}>
                A dedicated team of drone professionals delivering photogrammetry,
                aerial inspections, drone light shows — and the full Parrot ANAFI UKR range.
              </p>
              <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
                <button className="btn btn-light" onClick={() => setPage("services")}>
                  Our services <span className="arrow">→</span>
                </button>
                <button className="btn btn-outline-light" onClick={() => setPage("products")}>
                  Parrot drones <span className="arrow">→</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ABOUT STRIP — 3 tiles */}
      <section style={{ padding: "80px 0 56px" }}>
        <div className="container">
          <div className="grid-3">
            <AboutTile
              num="01"
              title="Professional drone team"
              copy="A dedicated team of certified drone pilots and engineers. We see unlimited possibilities combining autonomous flight machines with software development."
            />
            <AboutTile
              num="02"
              title="Photogrammetry & 3D scanning"
              copy="Large scale, combining hybrid aerial and ground level data to create high-quality photogrammetry models for smart cities, real estate and cultural heritage."
            />
            <AboutTile
              num="03"
              title="Drone light shows"
              copy="Spectacular choreographed drone light formations for corporate events, concerts, national celebrations and public occasions."
            />
          </div>
        </div>
      </section>

      {/* CLIENT LOGOS */}
      <LogoMarquee />

      {/* PARROT PARTNERSHIP BANNER */}
      <section style={{ padding: 0 }}>
        <div className="container" style={{ padding: "72px 32px" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40,
            alignItems: "stretch", border: "1px solid var(--ink)",
            background: "var(--ink)", color: "#fff",
          }} className="parrot-banner">
            <div style={{ padding: "48px 48px 48px 48px" }}>
              <div className="eyebrow" style={{ color: "var(--brand-cyan)", marginBottom: 16 }}>
                Official Parrot reseller — Lithuania
              </div>
              <h2 style={{ color: "#fff", maxWidth: 540 }}>
                European leader in professional micro-UAVs.
              </h2>
              <p style={{ marginTop: 20, color: "rgba(255,255,255,0.75)", maxWidth: 520, fontSize: 15.5 }}>
                Droneteam is the official authorised reseller of Parrot in Lithuania.
                The Parrot ANAFI UKR range is used by defence forces, law enforcement,
                first responders and government agencies worldwide.
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 28 }}>
                {["Blue UAS approved", "NDAA compliant", "GDPR · EU servers", "No Chinese components"].map(t => (
                  <span key={t} style={{
                    fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em",
                    border: "1px solid rgba(255,255,255,0.2)", padding: "6px 10px", color: "rgba(255,255,255,0.85)",
                  }}>{t.toUpperCase()}</span>
                ))}
              </div>
              <div style={{ marginTop: 36 }}>
                <button className="btn btn-light" onClick={() => setPage("products")}>
                  Explore Parrot range <span className="arrow">→</span>
                </button>
              </div>
            </div>
            <div style={{ position: "relative", borderLeft: "1px solid rgba(255,255,255,0.1)", display: "flex", alignItems: "center", justifyContent: "center", padding: 48, background: "linear-gradient(135deg, #0e1c2c, #06101a)" }}>
              <img src="assets/parrot-white.png" alt="Parrot" style={{ width: "70%", maxWidth: 280, height: "auto" }} />
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 800px) { .parrot-banner { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* SERVICES TEASER */}
      <section className="soft">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>What we do</div>
              <h2 style={{ maxWidth: 720 }}>Six service lines, one drone team.</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => setPage("services")}>
              All services <span className="arrow">→</span>
            </button>
          </div>
          <div className="grid-3">
            <TeaserCard
              num="01"
              title="Photogrammetry & 3D scanning"
              tag="SMART CITIES · REAL ESTATE · HERITAGE"
              copy="Centimetre-accurate 3D models, orthomosaics and terrain models from drone-captured imagery."
              onClick={() => setPage("photogrammetry")}
            />
            <TeaserCard
              num="02"
              title="Drone light shows"
              tag="CORPORATE · CONCERTS · NATIONAL"
              copy="Choreographed LED drone formations — fully automated, no open fire, fully permitted."
              onClick={() => setPage("lightshows")}
            />
            <TeaserCard
              num="03"
              title="Inspections & monitoring"
              tag="INFRASTRUCTURE · CROPS · CUSTOM"
              copy="Remote-controlled and autonomous flights for crop monitoring, infrastructure inspection and custom drone projects."
              onClick={() => setPage("services")}
            />
          </div>
        </div>
      </section>

      {/* PROVEN TRACK RECORD */}
      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }} className="track-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Proven track record</div>
              <h2>Trusted by Lithuania's largest organisations.</h2>
              <p style={{ marginTop: 20, fontSize: 16, color: "var(--ink-2)", maxWidth: 520 }}>
                Vilnius City Municipality, LRT, Porsche, Biovela, Bitė, ESO, KN, EIKA,
                Panevėžys Municipality, Trakai, LDM and 10+ more major organisations.
              </p>
              <div style={{ display: "flex", gap: 32, marginTop: 36 }}>
                <Stat n="2011" label="Operating since" />
                <Stat n="25+" label="Major clients" />
                <Stat n="150" label="Intersections mapped · Vilnius" />
              </div>
            </div>
            <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", border: "1px solid var(--line)" }}>
              <img src="assets/linas-vilnius.jpg" alt="Droneteam founder Linas Gelazanskas operating drone over Vilnius"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <div style={{
                position: "absolute", bottom: 0, left: 0, right: 0,
                padding: "20px 18px",
                background: "linear-gradient(to top, rgba(6,16,26,0.85), transparent)",
                color: "#fff",
              }}>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: "0.18em", color: "rgba(255,255,255,0.7)", textTransform: "uppercase", marginBottom: 4 }}>
                  Vilnius · Neris River
                </div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 18 }}>Dr. Linas Gelazanskas — Droneteam founder</div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) { .track-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      {/* CONTACT CTA */}
      <section className="dark" style={{ padding: "96px 0" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 16 }}>Start a project</div>
          <h2 style={{ color: "#fff", maxWidth: 760, margin: "0 auto" }}>
            Tell us about your task — we'll find a drone-related solution.
          </h2>
          <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <button className="btn btn-light" onClick={() => setPage("contact")}>Get in touch <span className="arrow">→</span></button>
            <button className="btn btn-outline-light" onClick={() => setPage("services")}>Browse services</button>
          </div>
        </div>
      </section>
    </>
  );
}

function AboutTile({ num, title, copy }) {
  return (
    <div style={{ paddingTop: 28, borderTop: "1px solid var(--ink)" }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink-3)", marginBottom: 16 }}>{num} / 03</div>
      <h3 style={{ marginBottom: 12 }}>{title}</h3>
      <p style={{ color: "var(--ink-2)", fontSize: 15 }}>{copy}</p>
    </div>
  );
}

function TeaserCard({ num, title, tag, copy, onClick }) {
  return (
    <div className="card" onClick={onClick} style={{ cursor: "pointer" }}>
      <div className="num">— {num}</div>
      <h3 style={{ minHeight: 56 }}>{title}</h3>
      <div className="eyebrow" style={{ color: "var(--brand)" }}>{tag}</div>
      <p style={{ flex: 1 }}>{copy}</p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 12, borderTop: "1px solid var(--line-soft)", marginTop: 8 }}>
        <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>READ MORE</span>
        <span className="mono" style={{ fontSize: 14, color: "var(--ink)" }}>→</span>
      </div>
    </div>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 36, lineHeight: 1, color: "var(--ink)" }}>{n}</div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)", marginTop: 8, textTransform: "uppercase" }}>{label}</div>
    </div>
  );
}

window.HomePage = HomePage;