/* ATX Decon — Home page */

function HomeHero({ go }) {
  return (
    <section className="hero hero-bg">
      <div className="hero-bg-img" role="img" aria-label="Hoarded living room before, and the same room cleared by the ATX Decon team after"></div>
      <div className="hero-scrim"></div>
      <div className="wrap hero-bg-inner">
        <div className="hero-copy">
          <Eyebrow>DECONTAMINATION · REMEDIATION · AUSTIN, TX</Eyebrow>
          <h1 className="display" style={{ marginTop: 22 }}>
            Professional solutions for life's most challenging cleanup situations.
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 540 }}>
            ATX Decon handles biohazard, infestation, and hoarding cleanup across Austin
            with total discretion and IICRC-certified precision — on-site fast, the
            moment you call.
          </p>
          <div className="hero-actions">
            <CallBtn size="lg" label="Call 24/7 — talk to us now" />
            <button className="btn btn-outline btn-lg" onClick={() => go("contact")}>
              <i className="fa-regular fa-envelope"></i> Request free estimate
            </button>
          </div>
          <div className="hero-trust chips">
            <span className="chip"><i className="fa-solid fa-check"></i> IICRC Certified</span>
            <span className="chip"><i className="fa-solid fa-check"></i> Licensed &amp; Insured</span>
            <span className="chip"><i className="fa-solid fa-check"></i> Discreet &amp; Unmarked</span>
          </div>
        </div>
        <div className="hero-badge card">
          <span className="hero-badge-dot"></span>
          <div>
            <div className="badge-mono" style={{ color: "var(--slate-2)" }}>RESPONSE TIME</div>
            <div className="hero-badge-strong tnum">Under 45 min<span> · metro Austin</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeServices({ go }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <Eyebrow>HOW WE HELP</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16 }}>Specialized cleanup, handled end to end.</h2>
          </div>
          <p className="lead sec-head-aside">
            Every job is different, but the promise is the same: thorough decontamination,
            full restoration, and zero judgment.
          </p>
        </div>
        <div className="grid cols-3" style={{ marginTop: 48 }}>
          {SERVICES.map((s) => <ServiceCard key={s.id} svc={s} go={go} />)}
        </div>
        <div className="svc-more">
          <span className="muted">We also handle</span>
          <button className="svc-more-tag" onClick={() => go("contact")}>Water &amp; mold remediation</button>
          <button className="svc-more-tag" onClick={() => go("contact")}>Drug decontamination</button>
          <button className="svc-more-tag" onClick={() => go("contact")}>Odor removal</button>
          <button className="svc-more-tag" onClick={() => go("contact")}>Medical waste disposal</button>
        </div>
      </div>
    </section>
  );
}

function HomeProcess() {
  const steps = [
    { t: "You call", d: "A trained specialist answers — day or night — and listens before anything else." },
    { t: "We assess", d: "Fast on-site evaluation, a clear scope, and a written estimate with no surprises." },
    { t: "We restore", d: "Discreet, certified decontamination and cleanup, documented every step." },
    { t: "Back to normal", d: "A safe, sanitized space returned to you — fast — with help on the insurance claim." },
  ];
  return (
    <section className="section bg-soft">
      <div className="wrap">
        <div className="center" style={{ maxWidth: 680, margin: "0 auto 56px" }}>
          <Eyebrow>A CALM, CLEAR PROCESS</Eyebrow>
          <h2 className="h1" style={{ marginTop: 16 }}>Four steps. We carry the weight of every one.</h2>
        </div>
        <ProcessSteps steps={steps} />
      </div>
    </section>
  );
}

function HomeWhy() {
  const stats = [
    { n: "24/7", l: "A specialist answers every call, 365 days a year" },
    { n: "45 min", l: "Average on-site response across the Austin metro" },
    { n: "IICRC", l: "Certified technicians, industry-standard protocols" },
    { n: "100%", l: "Discreet, unmarked vehicles and total confidentiality" },
  ];
  return (
    <section className="section bg-navy">
      <div className="wrap why-inner">
        <div className="why-copy">
          <Eyebrow>WHY ATX DECON</Eyebrow>
          <h2 className="h1" style={{ marginTop: 16, color: "#fff" }}>
            The team Austin trusts with its hardest days.
          </h2>
          <p className="lead" style={{ marginTop: 18 }}>
            We're a local Austin company — licensed, bonded, and insured — and we treat every
            home as if it were our own. We bill your insurance directly, arrive in unmarked
            vehicles, and never leave until the space is truly safe.
          </p>
          <div className="why-points">
            <div className="why-point"><i className="fa-solid fa-handshake-angle"></i><span>We work directly with your insurance company</span></div>
            <div className="why-point"><i className="fa-solid fa-user-secret"></i><span>Unmarked vehicles &amp; complete discretion</span></div>
            <div className="why-point"><i className="fa-solid fa-location-dot"></i><span>Locally owned, serving all of Central Texas</span></div>
          </div>
        </div>
        <div className="why-stats">
          <StatGrid stats={stats} />
        </div>
      </div>
    </section>
  );
}

function HomeRestore() {
  return (
    <section className="section">
      <div className="wrap restore-inner">
        <div className="restore-media">
          <image-slot id="home-before" placeholder="Before" radius="14"
            style={{ width: "100%", aspectRatio: "1 / 1", boxShadow: "var(--shadow-md)" }}></image-slot>
          <image-slot id="home-after" placeholder="After — restored & sanitized" radius="14"
            style={{ width: "100%", aspectRatio: "1 / 1", boxShadow: "var(--shadow-md)" }}></image-slot>
        </div>
        <div className="restore-copy">
          <Eyebrow>BEFORE &amp; AFTER</Eyebrow>
          <h2 className="h1" style={{ marginTop: 16 }}>From overwhelming situations to restored spaces.</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            Decontamination is more than cleaning. We remove the hazard, treat what's beneath
            the surface, neutralize odor, and verify the space is safe — returning it to a
            place you can live in again.
          </p>
          <ul className="check-list">
            <li><i className="fa-solid fa-circle-check"></i> Hospital-grade disinfection &amp; decontamination</li>
            <li><i className="fa-solid fa-circle-check"></i> Structural cleaning, deodorizing &amp; air treatment</li>
            <li><i className="fa-solid fa-circle-check"></i> Safe, compliant disposal of all hazardous material</li>
            <li><i className="fa-solid fa-circle-check"></i> Final verification before we consider the job done</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function HomeTestimonial() {
  return (
    <section className="section-sm bg-warm">
      <div className="wrap-narrow center">
        <div className="quote-stars" aria-hidden="true">
          {[0,1,2,3,4].map(i => <i key={i} className="fa-solid fa-star"></i>)}
        </div>
        <blockquote className="quote">
          "They arrived within the hour, treated our family with such kindness, and handled
          everything we couldn't bear to. We never felt judged — only cared for. I can't
          imagine having gone through it without them."
        </blockquote>
        <div className="quote-by">
          <span className="quote-name">A. Reyes</span>
          <span className="quote-meta badge-mono">VERIFIED CLIENT · SOUTH AUSTIN</span>
        </div>
      </div>
    </section>
  );
}

function HomeArea() {
  const cities = ["Austin","Round Rock","Cedar Park","Georgetown","Pflugerville","Leander","Kyle","Buda","Hutto","Bee Cave","Dripping Springs","Bastrop"];
  return (
    <section className="section">
      <div className="wrap area-inner">
        <div className="area-copy">
          <Eyebrow>WHERE WE SERVE</Eyebrow>
          <h2 className="h1" style={{ marginTop: 16 }}>Across Austin &amp; Central Texas.</h2>
          <p className="lead" style={{ marginTop: 16 }}>
            Based in Austin and responding throughout the metroplex. If you're nearby and
            don't see your town listed, call us — we likely cover you.
          </p>
          <div className="area-tags">
            {cities.map((c) => <span key={c} className="area-tag"><i className="fa-solid fa-location-dot"></i>{c}</span>)}
          </div>
        </div>
        <image-slot id="home-map" placeholder="Service-area map / Austin skyline" radius="16"
          style={{ width: "100%", aspectRatio: "4 / 3", boxShadow: "var(--shadow-md)" }}></image-slot>
      </div>
    </section>
  );
}

function HomeFAQ() {
  const items = [
    { q: "How quickly can you get here?", a: "We answer 24/7 and aim to be on-site within 45 minutes across the Austin metro. For active emergencies, call us directly rather than using the form." },
    { q: "Will my insurance cover this?", a: "In many cases, yes. We work directly with your insurance company — opening the claim and coordinating with adjusters — so you don't have to navigate it alone." },
    { q: "Is your work discreet?", a: "Completely. We arrive in unmarked vehicles, keep every job confidential, and are mindful of neighbors and family throughout." },
    { q: "Are you certified and insured?", a: "Yes. Our technicians are IICRC-certified, and ATX Decon is licensed, bonded, and insured for every service we provide." },
  ];
  return (
    <section className="section bg-soft">
      <div className="wrap faq-wrap">
        <div className="faq-head">
          <Eyebrow>COMMON QUESTIONS</Eyebrow>
          <h2 className="h1" style={{ marginTop: 16 }}>Answers, before you even ask.</h2>
          <p className="lead" style={{ marginTop: 16 }}>Still unsure about something? Call us — there's no charge to talk it through.</p>
          <CallBtn className="faq-call" />
        </div>
        <div className="faq-body"><FAQ items={items} /></div>
      </div>
    </section>
  );
}

function HomePage({ go }) {
  return (
    <main>
      <HomeHero go={go} />
      <TrustStrip />
      <HomeServices go={go} />
      <ReassureBand />
      <HomeProcess />
      <HomeWhy />
      <HomeRestore />
      <HomeTestimonial />
      <HomeArea />
      <HomeFAQ />
      <CTABand go={go} />
    </main>
  );
}

window.HomePage = HomePage;