/* ============================================================
   PWC SECTIONS — part 2
   Plan, prose, save-the-number, FAQ, footer, sticky mobile call bar.
   ============================================================ */
const INV2 = window.PWC.INV;

/* ============================ PLAN (C-PLAN) ============================ */
function Plan() {
  return (
    <section className="section plan alt">
      <div className="wrap">
        <Reveal className="sec-head">
          <p className="eyebrow">Three steps</p>
          <h2 className="sec-h">{INV2.planH}</h2>
          <p className="sec-sub">{INV2.scopeLine}</p>
        </Reveal>
        <ol className="plan-grid">
          {INV2.plan.map((p, i) => (
            <Reveal key={i} as="li" className="plan-step" delay={i * 90}>
              <div className="plan-n tnum">{p.n}</div>
              <h3 className="plan-t">{p.t}</h3>
              <p className="plan-b">{p.b}</p>
            </Reveal>
          ))}
        </ol>
        <Reveal className="plan-cta">
          <CallButton size="xl" />
          <p className="wait-line">{INV2.waitLine}</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ PROSE (C-PROSE) ============================ */
function Prose() {
  return (
    <section className="section prose-sec">
      <div className="wrap">
        <Reveal className="prose-col">
          {INV2.prose.map((p, i) => <p key={i} className="prose-p">{p}</p>)}
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ SAVE THE NUMBER (C-TCTA + C-SAVE) ============================ */
function SaveBlock() {
  const [saved, setSaved] = React.useState(false);
  return (
    <section className="section save-sec alt">
      <div className="wrap">
        <Reveal className="save-card">
          <div className="save-text">
            <p className="eyebrow">Before you need it</p>
            <h2 className="sec-h">{INV2.saveH}</h2>
            <p className="save-b">{INV2.saveB}</p>
          </div>
          <div className="save-actions">
            <SaveButton tone="solid" onSaved={() => setSaved(true)} />
            <a className="save-vcard" href={`tel:${INV2.tel}`}>Call to test it: <span className="tnum">{INV2.phone}</span></a>
            {saved && <p className="save-confirm" role="status"><span aria-hidden="true"><IconTick size={16} /></span>{INV2.saveConfirm}</p>}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ FAQ (C-FAQ) ============================ */
function FAQItem({ item, idx, open, onToggle }) {
  const pid = `faq-panel-${idx}`, bid = `faq-btn-${idx}`;
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <h3 className="faq-q-wrap">
        <button id={bid} className="faq-q" aria-expanded={open} aria-controls={pid} onClick={onToggle}>
          <span>{item.q}</span>
          <span className="faq-chev" aria-hidden="true"><IconChevron open={open} /></span>
        </button>
      </h3>
      <div id={pid} role="region" aria-labelledby={bid} className="faq-a" hidden={!open}>
        <p>{item.a}</p>
      </div>
    </div>
  );
}
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq-sec">
      <div className="wrap faq-in">
        <Reveal className="sec-head faq-head">
          <p className="eyebrow">Straight answers</p>
          <h2 className="sec-h">Questions operators ask.</h2>
        </Reveal>
        <Reveal className="faq-list" delay={60}>
          {INV2.faq.map((item, i) => (
            <FAQItem key={i} item={item} idx={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ FOOTER (C-FOOT) ============================ */
function Footer({ flavor, logo = "reticle" }) {
  const f = window.PWC.FLAVORS[flavor];
  return (
    <footer className="footer">
      <div className="wrap footer-top">
        <div className="footer-brand">
          <a href="#main" className="brand brand-foot">
            <PWCMark size={38} variant={logo} steel="var(--text)" />
            <span className="brand-word">
              <span className="brand-line1">PERMIAN</span>
              <span className="brand-line2">WELL CONTROL</span>
            </span>
          </a>
          <p className="footer-tag">{INV2.tagline}</p>
          <p className="footer-sub">{f.taglineSub}</p>
          <nav className="footer-nav" aria-label="Footer">
            {INV2.nav.map((n) => <a key={n.label} href={n.href}>{n.label}</a>)}
          </nav>
        </div>
        <div className="footer-cta">
          <CallButton size="block" />
          <p className="footer-area">{INV2.area}</p>
          <p className="footer-contact">
            {INV2.principal}, {INV2.role}<br />
            <a href={`mailto:${INV2.email}`}>{INV2.email}</a>
          </p>
        </div>
      </div>
      <div className="wrap footer-safety"><SafetyLine variant="foot" /></div>
      <div className="wrap footer-bottom">
        <p className="footer-disc">{INV2.footerDisclaimer}</p>
        <div className="footer-meta">
          <nav className="footer-legal" aria-label="Legal">
            {INV2.footerLegal.map((l) => <a key={l.label} href={l.href}>{l.label}</a>)}
          </nav>
          <p className="footer-copy">© {new Date().getFullYear()} {INV2.name}</p>
        </div>
      </div>
    </footer>
  );
}

/* ============================ STICKY MOBILE CALL BAR (C-STICKY) ============================ */
function StickyCallBar() {
  return (
    <div className="sticky-bar" role="region" aria-label="Quick call">
      <CallButton size="sticky" />
      <SaveButton tone="ghost" className="sticky-save" />
    </div>
  );
}

Object.assign(window, { Plan, Prose, SaveBlock, FAQ, Footer, StickyCallBar });