/* global React, Ph */

/* ============================================================
   PHOTOGRAMMETRY PAGE
============================================================ */
function PhotogrammetryPage({ 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)" }}>PHOTOGRAMMETRY</span>
          </div>
          <h1>Drone photogrammetry — survey-grade 3D from the air.</h1>
          <p className="lede">
            The science of extracting precise 3D measurements and models from overlapping aerial photographs.
            We capture hundreds of images, software stitches them into a centimetre-accurate 3D model,
            orthophoto map or digital terrain model.
          </p>
        </div>
      </header>

      {/* INFOGRAPHIC: how photogrammetry works */}
      <section className="dark" style={{ padding: "72px 0" }}>
        <div className="container">
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>How it works</div>
          <h2 style={{ color: "#fff", marginBottom: 40, maxWidth: 760 }}>From overlapping flight paths to a 1—2&nbsp;cm model.</h2>
          <PhotogrammetryDiagram />
          <p style={{ marginTop: 28, color: "rgba(255,255,255,0.6)", fontSize: 13.5, maxWidth: 760, fontFamily: "var(--mono)", letterSpacing: "0.04em" }}>
            RTK GPS + GCP validation · Pix4D / Agisoft Metashape · Outputs: point cloud · mesh · orthophoto · DTM
          </p>
        </div>
      </section>

      {/* USE CASES */}
      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Use cases</div>
          <h2 style={{ marginBottom: 40, maxWidth: 720 }}>Three project types we deliver.</h2>
          <div className="grid-3">
            <UseCase
              tag="CASE · 150 INTERSECTIONS"
              title="Smart Cities"
              copy="Large scale, combining hybrid aerial and ground level data to create high-quality photogrammetry models. Delivered for Vilnius City Municipality — 150 intersections traffic monitoring project."
            />
            <UseCase
              tag="CASE · DEVELOPER"
              title="Real Estate"
              copy="Solutions dedicated for architects, construction sites and visual modelling. Photogrammetry models are so precise you cannot distinguish them from a photo. Sub-millimetre precision for developers."
            />
            <UseCase
              tag="CASE · MUSEUM"
              title="Cultural Heritage"
              copy="With sub-millimetre precision, creating museum exhibits, archaeological sites and cultural heritage buildings — inside and outside — using photogrammetry."
            />
          </div>
        </div>
      </section>

      {/* SPECS TABLE */}
      <section className="soft">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56 }} className="spec-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Technical specifications</div>
              <h2>Survey-grade by default.</h2>
              <p style={{ marginTop: 16, color: "var(--ink-2)", maxWidth: 460 }}>
                Our deliverables meet the accuracy requirements of architects, urban planners,
                developers, archaeologists and government bodies.
              </p>
            </div>
            <SpecTable rows={[
              ["Accuracy", "Down to 1—2 cm GSD"],
              ["Camera", "21 MP · 4K HDR"],
              ["Technology", "RTK GPS + GCP validation"],
              ["Software", "Pix4D · Agisoft Metashape"],
              ["Deliverables", "Point cloud · mesh · orthophoto · DTM"],
              ["Applications", "Architecture · surveying · heritage"],
            ]} />
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .spec-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      {/* PORTFOLIO */}
      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Portfolio</div>
          <h2 style={{ marginBottom: 32 }}>Selected photogrammetry deliveries.</h2>
          <div className="grid-3">
            <Ph tag="3D CITY MODEL" label="Vilnius — orthomosaic detail" ratio="4/3" />
            <Ph tag="HERITAGE SITE" label="Trakai — exterior scan" ratio="4/3" />
            <Ph tag="REAL ESTATE" label="Construction site DTM" ratio="4/3" />
          </div>
        </div>
      </section>

      <CTAStrip
        eyebrow="Have a site to scan?"
        title="Send us a brief — we'll plan the flight, GCPs and deliverables."
        setPage={setPage}
      />
    </>
  );
}

/* ============================================================
   Photogrammetry diagram — drone flight grid + frustums + 3D model
============================================================ */
function PhotogrammetryDiagram() {
  // Three columns of an infographic: capture → process → deliver
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0,
      border: "1px solid rgba(255,255,255,0.12)", background: "rgba(255,255,255,0.02)",
    }} className="pg-diagram">
      {/* CAPTURE */}
      <DiagramCol
        step="01"
        label="CAPTURE"
        title="Overlapping flight paths"
        body="Drone flies a programmed grid at fixed altitude. RTK GPS logs each shutter trigger to centimetre accuracy."
        figure={<CaptureFig />}
      />
      <DiagramCol
        step="02"
        label="PROCESS"
        title="Photogrammetric stitching"
        body="Software finds millions of tie-points across overlapping photos and reconstructs the 3D scene."
        figure={<ProcessFig />}
        border
      />
      <DiagramCol
        step="03"
        label="DELIVER"
        title="Models & orthomosaics"
        body="Point cloud, textured mesh, orthophoto and DTM — exported to your CAD/GIS pipeline."
        figure={<DeliverFig />}
        border
      />
      <style>{`
        @media (max-width: 880px) {
          .pg-diagram { grid-template-columns: 1fr !important; }
          .pg-diagram > div { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.12) !important; }
          .pg-diagram > div:first-child { border-top: none !important; }
        }
      `}</style>
    </div>
  );
}

function DiagramCol({ step, label, title, body, figure, border }) {
  return (
    <div style={{ padding: 28, borderLeft: border ? "1px solid rgba(255,255,255,0.12)" : "none", display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--brand-cyan)" }}>STEP {step}</div>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "rgba(255,255,255,0.4)" }}>{label}</div>
      </div>
      <div style={{ aspectRatio: "16/10", background: "#06101a", border: "1px solid rgba(255,255,255,0.1)" }}>
        {figure}
      </div>
      <h3 style={{ color: "#fff", fontFamily: "var(--serif)" }}>{title}</h3>
      <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14 }}>{body}</p>
    </div>
  );
}

/* ----- SVG figures ----- */
function CaptureFig() {
  // Flight grid with drone & frustum
  return (
    <svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
      {/* ground grid */}
      {Array.from({ length: 9 }).map((_, i) => (
        <line key={"h" + i} x1={20} y1={120 + i * 8} x2={300} y2={120 + i * 8} stroke="rgba(92,214,114,0.25)" strokeWidth="0.6" />
      ))}
      {Array.from({ length: 13 }).map((_, i) => (
        <line key={"v" + i} x1={20 + i * 23.3} y1={120} x2={20 + i * 23.3} y2={192} stroke="rgba(92,214,114,0.18)" strokeWidth="0.6" />
      ))}
      {/* serpentine path */}
      <path d="M 30 50 L 290 50 L 290 70 L 30 70 L 30 90 L 290 90" fill="none" stroke="#4ea3ff" strokeWidth="1.2" strokeDasharray="3 3" />
      {/* shutter triggers */}
      {[40, 80, 120, 160, 200, 240, 280].map(x => (
        <circle key={x + "a"} cx={x} cy={50} r="2.5" fill="#5cd672" />
      ))}
      {[40, 80, 120, 160, 200, 240, 280].map(x => (
        <circle key={x + "b"} cx={x} cy={70} r="2.5" fill="#5cd672" />
      ))}
      {[40, 80, 120, 160, 200, 240, 280].map(x => (
        <circle key={x + "c"} cx={x} cy={90} r="2.5" fill="#5cd672" />
      ))}
      {/* drone */}
      <g transform="translate(160 50)">
        <circle r="5" fill="#5cd672" />
        <circle r="9" fill="none" stroke="#4ea3ff" strokeWidth="1.2" />
        {/* frustum */}
        <line x1="0" y1="0" x2="-22" y2="92" stroke="rgba(78,163,255,0.6)" strokeWidth="0.8" />
        <line x1="0" y1="0" x2="22" y2="92" stroke="rgba(78,163,255,0.6)" strokeWidth="0.8" />
        <line x1="0" y1="0" x2="-22" y2="78" stroke="rgba(78,163,255,0.6)" strokeWidth="0.8" />
        <line x1="0" y1="0" x2="22" y2="78" stroke="rgba(78,163,255,0.6)" strokeWidth="0.8" />
        <polygon points="-22,78 22,78 22,92 -22,92" fill="rgba(78,163,255,0.08)" stroke="rgba(78,163,255,0.6)" strokeWidth="0.8" />
      </g>
      {/* GCP markers on ground */}
      {[60, 160, 260].map(x => (
        <g key={x} transform={`translate(${x} 168)`}>
          <rect x="-4" y="-4" width="8" height="8" fill="none" stroke="#fff" strokeWidth="1" />
          <line x1="-4" y1="-4" x2="4" y2="4" stroke="#fff" strokeWidth="1" />
          <line x1="-4" y1="4" x2="4" y2="-4" stroke="#fff" strokeWidth="1" />
        </g>
      ))}
      <text x="20" y="190" fontFamily="ui-monospace, monospace" fontSize="7" fill="rgba(255,255,255,0.5)" letterSpacing="2">GCP · GCP · GCP</text>
    </svg>
  );
}

function ProcessFig() {
  // Tie points / point cloud reconstruction
  return (
    <svg viewBox="0 0 320 200" width="100%" height="100%">
      {/* Two camera positions */}
      <g>
        <circle cx="60" cy="40" r="4" fill="#5cd672" />
        <circle cx="260" cy="40" r="4" fill="#5cd672" />
        <text x="50" y="28" fontFamily="ui-monospace, monospace" fontSize="7" fill="rgba(255,255,255,0.5)" letterSpacing="1.5">CAM A</text>
        <text x="250" y="28" fontFamily="ui-monospace, monospace" fontSize="7" fill="rgba(255,255,255,0.5)" letterSpacing="1.5">CAM B</text>
      </g>
      {/* Tie points (dots) */}
      {Array.from({ length: 80 }).map((_, i) => {
        const x = 40 + (i * 73 % 240);
        const y = 90 + Math.sin(i * 1.3) * 30 + (i % 5) * 8;
        return <circle key={i} cx={x} cy={y} r="0.9" fill={i % 3 === 0 ? "#4ea3ff" : "rgba(255,255,255,0.55)"} />;
      })}
      {/* Rays from cams to selected tie points */}
      {[100, 160, 220].map((x, i) => (
        <g key={i}>
          <line x1="60" y1="40" x2={x} y2={120} stroke="rgba(78,163,255,0.4)" strokeWidth="0.6" />
          <line x1="260" y1="40" x2={x} y2={120} stroke="rgba(78,163,255,0.4)" strokeWidth="0.6" />
          <circle cx={x} cy={120} r="2.5" fill="#4ea3ff" />
        </g>
      ))}
      <text x="20" y="190" fontFamily="ui-monospace, monospace" fontSize="7" fill="rgba(255,255,255,0.5)" letterSpacing="1.5">~10⁶ TIE POINTS · BUNDLE ADJUSTMENT</text>
    </svg>
  );
}

function DeliverFig() {
  // 3D mesh / building outline
  return (
    <svg viewBox="0 0 320 200" width="100%" height="100%">
      {/* Building outline (isometric blocks) */}
      <g stroke="#5cd672" strokeWidth="1" fill="none">
        <polygon points="60,140 130,110 200,140 130,170" />
        <polygon points="60,140 60,110 130,80 130,110" />
        <polygon points="130,110 200,80 200,110 130,140" fill="rgba(92,214,114,0.06)" />
        <polygon points="130,80 200,80 200,110 130,110" />
      </g>
      {/* second block */}
      <g stroke="#4ea3ff" strokeWidth="1" fill="none">
        <polygon points="180,160 240,140 280,160 220,180" />
        <polygon points="180,160 180,135 240,115 240,140" />
        <polygon points="240,140 280,120 280,145 240,165" fill="rgba(78,163,255,0.08)" />
        <polygon points="240,115 280,95 280,120 240,140" />
      </g>
      {/* point cloud overlay on roof */}
      {Array.from({ length: 40 }).map((_, i) => {
        const x = 70 + (i * 13 % 120);
        const y = 100 + (i % 6) * 4;
        return <circle key={i} cx={x} cy={y} r="0.8" fill="rgba(255,255,255,0.5)" />;
      })}
      <text x="20" y="30" fontFamily="ui-monospace, monospace" fontSize="7" fill="rgba(255,255,255,0.5)" letterSpacing="1.5">POINT CLOUD · MESH · ORTHO · DTM</text>
    </svg>
  );
}

function UseCase({ tag, title, copy }) {
  return (
    <article className="card">
      <Ph tag={tag} label={`${title} project image`} 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>
  );
}

function SpecTable({ rows }) {
  return (
    <div style={{ background: "#fff", border: "1px solid var(--line)" }}>
      {rows.map(([k, v], i) => (
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "180px 1fr",
          padding: "16px 20px",
          borderBottom: i < rows.length - 1 ? "1px solid var(--line-soft)" : "none",
          gap: 16,
        }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-3)", textTransform: "uppercase", paddingTop: 2 }}>{k}</div>
          <div style={{ fontSize: 14.5, color: "var(--ink)" }}>{v}</div>
        </div>
      ))}
    </div>
  );
}

function CTAStrip({ eyebrow, title, setPage }) {
  return (
    <section className="dark" style={{ padding: "72px 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 }}>{eyebrow}</div>
          <h2 style={{ color: "#fff", maxWidth: 700 }}>{title}</h2>
        </div>
        <button className="btn btn-light" onClick={() => setPage("contact")}>Enquire <span className="arrow">→</span></button>
      </div>
    </section>
  );
}

window.PhotogrammetryPage = PhotogrammetryPage;
window.SpecTable = SpecTable;
window.CTAStrip = CTAStrip;