/* global React, Frame, PlaceholderBefore, PlaceholderAfter, HeroSidePlaceholder, MoodFrame */
// ---------------------------------------------------------------
// STERLING — Section components
// Each section is a quiet, editorial composition.
// ---------------------------------------------------------------

const { useRef: useRefS, useState: useStateS, useEffect: useEffectS, useCallback: useCallbackS } = React;

// Cross-page links. Anchors resolve same-page; otherwise they navigate.
const HOME = "index.html";
const LINKS = {
  home:        `${HOME}#top`,
  process:     `HowItWorks.html`,
  plans:       `Plans.html`,
  area:        `ServiceArea.html`,
  about:       `About.html`,
  plansAnchor: `Plans.html#tiers`,
  faq:         `FAQ.html`,
};

// Tiny inline icons (1px stroke, currentColor) — no emoji, no clipart
const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
    <path d="M5 12 H19 M13 6 L19 12 L13 18" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Check = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" aria-hidden="true">
    <path d="M5 12.5 L10 17 L19 7" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// =============================================================
// NAV
// =============================================================
function Nav() {
  const [scrolled, setScrolled] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="shell flex items-center justify-between py-5">
        <a href={LINKS.home} className="flex items-baseline gap-3" aria-label="Sterling Bin Co. — home">
          <span className="wordmark text-[15px] text-champagne">Sterling</span>
          <span className="wordmark text-[10px] text-pewter">Bin Co.</span>
        </a>

        <nav aria-label="Primary" className="hidden md:flex items-center gap-9 text-[13px] text-graphite">
          <a className="link" href={LINKS.process}>How It Works</a>
          <a className="link" href={LINKS.plans}>Plans</a>
          <a className="link" href={LINKS.area}>Service Area</a>
          <a className="link" href={LINKS.about}>About</a>
        </nav>

        <a className="link-cham text-[13px]" href={LINKS.area}>
          Check your address <Arrow />
        </a>
      </div>
    </header>
  );
}

// =============================================================
// HERO
// =============================================================
function Hero() {
  return (
    <section id="top" className="relative pt-[120px] pb-24 md:pt-[160px] md:pb-32">
      <div className="shell grid grid-cols-12 gap-x-8 gap-y-12 items-end">
        {/* Left: type */}
        <div className="col-span-12 lg:col-span-7 xl:col-span-7">
          <p className="eyebrow reveal" style={{ "--d": "120ms" }}>Charlotte's Premier Bin-Cleaning Service</p>

          <h1 className="display mt-8 text-[clamp(56px,9.2vw,160px)] balance">
            <span className="block reveal" style={{ "--d": "260ms" }}>Effortless.</span>
            <span className="block reveal" style={{ "--d": "420ms" }}><em>Immaculate.</em></span>
          </h1>

          <p className="reveal mt-10 max-w-[46ch] text-[17px] md:text-[18px] leading-[1.55] text-graphite pretty" style={{ "--d": "640ms" }}>
            We sanitize, deodorize, and pressure-clean your bins the day after they're emptied — automatically, every month. You never lift a finger. You never think about it again.
          </p>

          <div className="reveal mt-10 flex flex-wrap items-center gap-x-10 gap-y-4" style={{ "--d": "820ms" }}>
            <a className="link-cham text-[14px]" href="#area">Check your address <Arrow /></a>
            <a className="link text-[13px] text-graphite" href="#plans">View plans</a>
          </div>
        </div>

        {/* Right: framed proof image */}
        <div className="col-span-12 lg:col-span-5 xl:col-start-9 xl:col-span-4">
          <div className="reveal" style={{ "--d": "520ms" }}>
            <Frame
              caption="Myers Park · before & after"
              className="aspect-[4/5] w-full"
            >
              {/* Mini before/after still: dark left, light right, hairline seam */}
              <div className="absolute inset-0 grid grid-cols-2">
                <div className="relative overflow-hidden">
                  <PlaceholderBefore />
                </div>
                <div className="relative overflow-hidden border-l border-champagne/60">
                  <PlaceholderAfter />
                </div>
              </div>
              <span className="absolute top-4 left-4 eyebrow text-[10px] text-paper/90">Before</span>
              <span className="absolute top-4 right-4 eyebrow text-[10px] text-ink/70">After</span>
            </Frame>
            <p className="mt-3 text-[11px] tracking-[0.18em] uppercase text-pewter">
              Plate <span className="text-champagne">N° 042</span> · Photographed after service
            </p>
          </div>
        </div>
      </div>

      {/* Decorative scroll cue / hairline */}
      <div className="shell mt-24 md:mt-32 reveal" style={{ "--d": "980ms" }}>
        <div className="rule pt-5 flex items-center justify-between text-[11px] tracking-[0.18em] uppercase text-pewter">
          <span>Established 2024 · Charlotte, NC</span>
          <span className="hidden sm:inline">Serving south Charlotte &amp; the Carolinas</span>
          <span aria-hidden="true">↓</span>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// PROBLEM
// =============================================================
function Problem() {
  return (
    <section className="iv py-28 md:py-40">
      <div className="shell grid grid-cols-12 gap-x-8 gap-y-12">
        <div className="col-span-12 md:col-span-4">
          <p className="eyebrow">What Lives in Your Bin</p>
          <div className="mt-8 h-px w-12 bg-champagne" aria-hidden="true"></div>
        </div>
        <div className="col-span-12 md:col-span-8">
          <p className="display text-[clamp(34px,5vw,72px)] balance text-ink">
            Mold. Maggots. The smell that greets you every morning &mdash; and the <em>residue</em> your hauler leaves behind every week.
          </p>

          <dl className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-x-10 gap-y-10">
            {[
              {
                k: "Bacterial",
                v: "Curbside bins harbor E. coli, Salmonella, and Listeria. Your hauler does not clean them.",
              },
              {
                k: "Olfactory",
                v: "Decomposing organics produce volatile compounds that cling to plastic and seep into the garage.",
              },
              {
                k: "Visible",
                v: "Greasy residue, fly larvae, and the slow stain of every Tuesday until something finally gives.",
              },
            ].map((it) => (
              <div key={it.k}>
                <dt className="eyebrow eyebrow--mist">{it.k}</dt>
                <dd className="mt-3 text-[15px] leading-[1.55] text-graphite pretty">{it.v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// PROCESS
// =============================================================
function Process() {
  const steps = [
    {
      n: "01",
      h: "We follow your route.",
      b: "Service is automatic — the day after your municipal pickup. No scheduling, no reminders, no missed weeks. We meet your bin where it stands.",
    },
    {
      n: "02",
      h: "200°F pressurized sanitization.",
      b: "Truck-mounted, closed-loop system. Kills 99.9% of bacteria. Eco-safe sanitizer, biodegradable. Nothing enters the storm drain.",
    },
    {
      n: "03",
      h: "Photographed. Delivered to your inbox.",
      b: "Deodorized, spotless, returned to the same square inch we found it on. A short visual record arrives by the time you are home.",
    },
  ];

  return (
    <section id="process" className="iv py-28 md:py-40 bg-paper">
      <div className="shell">
        <div className="grid grid-cols-12 gap-x-8 items-end">
          <div className="col-span-12 md:col-span-6">
            <p className="eyebrow">The Sterling Process</p>
            <h2 className="display mt-6 text-[clamp(40px,5.4vw,84px)] balance">
              Three steps. <em>Then silence.</em>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-5 md:col-start-8">
            <p className="text-[15px] leading-[1.6] text-graphite pretty">
              Our system is built around your indifference to it. You should not have to remember when we come, what we do, or whether it happened. You should only notice the absence of what used to be there.
            </p>
          </div>
        </div>

        <ol className="mt-20 md:mt-28 rule">
          {steps.map((s) => (
            <li key={s.n} className="rule-bot grid grid-cols-12 gap-x-8 py-10 md:py-14">
              <div className="col-span-12 md:col-span-2">
                <span className="numeral">{s.n}</span>
              </div>
              <div className="col-span-12 md:col-span-6">
                <h3 className="font-display font-light text-[clamp(24px,2.6vw,38px)] leading-[1.1] text-ink balance">{s.h}</h3>
              </div>
              <div className="col-span-12 md:col-span-4">
                <p className="text-[15px] leading-[1.6] text-graphite pretty">{s.b}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// =============================================================
// PROOF — the signature before/after slider
// =============================================================
function Proof() {
  const ref = useRefS(null);
  const [x, setX] = useStateS(52);          // % position of the seam
  const [dragging, setDragging] = useStateS(false);

  const move = useCallbackS((clientX) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const pct = ((clientX - r.left) / r.width) * 100;
    setX(Math.max(2, Math.min(98, pct)));
  }, []);

  useEffectS(() => {
    if (!dragging) return;
    const onMove = (e) => {
      if (e.touches) move(e.touches[0].clientX);
      else move(e.clientX);
    };
    const onUp = () => setDragging(false);
    window.addEventListener("mousemove", onMove);
    window.addEventListener("touchmove", onMove, { passive: true });
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchend", onUp);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchend", onUp);
    };
  }, [dragging, move]);

  // Keyboard control for accessibility
  const onKey = (e) => {
    if (e.key === "ArrowLeft")  setX((v) => Math.max(2, v - 2));
    if (e.key === "ArrowRight") setX((v) => Math.min(98, v + 2));
    if (e.key === "Home")       setX(2);
    if (e.key === "End")        setX(98);
  };

  return (
    <section id="proof" className="iv py-28 md:py-40 bg-paper">
      <div className="shell">
        <div className="grid grid-cols-12 gap-x-8 items-end">
          <div className="col-span-12 md:col-span-7">
            <p className="eyebrow">Proof</p>
            <h2 className="display mt-6 text-[clamp(40px,5.4vw,84px)] balance">
              The same bin. <em>One service apart.</em>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9">
            <p className="text-[15px] leading-[1.6] text-graphite pretty">
              Drag the seam. The plate on the left is the bin we met on a Wednesday morning in Eastover. The plate on the right is the same bin, ninety minutes later.
            </p>
          </div>
        </div>

        <figure className="mt-16 md:mt-20">
          <div
            ref={ref}
            className="compare frame relative aspect-[16/10] w-full"
            style={{ "--x": `${x}%` }}
            onMouseDown={(e) => { setDragging(true); move(e.clientX); }}
            onTouchStart={(e) => { setDragging(true); move(e.touches[0].clientX); }}
            role="slider"
            aria-label="Before and after comparison"
            aria-valuemin={0}
            aria-valuemax={100}
            aria-valuenow={Math.round(x)}
            tabIndex={0}
            onKeyDown={onKey}
          >
            {/* Layer 1 — BEFORE (full) */}
            <div className="compare-layer">
              <PlaceholderBefore />
              <span className="compare-chip" style={{ left: 18 }}>Before</span>
            </div>
            {/* Layer 2 — AFTER (clipped from the left by --x) */}
            <div className="compare-layer compare-after">
              <PlaceholderAfter />
              <span className="compare-chip" style={{ right: 18, color: "#15161B", background: "rgba(246,245,242,0.7)" }}>After</span>
            </div>

            <div className="compare-handle" aria-hidden="true"></div>
            <button
              type="button"
              className="compare-knob"
              aria-hidden="true"
              tabIndex={-1}
              onMouseDown={(e) => { e.stopPropagation(); setDragging(true); }}
              onTouchStart={(e) => { e.stopPropagation(); setDragging(true); }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                <path d="M9 6 L4 12 L9 18 M15 6 L20 12 L15 18" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>

          <figcaption className="mt-4 flex flex-wrap items-baseline justify-between gap-y-2 text-[11px] tracking-[0.18em] uppercase text-pewter">
            <span>Plate <span className="text-champagne">N° 017</span> · Eastover · 96-gallon roll-out</span>
            <span>Drag to compare</span>
          </figcaption>
        </figure>

        {/* Testimonials */}
        <div className="mt-28 md:mt-36 grid grid-cols-1 md:grid-cols-3 gap-x-10 gap-y-12">
          {[
            { q: "I don't think about the bins anymore. That is the entire point, and they have delivered it.", n: "M. Calloway", w: "Myers Park" },
            { q: "Quietly the best money I spend on the house. The garage no longer smells in July.", n: "Anne L.", w: "Eastover" },
            { q: "The photo arrives before I'm home. I have stopped checking. It is always done.", n: "J. Patel", w: "SouthPark" },
          ].map((t, i) => (
            <figure key={i} className="border-t border-mist pt-8">
              <blockquote className="font-display font-light italic text-[clamp(20px,1.7vw,26px)] leading-[1.35] text-ink pretty">
                &ldquo;{t.q}&rdquo;
              </blockquote>
              <figcaption className="mt-6 text-[11px] tracking-[0.18em] uppercase text-pewter">
                {t.n} <span className="text-champagne">·</span> {t.w}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// PLANS TEASER
// =============================================================
function Plans() {
  const tiers = [
    { key: "one",      eyebrow: "On-Ramp",          name: "One-Time Service",  price: "{{PRICE}}", cadence: "single visit",      bullets: ["Two bins included", "200°F sanitization", "Photographed record"] },
    { key: "monthly",  eyebrow: "Most Attentive",   name: "Monthly",           price: "{{PRICE}}", cadence: "per month",         bullets: ["Auto-scheduled, day after pickup", "Two bins included", "Pause anytime"] },
    { key: "quarterly",eyebrow: "Most Popular",     name: "Quarterly",         price: "{{PRICE}}", cadence: "per quarter",       bullets: ["Four visits a year", "Charlotte's most-chosen cadence", "Priority routing", "Pause anytime"], popular: true },
    { key: "seasonal", eyebrow: "Lightest Touch",   name: "Seasonal",          price: "{{PRICE}}", cadence: "twice yearly",      bullets: ["Spring & autumn service", "Two bins included", "Add-ons à la carte"] },
  ];

  return (
    <section id="plans" className="iv py-28 md:py-40">
      <div className="shell">
        <div className="grid grid-cols-12 gap-x-8 items-end">
          <div className="col-span-12 md:col-span-7">
            <p className="eyebrow">Membership</p>
            <h2 className="display mt-6 text-[clamp(40px,5.4vw,84px)] balance">
              A standing engagement. <em>Quietly kept.</em>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9">
            <p className="text-[15px] leading-[1.6] text-graphite pretty">
              Begin with a single service. Move into a cadence when you are ready. Most members settle on Quarterly within the first season.
            </p>
          </div>
        </div>

        <div className="mt-16 md:mt-20 grid grid-cols-1 md:grid-cols-4 border-b border-mist">
          {tiers.map((t) => (
            <article key={t.key} className={`plan ${t.popular ? "plan--popular" : ""}`}>
              {t.popular ? <span className="plan-mark">Most Popular</span> : null}
              <p className="eyebrow eyebrow--mist">{t.eyebrow}</p>
              <h3 className="font-display font-light text-[clamp(26px,2.2vw,34px)] leading-[1.1] mt-6 text-ink">{t.name}</h3>
              <div className="mt-6">
                <div className="font-display font-light text-[clamp(34px,2.8vw,46px)] leading-none text-ink">{t.price}</div>
                <div className="mt-3 text-[10px] tracking-[0.18em] uppercase text-pewter">{t.cadence}</div>
              </div>
              <ul className="mt-8 space-y-3 text-[14px] text-graphite">
                {t.bullets.map((b) => (
                  <li key={b} className="flex gap-3">
                    <span className="mt-[10px] inline-block w-2 h-px bg-champagne flex-none" aria-hidden="true"></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <div className="mt-10 pt-6 border-t border-mist">
                <a className="link text-[12px] tracking-[0.18em] uppercase text-graphite" href={LINKS.plans}>Select</a>
              </div>
            </article>
          ))}
        </div>

        <div className="mt-10 flex justify-end">
          <a className="link-cham text-[13px]" href={LINKS.plans}>View all plans <Arrow /></a>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// ECO
// =============================================================
function Eco() {
  return (
    <section className="iv py-28 md:py-40 bg-paper">
      <div className="shell grid grid-cols-12 gap-x-8 gap-y-12">
        <div className="col-span-12 md:col-span-5">
          <p className="eyebrow">Responsible by Design</p>
          <h2 className="display mt-6 text-[clamp(36px,4.4vw,64px)] balance">
            Hot water. Plant-based sanitizer. <em>Nothing into the storm drain.</em>
          </h2>
        </div>

        <div className="col-span-12 md:col-span-6 md:col-start-7">
          <dl className="space-y-8 rule pt-2">
            {[
              { k: "Water reclamation", v: "Every drop is captured at the curb and removed. Our trucks operate on a closed loop." },
              { k: "Biodegradable sanitizer", v: "Hospital-grade and plant-derived. Safe for pets, lawns, and gardens." },
              { k: "Zero municipal runoff", v: "Charlotte-Mecklenburg storm drains carry rainwater to creeks. We respect that." },
            ].map((p) => (
              <div key={p.k} className="rule-bot pb-8 grid grid-cols-12 gap-x-6 items-baseline">
                <dt className="col-span-12 sm:col-span-4 eyebrow eyebrow--mist">{p.k}</dt>
                <dd className="col-span-12 sm:col-span-8 text-[15px] leading-[1.55] text-graphite pretty">{p.v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// SERVICE AREA CHECK
// =============================================================
function ServiceArea() {
  const [val, setVal] = useStateS("");
  const [submitted, setSubmitted] = useStateS(false);
  const neighborhoods = [
    "Myers Park", "Eastover", "SouthPark", "Dilworth", "Ballantyne",
    "Cotswold", "Waxhaw", "Weddington", "Marvin", "Fort Mill SC", "Tega Cay SC",
  ];

  const onSubmit = (e) => {
    e.preventDefault();
    if (val.trim().length >= 3) setSubmitted(true);
  };

  return (
    <section id="area" className="iv py-28 md:py-40">
      <div className="shell grid grid-cols-12 gap-x-8 gap-y-14">
        <div className="col-span-12 md:col-span-5">
          <p className="eyebrow">Do we serve you?</p>
          <h2 className="display mt-6 text-[clamp(36px,4.4vw,64px)] balance">
            Begin with your <em>address.</em>
          </h2>
          <p className="mt-6 text-[15px] leading-[1.6] text-graphite pretty max-w-[40ch]">
            We hold a route across south Charlotte and the Carolinas border. If your home is here, we are likely already on your street.
          </p>
        </div>

        <div className="col-span-12 md:col-span-6 md:col-start-7">
          {!submitted ? (
            <form className="field" onSubmit={onSubmit} aria-label="Check service area by address">
              <input
                type="text"
                value={val}
                onChange={(e) => { setVal(e.target.value); setSubmitted(false); }}
                placeholder="Street, city, or ZIP"
                aria-label="Address, city, or ZIP"
                autoComplete="postal-code"
              />
              <button type="submit">Check <span aria-hidden="true">→</span></button>
            </form>
          ) : (
            <div className="border-b border-champagne pb-5 flex items-start gap-4" role="status" aria-live="polite">
              <span className="mt-1 text-champagne"><Check size={18} /></span>
              <div>
                <p className="font-display font-light italic text-[clamp(22px,2vw,28px)] leading-[1.2] text-ink">
                  You&rsquo;re in our service area.
                </p>
                <p className="mt-2 text-[13px] text-graphite">
                  We'll route a confirmation to you within the day. <button type="button" className="link text-graphite ml-1" onClick={() => { setSubmitted(false); setVal(""); }}>Check another</button>.
                </p>
              </div>
            </div>
          )}

          <div className="mt-12">
            <p className="eyebrow eyebrow--mist">Neighborhoods we currently route</p>
            <ul className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-x-6">
              {neighborhoods.map((n) => (
                <li key={n}><span className="nbhd">{n}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// CLOSING CTA — full-bleed ink section
// =============================================================
function ClosingCta() {
  return (
    <section id="about" className="on-dark relative bg-ink text-paper">
      <div aria-hidden="true" className="absolute inset-0 grain opacity-[0.18] mix-blend-screen pointer-events-none"></div>
      <div className="shell py-28 md:py-40 relative">
        <div className="rule-cham pt-8">
          <p className="eyebrow" style={{ color: "#B79C7D" }}>The Sterling Standard</p>
        </div>

        <div className="mt-12 grid grid-cols-12 gap-x-8 gap-y-10">
          <h2 className="display text-[clamp(48px,7vw,128px)] col-span-12 lg:col-span-9 balance">
            Your bins, <em>beneath your notice.</em>
          </h2>

          <div className="col-span-12 lg:col-span-3 lg:col-start-10 flex flex-col items-start justify-end">
            <p className="text-[14px] leading-[1.55] text-mist pretty max-w-[28ch]">
              Begin with your address. We&rsquo;ll confirm your route and your first service window before the day is out.
            </p>
            <a className="link-cham mt-8 text-[15px]" href="#area">Check your address <Arrow /></a>
          </div>
        </div>

        <div className="mt-24 rule-cham pt-5 flex flex-wrap items-baseline justify-between gap-y-2 text-[11px] tracking-[0.18em] uppercase text-silver">
          <span>By appointment · Monday through Friday</span>
          <span><span className="text-champagne">704</span> 555 0188</span>
          <span>concierge<span className="text-champagne">@</span>sterlingbin.co</span>
        </div>
      </div>
    </section>
  );
}

// =============================================================
// FOOTER
// =============================================================
function Footer() {
  return (
    <footer className="relative bg-paper">
      <div aria-hidden="true" className="absolute inset-0 grain opacity-[0.5] pointer-events-none"></div>
      <div className="shell pt-20 pb-10 relative">
        <div className="rule pt-12 grid grid-cols-12 gap-x-8 gap-y-14">
          <div className="col-span-12 md:col-span-4">
            <a href={LINKS.home} className="flex items-baseline gap-3">
              <span className="wordmark text-[18px] text-champagne">Sterling</span>
              <span className="wordmark text-[11px] text-pewter">Bin Co.</span>
            </a>
            <p className="mt-6 text-[13px] text-pewter leading-[1.6] max-w-[34ch] pretty">
              Residential bin-cleaning by standing engagement. Charlotte, North Carolina.
            </p>
          </div>

          <div className="col-span-6 md:col-span-2">
            <p className="eyebrow eyebrow--mist">Service</p>
            <ul className="mt-5 space-y-3 text-[13px] text-graphite">
              <li><a className="link" href={LINKS.process}>How It Works</a></li>
              <li><a className="link" href={LINKS.plans}>Plans</a></li>
              <li><a className="link" href={LINKS.area}>Service Area</a></li>
              <li><a className="link" href={LINKS.faq}>FAQ</a></li>
            </ul>
          </div>

          <div className="col-span-6 md:col-span-2">
            <p className="eyebrow eyebrow--mist">House</p>
            <ul className="mt-5 space-y-3 text-[13px] text-graphite">
              <li><a className="link" href={LINKS.about}>About</a></li>
              <li><a className="link" href={LINKS.about}>Concierge</a></li>
              <li><a className="link" href={LINKS.about}>Press</a></li>
              <li><a className="link" href={LINKS.about}>Careers</a></li>
            </ul>
          </div>

          <div className="col-span-12 md:col-span-4">
            <p className="eyebrow eyebrow--mist">Contact</p>
            <address className="not-italic mt-5 space-y-2 text-[13px] text-graphite">
              <div><span className="text-champagne">704</span> 555 0188</div>
              <div>concierge<span className="text-champagne">@</span>sterlingbin.co</div>
              <div>Charlotte, NC</div>
            </address>
            <p className="mt-6 text-[11px] tracking-[0.18em] uppercase text-pewter">Monday — Friday · By appointment</p>
          </div>
        </div>

        <div className="rule mt-20 pt-5 flex flex-wrap items-baseline justify-between gap-y-2 text-[10px] tracking-[0.18em] uppercase text-silver">
          <span>© 2026 The Sterling Bin Company</span>
          <span>Licensed &amp; insured · NC</span>
          <span><a className="link" href={LINKS.about}>Privacy</a> · <a className="link" href={LINKS.about}>Terms</a></span>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Problem = Problem;
window.Process = Process;
window.Proof = Proof;
window.Plans = Plans;
window.Eco = Eco;
window.ServiceArea = ServiceArea;
window.ClosingCta = ClosingCta;
window.Footer = Footer;