/* ============================================================
   PWC PAGES — subpage styles + Services + About content.
   (Events + Coverage live in pwc-events.jsx / pwc-coverage.jsx.)
   ============================================================ */
const PG = window.PWC.INV;

/* operation-type colors — calm, distinct, NOT a severity ramp */
const OP_COLORS = {
  drilling: "#C8A24A", completion: "#5FA9A0", workover: "#8E9AC4", production: "#C28A5E", legacy: "#A18FAE",
};

function PagesStyles() {
  return <style dangerouslySetInnerHTML={{ __html: `
/* chips */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line-strong);
  border-radius:999px; font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--text); background:var(--bg-2); }
[data-theme="light"] .chip{ background:#fff; }
.chip-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }

/* SERVICES */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,22px); }
.svc-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,2.8vw,34px);
  display:flex; flex-direction:column; box-shadow:var(--card-shadow); }
[data-theme="light"] .svc-card{ background:var(--bg-2); }
.svc-ico{ display:inline-flex; padding:11px; border:1px solid var(--line-strong); border-radius:var(--r); color:var(--text); margin-bottom:18px; }
.svc-h{ font-family:var(--font-display); font-weight:800; font-size:1.32rem; line-height:1.14; }
.svc-b{ color:var(--text-2); font-size:1.04rem; line-height:1.55; margin-top:11px; }
.scope-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); }
[data-theme="light"] .scope-card{ background:var(--bg-2); }
.scope-text{ color:var(--text-2); font-size:1.08rem; line-height:1.6; margin-top:20px; max-width:64ch; }

/* ABOUT */
.about-in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,68px); align-items:start; }
.about-media{ position:sticky; top:96px; }
.about-lead{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.3;
  letter-spacing:-.01em; }
.about-body{ color:var(--text-2); font-size:1.1rem; line-height:1.65; margin-top:22px; max-width:60ch; }
.about-belief{ border-left:3px solid var(--ember); padding-left:22px; margin-top:32px; font-size:1.12rem; line-height:1.6;
  color:var(--text); max-width:60ch; }

/* EVENTS */
.events-intro{ max-width:74ch; color:var(--text-2); font-size:1.1rem; line-height:1.7; }
.events-howto{ max-width:74ch; color:var(--text-2); font-size:1.02rem; line-height:1.6; margin-top:20px;
  background:var(--bg-2); border:1px solid var(--line); border-left:3px solid var(--steel); border-radius:var(--r);
  padding:18px 22px; }
.active-note{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:11px 16px; border-radius:var(--r);
  background:rgba(242,132,43,.1); border:1px solid color-mix(in srgb, var(--ember) 40%, transparent);
  color:var(--text); font-weight:600; font-size:.96rem; }
.active-note a{ color:var(--ember); }
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-bottom:clamp(24px,3vw,36px); }
.filter-chip{ cursor:pointer; transition:border-color .15s, color .15s, background .15s; }
.filter-chip.active{ border-color:var(--ember); color:var(--ember); background:rgba(242,132,43,.1); }
.filter-sel{ font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--text); background:var(--bg-2);
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 14px; cursor:pointer; }
.ev-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px); }
.ev-card{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,28px);
  display:flex; flex-direction:column; gap:13px; }
[data-theme="light"] .ev-card{ background:#fff; }
.ev-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.op-tag{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-size:.78rem;
  font-weight:700; letter-spacing:.02em; border:1px solid var(--line-strong); color:var(--text); white-space:nowrap; }
.ev-illus-badge{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.ev-title{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; line-height:1.18; }
.ev-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--text-3); font-size:.84rem; font-weight:600; }
.ev-summary{ color:var(--text); font-size:1rem; line-height:1.55; }
.ev-field .k{ font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--steel); }
.ev-field .v{ color:var(--text-2); font-size:.97rem; line-height:1.5; margin-top:3px; }
.ev-lesson{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; }
[data-theme="light"] .ev-lesson{ background:var(--bg-3); }
.ev-lesson .k{ color:var(--ember); }
.ev-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:6px;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.ev-source{ color:var(--text-2); font-size:.85rem; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.ev-source:hover{ color:var(--text); }
.ev-source u{ text-underline-offset:2px; }
.ev-map-link{ color:var(--steel); font-size:.85rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.ev-map-link:hover{ color:var(--ember); }
.attribution{ color:var(--text-3); font-size:.86rem; line-height:1.6; max-width:90ch; }

/* shared closing CTA band */
.cta-band{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.cta-band .sec-h{ max-width:20ch; }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

@media (max-width:860px){
  .svc-grid{ grid-template-columns:1fr; }
  .about-in{ grid-template-columns:1fr; gap:30px; }
  .about-media{ position:static; max-width:420px; }
  .ev-grid{ grid-template-columns:1fr; }
}
` }} />;
}

/* operation chip (label + colored dot) */
function OpChip({ op, className = "" }) {
  const meta = window.PWC_DATA.OPS[op] || { label: op };
  return (
    <span className={`op-tag ${className}`}>
      <span className="chip-dot" style={{ background: OP_COLORS[op] || "var(--steel)" }} />{meta.label}
    </span>
  );
}

/* shared closing call band reused on subpages */
function CtaBand({ heading, sub, save }) {
  const [saved, setSaved] = React.useState(false);
  return (
    <section className="section alt">
      <div className="wrap">
        <Reveal className="cta-band">
          <h2 className="sec-h">{heading}</h2>
          {sub && <p className="sec-sub" style={{ textAlign: "center", maxWidth: "56ch" }}>{sub}</p>}
          <div className="cta-band-actions">
            <CallButton size="xl" />
            {save && <SaveButton tone="ghost" onSaved={() => setSaved(true)} />}
          </div>
          {saved && <p className="save-confirm">{PG.saveConfirm}</p>}
          <SafetyLine variant="foot" />
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ SERVICES ============================ */
const SERVICES = [
  { icon: 0, t: "Surface pressure control and containment", b: "Take control at the wellhead and keep what's in the well in the well — stop the loss, hold the pressure, contain the surface." },
  { icon: 1, t: "Pressure management and circulation support", b: "Manage pressure and circulation to work the well back toward balance — the right method for the well, not a one-size play." },
  { icon: 2, t: "Well stabilization and controlled kill operations", b: "Bring an unstable well back under control, up to and including a controlled kill when that's the right move." },
  { icon: 3, t: "Field advisory and escalation support", b: "A straight read on what it is and what it needs — and the judgment to know when to hand it up, and to who." },
];
const SVC_ICONS = [IconGauge, IconReticle, IconCommand, IconShield];

function ServicesPage() {
  return (
    <React.Fragment>
      <PagesStyles />
      <PageHero
        eyebrow="Across the whole life of the well"
        h1="Well control across the whole life of the well"
        sub="Drilling, completions, workover, production — and the legacy wells that won't stay quiet. When a well gets away from you, you need a responder who gets there fast and tells you straight."
        slotId="pwc-svc-hero" slotPlaceholder="Drop a controlled-location / equipment photo (calm, capable — not flames)"
        secondary={{ label: "See documented events", href: PG.nav[0].href }}
      />

      <section className="section">
        <div className="wrap">
          <Reveal className="sec-head">
            <p className="eyebrow">What we do on a call</p>
            <h2 className="sec-h">Four things, done straight.</h2>
            <p className="sec-sub">The work runs from surface containment to a controlled kill — and the honest call on when an event is past what one responder should hold.</p>
          </Reveal>
          <div className="svc-grid">
            {SERVICES.map((s, i) => {
              const Icon = SVC_ICONS[s.icon];
              return (
                <Reveal key={i} as="article" className="svc-card" delay={i * 70}>
                  <span className="svc-ico" aria-hidden="true"><Icon size={26} /></span>
                  <h3 className="svc-h">{s.t}</h3>
                  <p className="svc-b">{s.b}</p>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section alt">
        <div className="wrap">
          <Reveal className="scope-card">
            <p className="eyebrow">Where it applies</p>
            <h2 className="sec-h" style={{ maxWidth: "22ch" }}>Most of it isn't drilling anymore.</h2>
            <div className="chip-row" style={{ marginTop: "22px" }}>
              {Object.keys(window.PWC_DATA.OPS).map((op) => <OpChip key={op} op={op} />)}
            </div>
            <p className="scope-text">
              Kicks and lost returns on completions and workovers, leaking trees and weeping valves, rusted valves that won't isolate for a pressure check, loss of primary containment, and idle or legacy wells pressuring up. If a well is getting away from you, that's the call.
            </p>
          </Reveal>
        </div>
      </section>

      <Plan />
      <FAQ />
      <CtaBand heading="If a well is getting away from you, call." save={true} />
    </React.Fragment>
  );
}

/* ============================ ABOUT ============================ */
function AboutPage({ flavor }) {
  return (
    <React.Fragment>
      <PagesStyles />
      <PageHero
        eyebrow="Who answers the call"
        h1="A hand who became the person you call"
        sub="Not a desk consultant — a field hand who came up roughnecking and now leads the response when a well gets away from you."
        slotId="pwc-about-hero" slotPlaceholder="Drop a real rig-floor / location photo (founder or field, not corporate stock)"
      />

      <section className="section">
        <div className="wrap about-in">
          <Reveal className="about-media">
            <image-slot id="pwc-about-founder" class="founder-slot" shape="rect" radius="10"
              placeholder="Drop a real photo of Michael — field, not corporate"></image-slot>
            <div className="founder-cap">
              <span className="founder-name">{PG.founderName}</span>
              <span className="founder-role">{PG.founderRole}</span>
            </div>
          </Reveal>
          <Reveal delay={70}>
            <p className="eyebrow">The story</p>
            <p className="about-lead">Michael Maraschick is a field hand at heart.</p>
            <p className="about-body">
              He came up roughnecking on the rigs and worked his way to leading emergency response across the Permian and Southeast New Mexico — 100+ emergency responses and counting. Not a desk consultant: a hand who's done the hard part, and now answers the call when a well gets away from you.
            </p>
            <div className="auth-grid" style={{ maxWidth: "560px" }}>
              {PG.authority.map((a, i) => (
                <div className="auth-cell" key={i}>
                  <div className="auth-stat tnum">{a.stat}</div>
                  <div className="auth-label">{a.label}</div>
                </div>
              ))}
            </div>
            <p className="eyebrow" style={{ marginTop: "40px" }}>What we believe</p>
            <p className="about-belief">
              The people who do it right shouldn't be left exposed in the one moment that matters most. So we get there while minutes still matter, take control early, tell you straight when to keep it controlled and when to escalate — and keep you in command of your own well.
            </p>
          </Reveal>
        </div>
      </section>

      <CtaBand heading="When you call, you get Michael." sub={PG.founderDirect} save={true} />
    </React.Fragment>
  );
}

Object.assign(window, { PagesStyles, OpChip, CtaBand, ServicesPage, AboutPage, OP_COLORS });