/* global React, Ph, CTAStrip */

/* ============================================================
   TRAINING PAGE
============================================================ */
function TrainingPage({ 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 style={{ color: "var(--ink)" }}>TRAINING</span>
          </div>
          <h1>Drone pilot training — certified by working operators.</h1>
          <p className="lede">
            We train pilots, technicians and operations teams to fly the Parrot ANAFI UKR range
            and run real-world missions safely. Theory, simulator and field practice — delivered
            by Droneteam pilots with hundreds of hours on the platform.
          </p>
        </div>
      </header>

      {/* Hero photo strip */}
      <section style={{ padding: 0 }}>
        <div className="container" style={{ padding: "32px 32px 0" }}>
          <div className="grid-3" style={{ gap: 12 }}>
            <div style={{ aspectRatio: "4/3", overflow: "hidden", border: "1px solid var(--line)" }}>
              <img src="assets/hero-action.jpg" alt="Field deployment training"
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{ aspectRatio: "4/3", overflow: "hidden", border: "1px solid var(--line)" }}>
              <img src="assets/linas-vilnius.jpg" alt="Pilot operating ANAFI UKR"
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{ aspectRatio: "4/3", overflow: "hidden", border: "1px solid var(--line)", background: "linear-gradient(160deg, #0e1c2c, #06101a)", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
              <img src="assets/anafi-ukr-3-4.png" alt="Parrot Sphinx simulator training"
                style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain" }} />
            </div>
          </div>
        </div>
      </section>

      {/* PROGRAMS */}
      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Programs</div>
          <h2 style={{ marginBottom: 40, maxWidth: 720 }}>Three training tracks — built around your operational needs.</h2>
          <div className="grid-3">
            <ProgramCard
              num="01"
              tag="2 DAYS · ON-SITE"
              title="Pilot Foundation"
              copy="Theory of operation, airspace rules, pre-flight checklists, manual flight, basic mission planning. Ends with a supervised solo flight."
              modules={["Airspace & Lithuanian regulation", "Pre-flight & post-flight procedures", "Manual flight control", "Mission planning basics", "Live solo flight assessment"]}
            />
            <ProgramCard
              num="02"
              tag="3 DAYS · OPERATIONAL"
              title="ANAFI UKR Operator"
              copy="Full ANAFI UKR & GOV operation: dual EO/IR payload, GPS-denied flight, live stream handling, encrypted comms and rapid deployment under 2 minutes."
              modules={["35× zoom RGB & FLIR Boson thermal", "GPS-denied / GNSS-denied flight", "Encrypted comms & secure boot", "Mission planning · Skycontroller UKR", "Field deployment exercises"]}
            />
            <ProgramCard
              num="03"
              tag="CUSTOM · TEAM"
              title="Mission-specific training"
              copy="Tailored programs for law enforcement, first responders, surveying teams or corporate ops. Built around your mission profile and equipment."
              modules={["Search & rescue scenarios", "Infrastructure inspection workflows", "Photogrammetry & RTK surveying", "Public safety response protocols", "Train-the-trainer certification"]}
            />
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section className="dark">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56 }} className="why-grid">
            <div>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>Why train with Droneteam</div>
              <h2 style={{ color: "#fff" }}>Working operators — not classroom instructors.</h2>
              <p style={{ marginTop: 20, color: "rgba(255,255,255,0.75)", maxWidth: 480, fontSize: 15.5 }}>
                Our trainers are the same pilots who fly missions for Vilnius City Municipality,
                LRT, ESO and KN. Every lesson is rooted in real operational experience — not just specs.
              </p>
              <div style={{ display: "flex", gap: 32, marginTop: 36, flexWrap: "wrap" }}>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 36, color: "#fff" }}>500+</div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "rgba(255,255,255,0.5)", marginTop: 6, textTransform: "uppercase" }}>Operational hours</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 36, color: "#fff" }}>EU</div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "rgba(255,255,255,0.5)", marginTop: 6, textTransform: "uppercase" }}>Regulation aligned</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 36, color: "#fff" }}>1:4</div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "rgba(255,255,255,0.5)", marginTop: 6, textTransform: "uppercase" }}>Trainer to student</div>
                </div>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              {[
                { k: "Theory", v: "EU drone regulation, airspace classes, risk assessment" },
                { k: "Simulator", v: "Parrot Sphinx virtual training environment" },
                { k: "Field practice", v: "Supervised flights at our Vilnius training area" },
                { k: "Certification", v: "Droneteam-issued course certificate" },
              ].map(it => (
                <div key={it.k} style={{ border: "1px solid rgba(255,255,255,0.12)", padding: 20 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--brand-cyan)", textTransform: "uppercase", marginBottom: 8 }}>{it.k}</div>
                  <div style={{ color: "rgba(255,255,255,0.85)", fontSize: 14, lineHeight: 1.5 }}>{it.v}</div>
                </div>
              ))}
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      {/* WHO IT'S FOR */}
      <section>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 12 }}>Who it's for</div>
          <h2 style={{ marginBottom: 40, maxWidth: 720 }}>Public sector, infrastructure, defence and corporate teams.</h2>
          <div className="grid-4">
            {[
              { tag: "PUBLIC SAFETY", t: "Law enforcement", c: "Patrol, surveillance, rapid threat assessment." },
              { tag: "FIRST RESPONDERS", t: "Fire & rescue", c: "Search & rescue, GNSS-denied indoor operations." },
              { tag: "INFRASTRUCTURE", t: "Inspection teams", c: "Bridges, powerlines, telecom — safer access." },
              { tag: "ENTERPRISE", t: "Corporate ops", c: "Site monitoring, surveying, custom workflows." },
            ].map(a => (
              <div key={a.t} className="card">
                <div className="eyebrow" style={{ color: "var(--brand)" }}>{a.tag}</div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 19 }}>{a.t}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 13.5 }}>{a.c}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* INQUIRY FORM */}
      <section className="soft">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "flex-start" }} className="train-inq">
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Training enquiry</div>
              <h2>Ready to schedule training for your team?</h2>
              <p style={{ marginTop: 16, fontSize: 16, color: "var(--ink-2)", maxWidth: 460 }}>
                Tell us your team size, operational goals and preferred timeline. We'll respond
                with a tailored program and quote within one working day.
              </p>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 16 }}>
                <ContactLine label="Email" value="linas@droneteam.lt" />
                <ContactLine label="Phone" value="+370 682 10215" />
                <ContactLine label="Hours" value="Mon — Fri · 8:00 — 22:00" />
              </div>
            </div>
            <TrainingForm />
          </div>
          <style>{`@media (max-width: 880px) { .train-inq { grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </>
  );
}

function ProgramCard({ num, tag, title, copy, modules }) {
  return (
    <div className="card" style={{ gap: 16 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="num">— {num}</div>
        <div className="eyebrow" style={{ color: "var(--brand)" }}>{tag}</div>
      </div>
      <h3 style={{ fontFamily: "var(--serif)" }}>{title}</h3>
      <p style={{ color: "var(--ink-2)", fontSize: 14.5 }}>{copy}</p>
      <div style={{ marginTop: 8, paddingTop: 16, borderTop: "1px solid var(--line-soft)" }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 12 }}>Modules</div>
        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
          {modules.map((m, i) => (
            <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13.5, color: "var(--ink-2)" }}>
              <span style={{ flex: "0 0 14px", paddingTop: 7, color: "var(--brand)" }}>—</span>
              <span>{m}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function ContactLine({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.16em", color: "var(--ink-3)", textTransform: "uppercase", marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 17, fontFamily: "var(--serif)", color: "var(--ink)" }}>{value}</div>
    </div>
  );
}

function TrainingForm() {
  const [form, setForm] = React.useState({ name: "", email: "", organisation: "", program: "Pilot Foundation", team: "1—5", message: "" });
  const [sent, setSent] = React.useState(false);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  if (sent) {
    return (
      <div style={{ background: "#fff", border: "1px solid var(--line)", padding: 40, textAlign: "center" }}>
        <div style={{ width: 56, height: 56, margin: "0 auto", borderRadius: "50%", background: "var(--brand)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 26 }}>✓</div>
        <h3 style={{ marginTop: 24, fontFamily: "var(--serif)" }}>Training enquiry received</h3>
        <p style={{ marginTop: 12, color: "var(--ink-2)", fontSize: 15 }}>
          Thank you{form.name ? `, ${form.name}` : ""}. We'll respond within one working day.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{ background: "#fff", padding: 32, border: "1px solid var(--line)" }}>
      <div className="eyebrow" style={{ marginBottom: 20 }}>Schedule training</div>
      <FormField label="Name">
        <input required value={form.name} onChange={e => upd("name", e.target.value)} placeholder="Your full name" />
      </FormField>
      <FormField label="Organisation">
        <input value={form.organisation} onChange={e => upd("organisation", e.target.value)} placeholder="Company or institution" />
      </FormField>
      <FormField label="Email">
        <input required type="email" value={form.email} onChange={e => upd("email", e.target.value)} placeholder="name@company.lt" />
      </FormField>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <FormField label="Program">
          <select value={form.program} onChange={e => upd("program", e.target.value)}>
            <option>Pilot Foundation</option>
            <option>ANAFI UKR Operator</option>
            <option>Mission-specific (custom)</option>
            <option>Not sure yet</option>
          </select>
        </FormField>
        <FormField label="Team size">
          <select value={form.team} onChange={e => upd("team", e.target.value)}>
            <option>1—5</option>
            <option>6—10</option>
            <option>11—20</option>
            <option>20+</option>
          </select>
        </FormField>
      </div>
      <FormField label="Message">
        <textarea rows="4" value={form.message} onChange={e => upd("message", e.target.value)} placeholder="Goals, preferred dates, equipment…" />
      </FormField>
      <button type="submit" className="btn" style={{ width: "100%", justifyContent: "center", marginTop: 4 }}>
        Send training enquiry <span className="arrow">→</span>
      </button>
      <style>{`
        form input, form select, form textarea {
          width: 100%; padding: 12px 14px; font-family: var(--sans); font-size: 14.5px;
          border: 1px solid var(--line); background: #fff; color: var(--ink);
          border-radius: 0; outline: none; transition: border-color .15s;
        }
        form input:focus, form select:focus, form textarea:focus { border-color: var(--ink); }
        form textarea { resize: vertical; }
      `}</style>
    </form>
  );
}

function FormField({ label, children }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", color: "var(--ink-2)", marginBottom: 6, textTransform: "uppercase" }}>{label}</div>
      {children}
    </label>
  );
}

window.TrainingPage = TrainingPage;