// Trust strip · Service pillars · How it works · Service area · FAQ · Quote CTA · Footer
// All in one file to keep imports tidy. Each exports to window.

const TT = window.Tokens;
const TA = window.Atoms;

// ============ TRUST STRIP ============
function TrustStrip() {
  const items = [
    { h: "Real price, up front.",        s: "We quote the job before we book it — no open-ended hourly meter." },
    { h: "A neighbor, not a franchise.", s: "Locally owned in Fort Wayne. You'll know the people in your home." },
    { h: "Built around your deadline.",  s: "Move-out keys, showings, or a tough week — we plan to your timing." },
    { h: "Cleaned to a checklist.",      s: "Every visit follows the same scope so nothing important gets missed." },
  ];
  return (
    <section style={{ background: TT.white, borderTop: `1px solid ${TT.border}`, borderBottom: `1px solid ${TT.border}` }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto", padding: "32px 40px",
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28,
      }}>
        {items.map(({ h, s }) => (
          <div key={h} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <hr style={{ width: 28, height: 1, background: window.Tokens.gold, border: 0, margin: "0 0 4px" }} />
            <h4 style={{ margin: 0, fontFamily: TT.fontSerif, fontWeight: 400, fontSize: 20, lineHeight: 1.18, letterSpacing: "0.02em", color: TT.burgundy }}>{h}</h4>
            <p style={{ margin: 0, fontFamily: TT.fontSans, fontSize: 13, lineHeight: 1.55, color: "rgba(31,29,29,0.7)" }}>{s}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ SERVICE PILLARS ============
function ServicePillars() {
  const services = window.Content.services;
  const photos = {
    "move-out-cleaning":  "/assets/apex-move-out.jpeg",
    "deep-cleaning":      "/assets/hero-warm-living.jpg",
    "apartment-cleaning": "/assets/hero-warm-kitchen.jpg",
    "recurring-cleaning": "/assets/apex-recurring.jpeg",
  };

  return (
    <section id="services" style={{ background: TT.ivory }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "72px 40px" }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>Services</Eyebrow>
          <h2 style={{ ...TA.heading, marginTop: 12, fontSize: "clamp(2rem, 2.4vw + 1rem, 3rem)" }}>
            Cleaning for deadline days and reset days.
          </h2>
          <GoldRule />
          <p style={{ ...TA.body, marginTop: 18, maxWidth: 640 }}>
            No invented teaser pricing or trust badges. Tell us what you need and Apex quotes a focused scope before anyone touches the property.
          </p>
        </div>

        <ul style={{ marginTop: 36, padding: 0, listStyle: "none", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {services.map(svc => <ServiceCard key={svc.slug} svc={svc} photo={photos[svc.slug]} />)}
        </ul>
      </div>
    </section>
  );
}

function ServiceCard({ svc, photo }) {
  const [hover, setHover] = React.useState(false);
  return (
    <li>
      <a href={`#${svc.slug}`}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          display: "flex", flexDirection: "column", textDecoration: "none", color: "inherit",
          background: TT.white,
          border: `1px solid ${hover ? TT.gold : TT.border}`,
          borderRadius: 22, overflow: "hidden", height: "100%",
          boxShadow: hover ? "0 24px 55px rgba(91,22,25,0.18)" : "0 4px 12px rgba(31,29,29,0.08)",
          transform: hover ? "translateY(-2px)" : "translateY(0)",
          transition: "border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease",
        }}>
        <div style={{ position: "relative", aspectRatio: "16 / 10", overflow: "hidden", background: TT.mist }}>
          <img src={photo} alt=""
            style={{ width: "100%", height: "100%", objectFit: "cover",
                     filter: "saturate(1.16) contrast(1.06)",
                     transform: hover ? "scale(1.05)" : "scale(1)",
                     transition: "transform 500ms cubic-bezier(.16,1,.3,1)" }} />
          <div style={{ position: "absolute", inset: 0,
                        background: "linear-gradient(to top, rgba(31,29,29,0.32), transparent 55%)" }} />
        </div>
        <div style={{ padding: "20px 22px 22px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
          <h3 style={{ margin: 0, fontFamily: TT.fontSerif, fontWeight: 400, fontSize: 22, lineHeight: 1.1, letterSpacing: "0.03em", color: TT.burgundy }}>
            {svc.shortName}
          </h3>
          <hr style={{ width: 32, height: 1, background: TT.gold, border: 0, margin: 0 }} />
          <p style={{ margin: 0, fontFamily: TT.fontSans, fontSize: 13.5, lineHeight: 1.6, color: "rgba(31,29,29,0.72)", flex: 1 }}>
            {svc.hero}
          </p>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6,
                         fontFamily: TT.fontSans, fontWeight: 700, fontSize: 13, color: TT.burgundyAccent,
                         marginTop: 4 }}>
            {svc.cta}
            <Icons.ArrowRight size={14} style={{ transform: hover ? "translateX(3px)" : "none", transition: "transform 240ms cubic-bezier(.16,1,.3,1)" }} />
          </span>
        </div>
      </a>
    </li>
  );
}

// ============ HOW IT WORKS ============
function HowItWorks() {
  const steps = [
    { title: "Tell us the job",      copy: "Service type, city or ZIP, size, deadline, and any add-ons.", icon: "ClipboardCheck" },
    { title: "Get a clear quote",    copy: "We confirm scope and timing before arrival.",                  icon: "CalendarClock" },
    { title: "Clean from a checklist", copy: "The crew works the agreed scope — move-out, deep, or recurring.", icon: "Sparkles" },
    { title: "QA + follow-up",       copy: "Photo or QA follow-up when appropriate. Concerns route back manually.", icon: "ShieldCheck" },
  ];
  return (
    <section id="process" style={{ background: TT.mist }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "72px 40px" }}>
        <Eyebrow>How it works</Eyebrow>
        <h2 style={{ ...TA.heading, marginTop: 12, maxWidth: 720, fontSize: "clamp(2rem, 2.4vw + 1rem, 3rem)" }}>
          Quote-first now. Controlled booking later.
        </h2>
        <GoldRule />
        <ol style={{ marginTop: 36, padding: 0, listStyle: "none", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {steps.map(({ title, copy, icon }, i) => {
            const I = Icons[icon];
            return (
              <li key={title} style={{ background: TT.white, border: `1px solid ${TT.border}`, borderRadius: 20, padding: 22, boxShadow: "0 4px 12px rgba(31,29,29,0.06)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span style={{ color: TT.burgundy }}><I size={30} strokeWidth={1.6} /></span>
                  <span style={{ fontFamily: TT.fontSerif, fontSize: 36, lineHeight: 1, color: TT.gold, letterSpacing: "0.03em" }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                </div>
                <h3 style={{ margin: "18px 0 6px", fontFamily: TT.fontSans, fontSize: 16, fontWeight: 700, color: TT.burgundy }}>{title}</h3>
                <p style={{ margin: 0, fontFamily: TT.fontSans, fontSize: 13, lineHeight: 1.6, color: "rgba(31,29,29,0.7)" }}>{copy}</p>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

Object.assign(window, { TrustStrip, ServicePillars, HowItWorks });