// Individual service detail pages.
//
// Today these are placeholder "coming soon" pages. The Services overview
// (/services) is the rich page. Each detail page is a thin stub that
// shows: a hero, a "More info coming soon" panel, and a button back to
// the overview where the user can see all six services at a glance.
//
// When real content is ready for any one of these, drop the body into
// SERVICE_DETAILS below and add render branches inside ServiceDetailPage.

const SERVICE_DETAILS = {
  "contract-manufacturing": {
    name:    "Contract Manufacturing",
    tagline: "OEM and ODM options for security product design.",
    eyebrow: "Service · 01",
    summary: "We design, prototype and manufacture security systems for partners. Whether you have a finished concept that needs scaling or an idea that needs engineering from scratch, our production lines across Bedfordshire, Wrocław and Wellington, Florida are built around partner programmes.",
  },
  "product-design": {
    name:    "Product Design",
    tagline: "You think it, we design it.",
    eyebrow: "Service · 02",
    summary: "Full turnkey design service. Our in-house engineering team takes a concept from sketch to validated, manufacturable product — mechanical, electrical, firmware and industrial design under one roof.",
  },
  "data-services": {
    name:    "Data Services (SIMs)",
    tagline: "Data and SIM services at source.",
    eyebrow: "Service · 03",
    summary: "Multi-carrier connectivity at the SIM level, fixed-package monthly pricing, private APN options, managed plans. The networking layer behind every Solo deployment.",
  },
  "network-infrastructure": {
    name:    "Network & Infrastructure",
    tagline: "All devices, one secure network.",
    eyebrow: "Service · 04",
    summary: "Private mesh networking, P2P, Starlink and WAN-fed connectivity options. Engineered for sites where standard 4G isn't enough.",
  },
  "asset-management": {
    name:    "Asset Management",
    tagline: "All devices, one location.",
    eyebrow: "Service · 05",
    summary: "A single pane of glass for every unit in the field. Native integrations into Ajax, Victron, CRM platforms and partner monitoring stacks.",
  },
  "transport-logistics": {
    name:    "Transport & Logistics",
    tagline: "You order, we deliver.",
    eyebrow: "Service · 06",
    summary: "Solo's own UK and EU transport operation. Own O-licence, ADR-trained transport management, full GPS tracking on every vehicle.",
  },
};

function ServiceDetailPage({ serviceId, onNavigate }) {
  const service = SERVICE_DETAILS[serviceId] || SERVICE_DETAILS["contract-manufacturing"];

  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 60px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Breadcrumb
            crumbs={["Home", "Services", service.name]}
            onNavigate={onNavigate}
            targets={["home", "services"]}
          />
          <Eyebrow style={{ marginBottom: 32, marginTop: 28 }}>{service.eyebrow}</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            // Shared by all services — sized so the longest word among
            // them ("Manufacturing.", "Infrastructure.") always fits
            // the 1280px column on one line without an ugly
            // mid-character break.
            fontSize: "clamp(42px, 6vw, 82px)", lineHeight: 0.92,
            letterSpacing: "-0.01em", textTransform: "uppercase",
            margin: "0 0 28px", color: "var(--fg)", maxWidth: 1280,
            overflowWrap: "break-word", wordBreak: "normal", hyphens: "manual",
          }}>{service.name}.</h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.5, color: "var(--fg-soft)", maxWidth: 820,
            marginBottom: 0,
          }}>{service.tagline}</p>
        </div>
      </section>

      {/* SUMMARY — what we know so far */}
      <section style={{
        padding: "100px 36px",
        background: "var(--surface)",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1.6fr",
            gap: 80, alignItems: "start",
          }}>
            <Eyebrow>Overview</Eyebrow>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 18,
              lineHeight: 1.6, color: "var(--fg-soft)",
              margin: 0, maxWidth: 820,
            }}>{service.summary}</p>
          </div>
        </div>
      </section>

      {/* OWN FLEET — Transport & Logistics only. Real photo of Solo's
          company-owned and -managed tractor unit + curtainside trailer,
          liveried in Solo colours. Rendered above the "coming soon" panel
          so this concrete proof-point sits before the placeholder copy. */}
      {serviceId === "transport-logistics" && (
        <section style={{
          padding: "120px 36px",
          background: "var(--bg)",
          borderBottom: "1px solid var(--line)",
        }}>
          <div style={{ maxWidth: 1480, margin: "0 auto" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, marginBottom: 56, alignItems: "end" }}>
              <div>
                <Eyebrow style={{ marginBottom: 32 }}>Our own fleet</Eyebrow>
                <SectionNumeral n={1} />
              </div>
              <H2>Company owned. Company managed.</H2>
            </div>

            <div style={{
              background: "var(--surface)", border: "1px solid var(--line)",
              display: "grid", gridTemplateColumns: "1.5fr 1fr",
              overflow: "hidden",
            }}>
              <div style={{
                position: "relative", aspectRatio: "4 / 3",
                background: "var(--surface-deep)",
              }}>
                <img
                  src="assets/transport-tractor-unit-trailer.jpg"
                  alt="Solo Secure liveried tractor unit and curtainside trailer"
                  style={{
                    position: "absolute", inset: 0,
                    width: "100%", height: "100%",
                    objectFit: "cover", display: "block",
                  }}
                  draggable={false}
                />
                <div style={{
                  position: "absolute", top: 20, left: 20,
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.22em", color: "#fff",
                  background: "rgba(0,0,0,0.6)", padding: "6px 10px",
                  textTransform: "uppercase", fontWeight: 500,
                  backdropFilter: "blur(6px)",
                }}>Own fleet</div>
              </div>

              <div style={{ padding: "48px 44px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <Eyebrow style={{ marginBottom: 24 }}>Latest addition</Eyebrow>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: "clamp(24px, 2.6vw, 34px)", lineHeight: 1.08,
                  letterSpacing: "0.005em", textTransform: "uppercase",
                  margin: "0 0 20px", color: "var(--fg)",
                }}>Tractor unit and curtainside trailer.</h3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 15.5,
                  lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
                }}>
                  Our latest company-owned and -managed tractor unit and curtainside trailer — liveried in Solo colours and running under our own O-licence, alongside the rest of the fleet that moves every tower from factory to site.
                </p>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* COMING SOON banner */}
      <section style={{
        padding: "140px 36px",
        background: "var(--black)",
        color: "var(--invert-fg)",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr",
            gap: 80, alignItems: "center",
          }}>
            <div>
              <div style={{
                fontFamily: "var(--font-body)", fontSize: 12,
                letterSpacing: "0.32em", textTransform: "uppercase",
                color: "rgba(255,255,255,0.5)", fontWeight: 500,
                marginBottom: 36,
              }}>In production</div>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(40px, 5.5vw, 84px)", lineHeight: 0.96,
                letterSpacing: "-0.005em", textTransform: "uppercase",
                margin: 0, color: "var(--invert-fg)",
              }}>
                More info coming soon.
              </h2>
            </div>
            <div style={{
              display: "flex", flexDirection: "column",
              gap: 22, alignItems: "flex-start",
            }}>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 17,
                lineHeight: 1.55, color: "rgba(255,255,255,0.75)", margin: 0,
              }}>
                We're putting the full {service.name} content together. In the meantime, see how this service fits alongside the rest of the Solo platform on the overview page.
              </p>
              <button
                onClick={() => onNavigate("services")}
                style={{
                  background: "#fff", color: "#000", border: "1px solid #fff",
                  padding: "18px 28px", cursor: "pointer",
                  fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                }}>
                See Services overview →
              </button>
              <button
                onClick={() => onNavigate("contact", { subject: `Enquiry about ${service.name}` })}
                style={{
                  background: "transparent", color: "#fff",
                  border: "1px solid rgba(255,255,255,0.4)",
                  padding: "16px 26px", cursor: "pointer",
                  fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                  marginTop: 6,
                }}>
                Discuss this service
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ServiceDetailPage, SERVICE_DETAILS });