/* global React, Ph */

/* ============================================================
   SERVICES PAGE
============================================================ */
function ServicesPage({ setPage }) {
  const services = [
    {
      id: "photogrammetry", num: "01", title: "Photogrammetry",
      tag: "SMART CITIES · REAL ESTATE · HERITAGE",
      copy: "Full-stack 3D scanning services for asset managers, architects and real estate developers. Combining aerial photography with precision software to deliver centimetre-accurate 3D models, orthomosaics and terrain models. Applications: smart cities, real estate, construction, cultural heritage, archaeology.",
      link: "photogrammetry",
    },
    {
      id: "surveying", num: "02", title: "Drone surveying",
      tag: "RTK · GCP · SURVEY-GRADE",
      copy: "Next-level precision using RTK technology for measurement and GCPs for validation. Survey-grade aerial data for land surveying, construction site monitoring, volumetric calculations and boundary mapping.",
    },
    {
      id: "inspection", num: "03", title: "Infrastructure inspection",
      tag: "BRIDGES · POWERLINES · TELECOM",
      copy: "Aerial inspection of bridges, rooftops, powerlines, telecom towers and industrial assets. HD video and thermal imaging. Reduces cost and access risk compared to traditional methods.",
    },
    {
      id: "crop", num: "04", title: "Crop monitoring",
      tag: "MULTISPECTRAL · NDVI · ENVIRONMENTAL",
      copy: "Multispectral and RGB aerial surveys for precision agriculture. NDVI mapping, crop health analysis, field coverage reports. Also used for nature reserve and environmental impact monitoring.",
    },
    {
      id: "lightshows", num: "05", title: "Drone light shows",
      tag: "CORPORATE · CONCERTS · NATIONAL",
      copy: "Choreographed aerial displays with LED-equipped drones forming images, logos, animations and text in the night sky. Custom design and programming for corporate events, product launches, concerts, festivals and national celebrations. Fully automated, no open fire.",
      link: "lightshows",
    },
    {
      id: "custom", num: "06", title: "Custom drone services",
      tag: "AUTONOMOUS · SOFTWARE · DELIVERY",
      copy: "If your task specification involves engineering, drones or cinematography — we can do it. Autonomous flights, software integration, remote controlled operations, drone delivery. Contact us and we will find a drone-related solution for you.",
    },
  ];

  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)" }}>SERVICES</span>
          </div>
          <h1>Drone services for engineering, surveying and entertainment.</h1>
          <p className="lede">
            Six service lines delivered by certified pilots and engineers. Each project starts
            with a survey of your task specification — we tailor the platform, sensor and
            workflow to fit.
          </p>
        </div>
      </header>

      <section>
        <div className="container">
          <div className="services-grid">
            {services.map((s, i) => (
              <article key={s.id} className="service-card" onClick={() => s.link && setPage(s.link)} style={{ cursor: s.link ? "pointer" : "default" }}>
                <div className="service-num mono">{s.num} / 06</div>
                <Ph tag={`CASE · ${s.title.toUpperCase()}`} label={`${s.title} project photo`} ratio="16/10" />
                <div className="service-body">
                  <div className="eyebrow" style={{ color: "var(--brand)", marginBottom: 8 }}>{s.tag}</div>
                  <h3 style={{ fontFamily: "var(--serif)", marginBottom: 12 }}>{s.title}</h3>
                  <p style={{ color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.6 }}>{s.copy}</p>
                  {s.link && (
                    <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 14, borderTop: "1px solid var(--line-soft)" }}>
                      <span className="mono" style={{ fontSize: 12, color: "var(--ink)" }}>DEDICATED PAGE</span>
                      <span className="mono" style={{ fontSize: 14, color: "var(--ink)" }}>→</span>
                    </div>
                  )}
                </div>
              </article>
            ))}
          </div>
        </div>
        <style>{`
          .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
          .service-card { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); padding: 18px; background: #fff; transition: border-color .2s; }
          .service-card:hover { border-color: var(--ink); }
          .service-num { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3); }
          .service-body { padding: 4px 4px 8px; }
          @media (max-width: 960px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <section className="dark" style={{ padding: "80px 0" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>Need something custom?</div>
            <h2 style={{ color: "#fff", maxWidth: 640 }}>Reach out — let's start a project together.</h2>
          </div>
          <button className="btn btn-light" onClick={() => setPage("contact")}>Start a project <span className="arrow">→</span></button>
        </div>
      </section>
    </>
  );
}

window.ServicesPage = ServicesPage;