/* sections.jsx — all body sections below the hero */
const { I, Stars, Ph, PHONE, EMAIL, SERVICES, MORE_SERVICES, STEPS, TESTIMONIALS, CITIES, GUARANTEES } = window;

/* reveal helper hook — adds .in when scrolled into view */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---------------- thin trust strip under hero ---------------- */
function TrustStrip() {
  const stats = [
    ["200+", "jobs completed"],
    ["4.9★", "avg. rating"],
  ];
  return (
    <div className="strip">
      <div className="wrap strip__inner">
        {stats.map(([n, l], i) => (
          <div className="strip__item reveal" key={i}>
            <strong>{n}</strong><span>{l}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- SERVICES ---------------- */
function Services({ onQuote }) {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">What we do</span>
          <h2 className="h-sec">We finish what the move started.</h2>
          <p className="lead sec-head__lead">A move-out rarely leaves a property ready. There's junk to clear, surfaces to scrub, and not enough time. We step in and get it done — fully hauled, fully cleaned.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <article className={`svc card reveal d${i + 1}`} key={s.key}>
              <Ph label={s.key === "junk" ? "photo — loaded truck" : "photo — sparkling kitchen"} className="svc__img" src={s.img} alt={s.title} w={900} />
              <div className="svc__body">
                <div className="svc__icon"><s.icon /></div>
                <span className="svc__tag">{s.tag}</span>
                <h3 className="svc__title">{s.title}</h3>
                <p className="svc__text">{s.body}</p>
                <ul className="svc__list">
                  {s.points.map((p, j) => <li key={j}><I.check />{p}</li>)}
                </ul>
                <button className="svc__link" onClick={onQuote}>Quote this service <I.arrow /></button>
              </div>
            </article>
          ))}
        </div>
        <div className="more-svc reveal">
          {MORE_SERVICES.map((m, i) => (
            <div className="more-svc__item" key={i}>
              <span className="more-svc__icon"><m.icon /></span>
              <div>
                <h3 className="more-svc__title">{m.title}</h3>
                <p className="more-svc__text">{m.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- HOW IT WORKS ---------------- */
function HowItWorks() {
  return (
    <section className="section section--tint" id="how">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">How it works</span>
          <h2 className="h-sec">We make it simple from start to finish.</h2>
          <p className="lead sec-head__lead">No walkthroughs, no surprises, no lifting. From the moment you call to the moment it's cleared — we take care of everything.</p>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <div className={`step reveal d${i + 1}`} key={s.n}>
              <div className="step__row">
                <span className="step__n">{s.n}</span>
                <span className="step__icon"><s.icon /></span>
              </div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__text">{s.body}</p>
              {i < STEPS.length - 1 && <span className="step__arrow"><I.arrow /></span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRICING (removed) ---------------- */

/* ---------------- TESTIMONIALS ---------------- */
function Testimonials() {
  return (
    <section className="section" id="reviews">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Happy customers</span>
          <h2 className="h-sec">Our work speaks for itself.</h2>
          <div className="rev-rating reveal"><Stars /><span><b>4.9 out of 5</b> · 200+ verified reviews</span></div>
        </div>
        <div className="rev-grid">
          {TESTIMONIALS.map((tt, i) => (
            <figure className={`rev card reveal d${i + 1}`} key={i}>
              <I.quote className="rev__mark" />
              <Stars />
              <blockquote className="rev__q">{tt.quote}</blockquote>
              <figcaption className="rev__who">
                <span className="rev__av" style={{ background: ["#101922", "#016FEF", "#3D5366"][i % 3] }}>{tt.name[0]}</span>
                <span><b>{tt.name}</b><em>{tt.role}</em></span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- SERVICE AREA ---------------- */
function ServiceArea({ onQuote }) {
  return (
    <section className="section section--tint" id="areas">
      <div className="wrap area">
        <div className="area__copy reveal">
          <span className="eyebrow">Service area</span>
          <h2 className="h-sec">Proudly serving Atlanta & Georgia</h2>
          <p className="lead">Same-day and next-day crews across metro Atlanta and the surrounding Georgia cities. Not sure if we reach you? Ask — we cover more than the list.</p>
          <div className="area__cta">
            <button className="btn" onClick={onQuote}>Check my address<I.arrow /></button>
            <a className="tel" href={`tel:${PHONE}`}><I.phone />{PHONE}</a>
          </div>
        </div>
        <div className="area__list reveal d1">
          {CITIES.map((c, i) => (
            <span className="area__city" key={i}><I.pin style={{ width: 15, height: 15, color: "var(--accent)" }} />{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- GUARANTEE ---------------- */
function Guarantee() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Our promise</span>
          <h2 className="h-sec">Booked with total peace of mind</h2>
        </div>
        <div className="gar-grid">
          {GUARANTEES.map((g, i) => (
            <div className={`gar reveal d${(i % 4) + 1}`} key={i}>
              <span className="gar__icon"><g.icon /></span>
              <h3 className="gar__title">{g.title}</h3>
              <p className="gar__text">{g.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, TrustStrip, Services, HowItWorks, Testimonials, ServiceArea, Guarantee, FAQ });

/* ---------------- FAQ (accordion + FAQPage schema in <head>) ---------------- */
const FAQS = [
  { q: "How much does junk removal cost?", a: "Pricing is flat and based on how much space your items take up in our truck — no hidden fees. Send a few photos or a quick description and we'll text you an upfront, all-in quote before we lift a thing." },
  { q: "Do you offer same-day or next-day service?", a: "Yes. We run same-day and next-day crews across Atlanta and the surrounding Georgia cities whenever our schedule allows. The sooner you reach out, the better your chances of a same-day slot." },
  { q: "What areas do you serve?", a: "We cover metro Atlanta and nearby cities including Marietta, Alpharetta, Roswell, Sandy Springs, Decatur, Smyrna, Duluth, Kennesaw, Johns Creek, Lawrenceville and Stockbridge. Not sure if we reach you? Just ask — we cover more than the list." },
  { q: "What happens to the junk you haul away?", a: "We donate and recycle first. Usable furniture and goods go to local Atlanta charities, recyclables are sorted out, and only what's truly unusable heads to the landfill — keeping your move eco-friendly." },
  { q: "Do I need to be home during the service?", a: "Not necessarily. As long as our crew can safely access the items and the property, we can handle the haul and the clean while you focus on your move. We'll confirm all the details when we schedule." },
  { q: "Are there any items you can't haul away?", a: "We take the vast majority of household and office items — furniture, appliances, electronics, mattresses and general clutter. A few hazardous materials (like wet paint, chemicals, asbestos or certain solvents) we can't legally transport, but we'll always point you to the right disposal option. When in doubt, just ask." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section--tint" id="faq">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">FAQ</span>
          <h2 className="h-sec">Questions, answered</h2>
          <p className="lead sec-head__lead">Everything you need to know before you book your junk removal and post-move cleaning in Atlanta.</p>
        </div>
        <div className="faq">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className={`faq__item ${isOpen ? "faq__item--open" : ""}`} key={i}>
                <button className="faq__q" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq__icon" aria-hidden="true"><I.arrow /></span>
                </button>
                <div className="faq__a" style={{ maxHeight: isOpen ? "320px" : "0px" }}>
                  <p>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });