/* ATX Decon — shared shell + components.
   Exports to window at end. Loaded before pages. */

const PHONE_DISPLAY = "(512) 729-4800";
const PHONE_TEL = "+15127294800";
const EMAIL = "help@atxdecon.com";

const NAV = [
  { id: "home", label: "Home" },
  { id: "biohazard", label: "Biohazard" },
  { id: "infestation", label: "Room Infestation Cleanup" },
  { id: "hoarding", label: "Hoarding" },
  { id: "about", label: "About Us" },
  { id: "contact", label: "Contact Us" },
];

const SERVICES = [
  {
    id: "biohazard",
    icon: "fa-shield-virus",
    name: "Biohazard & Trauma",
    short: "Biohazard Cleanup",
    blurb: "Discreet, IICRC-standard cleanup and decontamination of blood, trauma, and unattended-death scenes.",
  },
  {
    id: "infestation",
    icon: "fa-house-medical",
    name: "Room Infestation Cleanup",
    short: "Room Infestation Cleanup",
    blurb: "Full sanitation of rooms affected by rodents, pests, droppings, and the contamination they leave behind.",
  },
  {
    id: "hoarding",
    icon: "fa-boxes-stacked",
    name: "Hoarding Cleanup",
    short: "Hoarding Cleanup",
    blurb: "Patient, judgment-free clearing and restoration of hoarding environments, paced around the people involved.",
  },
];

/* ---------- Small bits ---------- */
function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function CallBtn({ size, className = "", label }) {
  return (
    <a href={`tel:${PHONE_TEL}`} className={`btn btn-accent ${size === "lg" ? "btn-lg" : ""} ${className}`}>
      <i className="fa-solid fa-phone"></i>{label || PHONE_DISPLAY}
    </a>
  );
}

/* ---------- Image placeholder via user-fillable slot ---------- */
function Img({ id, ratio = "4 / 3", label = "Drop a photo", icon = "fa-image", style = {}, radius }) {
  return (
    <image-slot
      id={id}
      placeholder={label}
      {...(radius != null ? { radius: String(radius) } : {})}
      style={{ aspectRatio: ratio, width: "100%", boxShadow: "var(--shadow-md)", ...style }}
    ></image-slot>
  );
}

/* ---------- Logo ---------- */
function Logo({ go, dark }) {
  return (
    <button
      className="logo"
      onClick={() => go && go("home")}
      aria-label="ATX Decon home"
      style={{ background: "none", border: 0, padding: 0, display: "flex", alignItems: "center", gap: 13 }}
    >
      <img
        className="logo-mark-img"
        src={dark ? "assets/atx-shield-white.png" : "assets/atx-shield-navy.png"}
        alt=""
      />
      <span className="logo-type">
        <span className="logo-name" style={dark ? { color: "#fff" } : null}>ATX <span className="logo-thin">Decon</span></span>
        <span className="logo-sub">Restoration &amp; Remediation</span>
      </span>
    </button>
  );
}

/* ---------- Emergency utility bar ---------- */
function EmergencyBar() {
  return (
    <div className="ebar">
      <div className="wrap ebar-inner">
        <span className="ebar-status">
          <span className="ebar-dot"></span>
          <span className="badge-mono" style={{ color: "var(--on-dark-mute)" }}>STATUS · ON CALL 24 / 7 · AUSTIN, TX</span>
        </span>
        <div className="ebar-right">
          <span className="ebar-note">Licensed · Bonded · Insured · IICRC Certified</span>
          <a href={`tel:${PHONE_TEL}`} className="ebar-phone tnum">
            <i className="fa-solid fa-phone-volume"></i> {PHONE_DISPLAY}
          </a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Header / nav ---------- */
function Header({ current, go }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const nav = (id) => { setOpen(false); go(id); };
  return (
    <header className={`hdr ${scrolled ? "is-scrolled" : ""}`}>
      <div className="wrap hdr-inner">
        <Logo go={go} />
        <nav className="hdr-nav">
          {NAV.map((n) => (
            <button
              key={n.id}
              className={`hdr-link ${current === n.id ? "is-active" : ""}`}
              onClick={() => nav(n.id)}
            >
              {n.label}
            </button>
          ))}
        </nav>
        <div className="hdr-cta">
          <a href={`tel:${PHONE_TEL}`} className="btn btn-accent hdr-emergency">
            <i className="fa-solid fa-phone-volume"></i>
            <span className="stack" style={{ alignItems: "flex-start", lineHeight: 1.1, gap: 2 }}>
              <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".06em", opacity: .85 }}>24/7 EMERGENCY</span>
              <span className="tnum" style={{ fontSize: 15 }}>{PHONE_DISPLAY}</span>
            </span>
          </a>
        </div>
        <button className="hdr-burger" onClick={() => setOpen((v) => !v)} aria-label="Menu">
          <i className={`fa-solid ${open ? "fa-xmark" : "fa-bars"}`}></i>
        </button>
      </div>
      {open && (
        <div className="hdr-mobile">
          {NAV.map((n) => (
            <button key={n.id} className={`hdr-mobile-link ${current === n.id ? "is-active" : ""}`} onClick={() => nav(n.id)}>
              {n.label}
              <i className="fa-solid fa-chevron-right"></i>
            </button>
          ))}
          <a href={`tel:${PHONE_TEL}`} className="btn btn-accent btn-lg btn-block" style={{ marginTop: 14 }}>
            <i className="fa-solid fa-phone-volume"></i> Call 24/7 · {PHONE_DISPLAY}
          </a>
        </div>
      )}
    </header>
  );
}

/* ---------- Trust strip ---------- */
function TrustStrip() {
  const items = [
    { icon: "fa-certificate", text: "IICRC Certified" },
    { icon: "fa-file-shield", text: "Licensed · Bonded · Insured" },
    { icon: "fa-handshake-angle", text: "We bill insurance directly" },
    { icon: "fa-user-secret", text: "Discreet · Unmarked vehicles" },
    { icon: "fa-clock", text: "45-min metro response" },
  ];
  return (
    <div className="trust-strip">
      <div className="wrap trust-inner">
        {items.map((it, i) => (
          <div className="trust-item" key={i}>
            <i className={`fa-solid ${it.icon}`}></i>
            <span>{it.text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Service card ---------- */
function ServiceCard({ svc, go, featured }) {
  return (
    <button className={`svc-card card ${featured ? "is-featured" : ""}`} onClick={() => go(svc.id)}>
      <span className="svc-ic"><i className={`fa-solid ${svc.icon}`}></i></span>
      <h3 className="h3 svc-title">{svc.name}</h3>
      <p className="muted svc-blurb">{svc.blurb}</p>
      <span className="svc-link">Learn more <i className="fa-solid fa-arrow-right"></i></span>
    </button>
  );
}

/* ---------- Process steps ---------- */
function ProcessSteps({ steps }) {
  return (
    <div className="proc">
      {steps.map((s, i) => (
        <div className="proc-step" key={i}>
          <div className="proc-num tnum">{String(i + 1).padStart(2, "0")}</div>
          <div className="proc-line" aria-hidden="true"></div>
          <h3 className="proc-title">{s.t}</h3>
          <p className="muted proc-desc">{s.d}</p>
        </div>
      ))}
    </div>
  );
}

/* ---------- Stat ---------- */
function StatGrid({ stats }) {
  return (
    <div className="stat-grid">
      {stats.map((s, i) => (
        <div className="stat" key={i}>
          <div className="stat-num tnum">{s.n}</div>
          <div className="stat-label">{s.l}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- FAQ accordion ---------- */
function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div className={`faq-item ${open === i ? "is-open" : ""}`} key={i}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <i className={`fa-solid ${open === i ? "fa-minus" : "fa-plus"}`}></i>
          </button>
          <div className="faq-a-wrap"><div className="faq-a"><p className="muted">{it.a}</p></div></div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Result / reassurance band ---------- */
function ReassureBand() {
  return (
    <section className="section bg-navy reassure">
      <div className="wrap-narrow center">
        <Eyebrow>ONE CALL. HANDLED.</Eyebrow>
        <h2 className="h1" style={{ marginTop: 18, color: "#fff" }}>
          Cleaned, decontaminated, and restored — fast.
        </h2>
        <p className="lead" style={{ marginTop: 20 }}>
          Most jobs are fully cleaned, decontaminated, and back to normal in a single
          discreet visit. You make one call — our certified team handles everything else,
          quietly and completely — so you're not left waiting or dealing with it yourself.
        </p>
        <div className="row" style={{ justifyContent: "center", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
          <CallBtn size="lg" label="Call now — we're on the way" />
          <a href="#" className="btn btn-outline btn-lg" onClick={(e)=>{e.preventDefault();window.__go&&window.__go("contact");}}>Request a free estimate</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Big CTA band ---------- */
function CTABand({ go }) {
  return (
    <section className="cta-band">
      <div className="wrap cta-inner">
        <div className="cta-copy">
          <Eyebrow>HERE WHEN YOU NEED US</Eyebrow>
          <h2 className="h1" style={{ marginTop: 16 }}>Call now, or request a free estimate.</h2>
          <p className="lead" style={{ marginTop: 14 }}>
            Emergencies don't keep business hours. A trained ATX Decon specialist answers
            every call, day or night — no answering service, no runaround.
          </p>
          <div className="row" style={{ gap: 14, marginTop: 28, flexWrap: "wrap" }}>
            <CallBtn size="lg" />
            <button className="btn btn-navy btn-lg" onClick={() => go("contact")}>
              <i className="fa-regular fa-envelope"></i> Request free estimate
            </button>
          </div>
        </div>
        <div className="cta-side card">
          <div className="cta-side-row"><i className="fa-solid fa-phone-volume"></i><div><div className="badge-mono">CALL DIRECT</div><a href={`tel:${PHONE_TEL}`} className="cta-side-strong tnum">{PHONE_DISPLAY}</a></div></div>
          <hr className="hr" />
          <div className="cta-side-row"><i className="fa-regular fa-clock"></i><div><div className="badge-mono">AVAILABILITY</div><div className="cta-side-strong">24 / 7 / 365</div></div></div>
          <hr className="hr" />
          <div className="cta-side-row"><i className="fa-solid fa-location-dot"></i><div><div className="badge-mono">SERVICE AREA</div><div className="cta-side-strong">Austin &amp; Central Texas</div></div></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer({ go }) {
  return (
    <footer className="ftr">
      <div className="wrap ftr-top">
        <div className="ftr-brand">
          <Logo go={go} dark />
          <p className="ftr-tag">
            Professional decontamination, remediation, and restoration for Austin homes and
            businesses — handled with discretion and care since day one.
          </p>
          <div className="ftr-chips chips">
            <span className="chip"><i className="fa-solid fa-certificate"></i> IICRC</span>
            <span className="chip"><i className="fa-solid fa-file-shield"></i> Licensed &amp; Insured</span>
          </div>
        </div>
        <div className="ftr-col">
          <div className="ftr-h">Services</div>
          {SERVICES.map((s) => (
            <button key={s.id} className="ftr-link" onClick={() => go(s.id)}>{s.short}</button>
          ))}
        </div>
        <div className="ftr-col">
          <div className="ftr-h">Company</div>
          <button className="ftr-link" onClick={() => go("about")}>About Us</button>
          <button className="ftr-link" onClick={() => go("contact")}>Contact Us</button>
          <a className="ftr-link" href={`tel:${PHONE_TEL}`}>24/7 Emergency Line</a>
        </div>
        <div className="ftr-col">
          <div className="ftr-h">Reach us</div>
          <a className="ftr-link tnum" href={`tel:${PHONE_TEL}`}><i className="fa-solid fa-phone"></i> {PHONE_DISPLAY}</a>
          <a className="ftr-link" href={`mailto:${EMAIL}`}><i className="fa-regular fa-envelope"></i> {EMAIL}</a>
          <span className="ftr-link" style={{ cursor: "default" }}><i className="fa-solid fa-location-dot"></i> Austin &amp; Central Texas</span>
        </div>
      </div>
      <div className="wrap ftr-bottom">
        <span>© {new Date().getFullYear()} ATX Decon. All rights reserved.</span>
        <span className="badge-mono">RESTORATION · REMEDIATION · DECONTAMINATION</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  PHONE_DISPLAY, PHONE_TEL, EMAIL, NAV, SERVICES,
  Eyebrow, CallBtn, Img, Logo, EmergencyBar, Header, TrustStrip,
  ServiceCard, ProcessSteps, StatGrid, FAQ, ReassureBand, CTABand, Footer,
});