/* Section components for Wash Bodega homepage */

const { useState, useEffect, useRef } = React;

/* ---------- copy: bilingual ---------- */
const COPY = {
  en: {
    h1Pre: "Your Community,",
    h1Highlight: "Fresh Laundry.",
    h1SingleLine: true,
    sub: "Self-service laundry and wash, dry & fold on W Bellfort — your neighborhood laundry, every day from 7 AM.",
    statusBadge: "OPEN NOW · YOUR NEIGHBORHOOD LAUNDRY",
    chips: ["Self-Service", "Wash, Dry & Fold", "Comforters", "Se Habla Español", "Open Late Fri & Sat"],
    sticker: "Your Neighborhood Laundry",
    primaryCta: "Get Directions",
    secondaryCta: "Call 713-899-9346",
  },
  es: {
    h1Pre: "Tu Comunidad,",
    h1Highlight: "Ropa Fresca.",
    sub: "Lavandería de autoservicio y lavado, secado y doblado en W Bellfort — tu lavandería del barrio, todos los días desde las 7 AM.",
    statusBadge: "ABIERTO · TU LAVANDERÍA DEL BARRIO",
    chips: ["Autoservicio", "Lavado, Secado y Doblado", "Edredones", "Se Habla Español", "Abierto Tarde Vie y Sáb"],
    sticker: "Tu Lavandería del Barrio",
    primaryCta: "Cómo Llegar",
    secondaryCta: "Llamar 713-899-9346",
  },
};

/* ---------- Reveal wrapper ---------- */
const Reveal = ({ children, delay = 0, as: Tag = "div", className = "", ...rest }) => {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Failsafe 1: if element is already on screen (or above), reveal immediately.
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight - 40) {
      const t = setTimeout(() => setVisible(true), delay);
      return () => clearTimeout(t);
    }
    let revealed = false;
    const reveal = () => {
      if (revealed) return;
      revealed = true;
      setTimeout(() => setVisible(true), delay);
    };
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            reveal();
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    // Failsafe 2: if IO never fires (sandboxed iframe quirks), reveal after 1.2s.
    const failsafe = setTimeout(reveal, 1200);
    return () => {
      io.disconnect();
      clearTimeout(failsafe);
    };
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${visible ? "in" : ""} ${className}`} {...rest}>
      {children}
    </Tag>
  );
};

/* ---------- Bubble pop on click ---------- */
const useBubblePop = () => {
  return (e) => {
    const btn = e.currentTarget;
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const bubble = document.createElement("span");
    bubble.className = "cta-bubble";
    bubble.style.left = `${x - 6}px`;
    bubble.style.top = `${rect.height - 6}px`;
    btn.appendChild(bubble);
    setTimeout(() => bubble.remove(), 700);
  };
};

/* ===================== HEADER ===================== */
const Header = ({ lang, setLang }) => {
  const pop = useBubblePop();
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#top" className="brand-mark" aria-label="Wash Bodega home">
          <span className="brand-wordmark">Wash Bodega</span>
        </a>
        <nav className="nav" aria-label="Primary">
          <a href="#services">Services</a>
          <a href="#why">Why Us</a>
          <a href="#hours">Hours</a>
          <a href="#location">Location</a>
          <a href="#lavanderia">Lavandería</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="header-right">
          <span className="status-pill" aria-live="polite">
            <span className="status-dot"></span>
            Open · Until 11 PM
          </span>
          <a href="tel:7138999346" className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 14 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
            </svg>
            Call
          </a>
          <a href="#location" className="btn btn-primary" onClick={pop} style={{ padding: "10px 18px", fontSize: 14 }}>
            Get Directions
          </a>
          <div className="lang-toggle" role="tablist" aria-label="Language">
            <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
          </div>
        </div>
      </div>
    </header>
  );
};

/* ===================== HERO ===================== */
const Hero = ({ lang }) => {
  const c = COPY[lang];
  const pop = useBubblePop();
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <Reveal>
            <h1 className={`h-display h1 ${lang === "es" ? "lang-es" : ""}`}>
              {c.h1Pre}{" "}
              <span className="ribbon-underline">
                <StaggerText text={c.h1Highlight} staggerMs={25} />
                <GoldRibbonUnderline />
              </span>
            </h1>
            <p className={`hero-sub ${lang === "es" ? "lang-es" : ""}`}>{c.sub}</p>
            <div className="hero-cta-row">
              <a href="#location" className="btn btn-primary btn-lg" onClick={pop}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
                {c.primaryCta}
              </a>
              <a href="tel:7138999346" className="btn btn-ghost btn-lg">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
                </svg>
                {c.secondaryCta}
              </a>
            </div>
            <div className="trust-chips">
              {c.chips.map((chip, i) => (
                <span key={i} className={`trust-chip ${lang === "es" ? "lang-es" : ""}`}>
                  <span className="trust-chip-dot"></span>
                  {chip}
                </span>
              ))}
            </div>
          </Reveal>
          <Reveal delay={150}>
            <Tilt3D intensity={8} style={{ position: 'relative' }}>
              <LiquidBlob color="rgba(229,35,43,0.08)" size={600} style={{ top: '-10%', left: '-20%' }} />
              <LiquidBlob color="rgba(255,198,39,0.1)" size={400} style={{ bottom: '-10%', right: '-15%' }} />
              <CurlingLiquidRibbon
                className="hero-liquid-ribbon"
                style={{ left: "-10%", top: "-8%", width: "120%", height: "120%", opacity: 0.5, zIndex: 0 }}
              />
              <Parallax speed={-0.08}>
                <BubbleField />
              </Parallax>
              <Magnetic strength={0.15}>
                <WasherPortal />
              </Magnetic>
              <FloatingSparkles count={8} />
              <div className="sticker-banner" style={{ right: "-2%", bottom: "8%" }}>
                {c.sticker}
              </div>
            </Tilt3D>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* ===================== SERVICES ===================== */
const Services = () => (
  <section id="services">
    <RibbonDivider />
    <div className="container" style={{ marginTop: 32 }}>
      <Reveal>
        <div className="section-header center">
          <span className="eyebrow">Our Services</span>
          <h2 className="h-display h2" style={{ marginTop: 12 }}>Two ways to do laundry. Both feel like home.</h2>
        </div>
      </Reveal>
      <div className="services-grid">
        <Reveal delay={80}>
          <Tilt3D intensity={6}>
          <article className="service-card">
            <div className="visual">
              <div className="fabric-stack">
                <div className="fold f1"></div>
                <div className="fold f2"></div>
                <div className="fold f3"></div>
                <div className="fold f4"></div>
                <div className="fold f5"></div>
              </div>
              <FloatingSparkles count={4} />
            </div>
            <span className="eyebrow" style={{ color: "var(--bodega-red)" }}>Drop-Off Service</span>
            <h3 className="h-display h3" style={{ marginTop: 8 }}>Wash, Dry &amp; Fold</h3>
            <p>Bring it in by the bag. We wash, dry, and fold so you can get back to your day. Same-day on most loads.</p>
          </article>
          </Tilt3D>
        </Reveal>
        <Reveal delay={160}>
          <Tilt3D intensity={6}>
          <article className="service-card">
            <div className="visual">
              <div className="triple-washers">
                <div className="mini-washer left"><div className="mini-washer-portal"></div></div>
                <div className="mini-washer center"><div className="mini-washer-portal"></div></div>
                <div className="mini-washer right"><div className="mini-washer-portal"></div></div>
              </div>
              <FloatingSparkles count={4} />
            </div>
            <span className="eyebrow" style={{ color: "var(--bodega-red)" }}>Self-Service</span>
            <h3 className="h-display h3" style={{ marginTop: 8 }}>Self-Service Laundry</h3>
            <p>Bright, friendly, easy. Plug in, press start, and post up. Open every day from 7 AM, late on weekends.</p>
          </article>
          </Tilt3D>
        </Reveal>
      </div>
    </div>
    <div style={{ marginTop: 64 }}>
      <RibbonDivider flip />
    </div>
  </section>
);

/* ===================== WHY ===================== */
const Why = () => {
  const items = [
    { Icon: IconCalendar, title: "Open Every Day", body: "Seven days a week, 7 AM start." },
    { Icon: IconChat, title: "Bilingual Staff", body: "Se habla español, siempre." },
    { Icon: IconHeart, title: "Family Friendly", body: "Bring the kids, bring the basket." },
    { Icon: IconBundle, title: "Bulky Loads Welcome", body: "Comforters, blankets, and beyond." },
  ];
  return (
    <section id="why" style={{ paddingTop: 32 }}>
      <div className="container">
        <Reveal>
          <div className="section-header center">
            <span className="eyebrow">Why Wash Bodega</span>
            <h2 className="h-display h2" style={{ marginTop: 12 }}>Built for the way the neighborhood actually does laundry.</h2>
          </div>
        </Reveal>
        <div className="coins-grid">
          {items.map(({ Icon, title, body }, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="coin-card">
                <Magnetic strength={0.4}>
                <div className="coin">
                  <div className="coin-icon"><Icon /></div>
                </div>
                </Magnetic>
                <h4>{title}</h4>
                <p>{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===================== DROP-OFF (60/40) ===================== */
const DropOff = () => (
  <section id="dropoff">
    <div className="container">
      <div className="split-60-40">
        <Reveal>
          <div>
            <span className="eyebrow">Drop-Off · Wash, Dry &amp; Fold</span>
            <h2 className="h-display h2" style={{ marginTop: 12, marginBottom: 16 }}>
              Drop your bag. Live your life. Pick up folded.
            </h2>
            <p style={{ fontSize: 18, color: "var(--brown-soft)", maxWidth: 540 }}>
              Trusted hands, sorted by color, washed in the right cycle, dried gently, folded crisp. Bag in, bag out — that's the whole vibe.
            </p>
            <div className="steps-ribbon">
              <div className="step-node">
                <div className="step-bubble">1</div>
                <div className="step-label">Drop</div>
              </div>
              <div className="step-connect"></div>
              <div className="step-node">
                <div className="step-bubble">2</div>
                <div className="step-label">Wash</div>
              </div>
              <div className="step-connect"></div>
              <div className="step-node">
                <div className="step-bubble">3</div>
                <div className="step-label">Pickup</div>
              </div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div className="towel-stack">
            <div className="towel t1"></div>
            <div className="towel t2"></div>
            <div className="towel t3"></div>
            <div className="towel t4"></div>
            <div className="towel t5"></div>
            <div className="towel-tie"></div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ===================== SELF-SERVICE (mirrored) ===================== */
const SelfService = () => (
  <section id="self-service" style={{ background: "var(--crema-warm)" }}>
    <div className="container">
      <div className="split-60-40 mirror">
        <Reveal delay={120}>
          <div className="triple-washers" style={{ minHeight: 320 }}>
            <div className="mini-washer left" style={{ width: 130, height: 130 }}><div className="mini-washer-portal"></div></div>
            <div className="mini-washer center" style={{ width: 180, height: 180 }}><div className="mini-washer-portal"></div></div>
            <div className="mini-washer right" style={{ width: 130, height: 130 }}><div className="mini-washer-portal"></div></div>
          </div>
        </Reveal>
        <Reveal>
          <div>
            <span className="eyebrow">Self-Service Laundry</span>
            <h2 className="h-display h2" style={{ marginTop: 12, marginBottom: 16 }}>
              A laundromat that feels like a third place.
            </h2>
            <p style={{ fontSize: 18, color: "var(--brown-soft)", maxWidth: 520 }}>
              Bright lights, warm crema walls, fast machines, and bilingual help when you need it. Bring a book — or knock out three loads at once.
            </p>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ===================== NEIGHBORHOOD ===================== */
const Neighborhood = () => (
  <section className="neighborhood">
    <div className="container">
      <Reveal>
        <p className="pull-quote">
          Made for renters, roommates, families,{" "}
          <span className="ribbon-underline" style={{ position: "relative", display: "inline-block" }}>
            and everyone in between.
            <GoldRibbonUnderline />
          </span>
        </p>
      </Reveal>
      <Reveal delay={180}>
        <div className="neighborhood-stickers">
          <div className="sticker red">
            <StickerStar size={16} className="" />
            Familias bienvenidas
          </div>
          <div className="sticker">Roommate-friendly</div>
          <div className="sticker gold">After-work hours</div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ===================== COMFORTERS ===================== */
const Comforters = () => (
  <section id="comforters">
    <div className="container">
      <Reveal>
        <div className="comforter-card">
          <div>
            <span className="eyebrow">Comforters &amp; Bulky Loads</span>
            <h2 className="h-display h2" style={{ marginTop: 12, marginBottom: 16 }}>
              The big stuff is our love language.
            </h2>
            <p style={{ fontSize: 18, color: "var(--brown-soft)", maxWidth: 480 }}>
              King-size comforters, blankets, and bulky loads — handled with care on machines built for the job. No more cramming the home washer.
            </p>
          </div>
          <div className="comforter-cube">
            <div className="cube-top"></div>
            <div className="cube-front cube-face"></div>
            <div className="comforter-ribbon-h"></div>
            <div className="comforter-ribbon"></div>
            <svg className="comforter-bow" viewBox="0 0 100 60" aria-hidden="true">
              <defs>
                <linearGradient id="bowGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#FFD64D" />
                  <stop offset="100%" stopColor="#E0A911" />
                </linearGradient>
              </defs>
              <path d="M50 30 C30 10 10 20 14 36 C18 48 38 42 50 30 C62 18 82 12 86 24 C90 40 70 50 50 30 Z"
                fill="url(#bowGrad)" stroke="#5A2A12" strokeWidth="2" />
              <circle cx="50" cy="30" r="8" fill="#FFC627" stroke="#5A2A12" strokeWidth="2" />
            </svg>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

/* ===================== HOURS ===================== */
const Hours = () => {
  const todayIdx = new Date().getDay(); // 0 = Sun
  const rows = [
    { day: "Sunday", time: "7:00 AM – 11:00 PM" },
    { day: "Monday", time: "7:00 AM – 11:00 PM" },
    { day: "Tuesday", time: "7:00 AM – 11:00 PM" },
    { day: "Wednesday", time: "7:00 AM – 11:00 PM" },
    { day: "Thursday", time: "7:00 AM – 11:00 PM" },
    { day: "Friday", time: "7:00 AM – 1:00 AM", late: true },
    { day: "Saturday", time: "7:00 AM – 1:00 AM", late: true },
  ];
  // reorder so it's Sun..Sat with index 0=Sun
  const order = [0, 1, 2, 3, 4, 5, 6];
  return (
    <section id="hours" style={{ background: "var(--crema-warm)" }}>
      <div className="container">
        <Reveal>
          <div className="section-header center">
            <span className="eyebrow">Hours</span>
            <h2 className="h-display h2" style={{ marginTop: 12 }}>Open early. Late on weekends.</h2>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="hours-list">
            {order.map((i) => {
              const r = rows[i];
              const isToday = i === todayIdx;
              return (
                <div key={i} className={`hours-row ${isToday ? "today" : ""}`}>
                  <span className="hours-day">
                    <span className="hours-day-text">
                      {r.day}
                      {isToday && <HoursRibbonUnderline />}
                    </span>
                  </span>
                  <span className="hours-time">{r.time}</span>
                  {r.late && <span className="late-sticker">Open Late · 1 AM</span>}
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ===================== LOCATION ===================== */
const Location = () => {
  const pop = useBubblePop();
  return (
    <section id="location">
      <div className="container">
        <Reveal>
          <div className="section-header">
            <span className="eyebrow">Location</span>
            <h2 className="h-display h2" style={{ marginTop: 12 }}>Find us on W Bellfort.</h2>
          </div>
        </Reveal>
        <div className="location-grid">
          <Reveal delay={80}>
            <div className="map-tile">
              <div className="map-block" style={{ left: "8%", top: "8%", width: "18%", height: "30%" }}></div>
              <div className="map-block" style={{ left: "34%", top: "8%", width: "32%", height: "32%" }}></div>
              <div className="map-block" style={{ right: "6%", top: "10%", width: "20%", height: "26%" }}></div>
              <div className="map-block" style={{ left: "10%", bottom: "8%", width: "16%", height: "24%" }}></div>
              <div className="map-block" style={{ left: "38%", bottom: "12%", width: "26%", height: "20%" }}></div>
              <div className="map-block" style={{ right: "10%", bottom: "10%", width: "16%", height: "24%" }}></div>

              <div className="map-road h-major"></div>
              <div className="map-road v-minor"></div>
              <div className="map-road v-minor2"></div>
              <div className="map-road h-minor"></div>
              <div className="map-road h-minor2"></div>

              <div className="map-label" style={{ left: "50%", top: "calc(50% + 18px)", transform: "translateX(-50%)" }}>W Bellfort Ave</div>

              <div className="location-pin">
                <div className="pin-halo"></div>
                <div className="pin-body">
                  <div className="pin-teardrop">
                    <div className="pin-dot"></div>
                  </div>
                  <div className="pin-base-ring"></div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={160}>
            <div className="address-card">
              <span className="eyebrow">Visit</span>
              <h3 className="h-display h3" style={{ marginTop: 8, marginBottom: 16 }}>Wash Bodega</h3>
              <p className="address-line"><strong>6604 W Bellfort Ave</strong></p>
              <p className="address-line">Houston, TX 77035</p>
              <p className="address-line muted" style={{ marginTop: 10 }}>713-899-9346</p>
              <p className="address-line muted">Open 7 AM every day · Late Fri &amp; Sat</p>
              <div className="btn-row">
                <a
                  href="https://maps.google.com/?q=6604+W+Bellfort+Ave+Houston+TX+77035"
                  target="_blank" rel="noopener noreferrer"
                  className="btn btn-primary btn-lg" onClick={pop}
                >
                  Get Directions
                </a>
                <a href="tel:7138999346" className="btn btn-ghost btn-lg">
                  Call 713-899-9346
                </a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

/* ===================== LAVANDERÍA ===================== */
const Lavanderia = () => (
  <section id="lavanderia" className="lavanderia">
    <div className="container">
      <div className="lavanderia-grid">
        <Reveal>
          <div>
            <span className="eyebrow lang-es">PARA EL VECINDARIO</span>
            <h2 className="h-display h2 lang-es" style={{ marginTop: 12, marginBottom: 16 }}>
              Lavandería cerca de{" "}
              <span className="ribbon-underline" style={{ position: "relative", display: "inline-block" }}>
                W Bellfort
                <GoldRibbonUnderline />
              </span>
            </h2>
            <p className="lang-es" style={{ fontSize: 18, color: "var(--brown-soft)", maxWidth: 540 }}>
              Lavado, secado y doblado. Autoservicio. Edredones y cargas grandes. Familias bienvenidas.
            </p>
            <ul className="lang-es">
              <li>Abierto todos los días desde las 7 AM</li>
              <li>Personal bilingüe siempre disponible</li>
              <li>Viernes y sábados hasta la 1 AM</li>
              <li>Máquinas grandes para edredones y cobijas</li>
            </ul>
          </div>
        </Reveal>
        <Reveal delay={160}>
          <div className="es-sticker">
            <StickerStar className="tl" size={24} />
            Se habla<br />español
            <StickerStar className="br" size={24} />
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

/* ===================== FAQ ===================== */
const FAQ = () => {
  const [open, setOpen] = useState(0);
  const items = [
    {
      q: "What time do you open and close?",
      a: "We're open every day from 7:00 AM. Sunday through Thursday we close at 11:00 PM. Friday and Saturday we stay open until 1:00 AM.",
    },
    {
      q: "Do you offer wash, dry & fold?",
      a: "Yes — drop your laundry off and we'll wash, dry, and fold it for you. Bring it in any day during open hours.",
    },
    {
      q: "Can you wash king-size comforters?",
      a: "Absolutely. We have larger machines built specifically for comforters, blankets, and other bulky loads.",
    },
    {
      q: "¿Hablan español?",
      a: "Sí — siempre tenemos personal que habla español. Pase cuando guste.",
    },
    {
      q: "Where exactly are you located?",
      a: "6604 W Bellfort Ave, Houston, TX 77035. Tap Get Directions for door-to-door routing.",
    },
    {
      q: "Is the laundromat self-service?",
      a: "Yes — you can do your own laundry any time we're open, or drop it off for our wash, dry & fold service.",
    },
    {
      q: "Can I call ahead with questions?",
      a: "Of course. Call 713-899-9346 any day during open hours.",
    },
    {
      q: "Are kids welcome?",
      a: "Wash Bodega is family friendly. Bring the whole crew.",
    },
  ];
  return (
    <section id="faq">
      <div className="container">
        <Reveal>
          <div className="section-header center">
            <span className="eyebrow">FAQ</span>
            <h2 className="h-display h2" style={{ marginTop: 12 }}>Quick answers from the front counter.</h2>
          </div>
        </Reveal>
        <div className="faq-list">
          {items.map((item, i) => (
            <Reveal key={i} delay={i * 40}>
              <div className={`faq-item ${open === i ? "open" : ""}`}>
                <span className="ribbon-edge"></span>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{item.q}</span>
                  <span className="q-bubble">+</span>
                </button>
                <div className="faq-a">
                  <p className="faq-a-text">{item.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===================== FINAL CTA ===================== */
const FinalCta = () => {
  const pop = useBubblePop();
  return (
    <section className="final-cta">
      <div className="final-cta-bg-portal">
        <Parallax speed={0.2}>
          <WasherPortal />
        </Parallax>
      </div>
      <FloatingSparkles count={10} />
      <div className="container">
        <Reveal>
          <span className="eyebrow" style={{ position: "relative", zIndex: 2 }}>Come Through</span>
          <h2 className="h-display h2" style={{ marginTop: 12 }}>
            Come see us on{" "}
            <span className="ribbon-underline" style={{ position: "relative", display: "inline-block" }}>
              Bellfort.
              <GoldRibbonUnderline />
            </span>
          </h2>
          <p>Open every day from 7 AM.</p>
          <div className="btn-row">
            <a
              href="https://maps.google.com/?q=6604+W+Bellfort+Ave+Houston+TX+77035"
              target="_blank" rel="noopener noreferrer"
              className="btn btn-primary btn-lg" onClick={pop}
            >
              Get Directions
            </a>
            <a href="tel:7138999346" className="btn btn-ghost btn-lg">
              Call 713-899-9346
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

/* ===================== FOOTER ===================== */
const Footer = () => (
  <footer className="footer">
    <div className="footer-ribbon"></div>
    <div className="container">
      <div className="footer-cols">
        <div>
          <div className="brand-mark" style={{ marginBottom: 16 }}>
            <img src="assets/logo.png" alt="Wash Bodega" className="footer-logo" style={{ height: 60, maxHeight: 60, width: 'auto' }} />
          </div>
          <p style={{ color: "rgba(255,247,236,0.7)", fontSize: 15, maxWidth: 320, lineHeight: 1.6 }}>
            Your neighborhood laundry on W Bellfort. Self-service, drop-off, and bulky loads — every day from 7 AM.
          </p>
        </div>
        <div>
          <h5>Visit</h5>
          <ul>
            <li>6604 W Bellfort Ave</li>
            <li>Houston, TX 77035</li>
            <li><a href="tel:7138999346">713-899-9346</a></li>
            <li><a href="https://maps.google.com/?q=6604+W+Bellfort+Ave+Houston+TX+77035" target="_blank" rel="noopener noreferrer">Get Directions</a></li>
          </ul>
        </div>
        <div>
          <h5>Services</h5>
          <ul>
            <li><a href="#self-service">Self-Service Laundry</a></li>
            <li><a href="#dropoff">Wash, Dry &amp; Fold</a></li>
            <li><a href="#comforters">Comforters &amp; Bulky Loads</a></li>
            <li><a href="#lavanderia">Lavandería</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Wash Bodega</span>
        <span>Made with neighborhood love in Houston.</span>
      </div>
    </div>
  </footer>
);

/* ===================== STICKY MOBILE BAR ===================== */
const StickyBar = () => {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      setShow(window.scrollY > 200);
      document.body.classList.toggle("has-sticky-bar", window.scrollY > 200);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`sticky-bar ${show ? "show" : ""}`}>
      <div className="sticky-bar-grid">
        <a href="tel:7138999346" className="sticky-btn call">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
          </svg>
          Call
        </a>
        <a
          href="https://maps.google.com/?q=6604+W+Bellfort+Ave+Houston+TX+77035"
          target="_blank" rel="noopener noreferrer"
          className="sticky-btn directions"
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
            <circle cx="12" cy="10" r="3" />
          </svg>
          Directions
        </a>
        <a href="#hours" className="sticky-btn hours">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
          </svg>
          Hours
        </a>
      </div>
    </div>
  );
};

Object.assign(window, {
  Header, Hero, Services, Why, DropOff, SelfService,
  Neighborhood, Comforters, Hours, Location, Lavanderia,
  FAQ, FinalCta, Footer, StickyBar,
});