/* CleanDeen — public site continued: Service area map, FAQ, Booking, Footer */
const { useState: usePubX, useEffect: usePubE, useRef: usePubR } = React;

function ServiceMap() {
  const box = usePubR(null);
  usePubE(() => {
    const el = box.current;
    if (!el || !window.L || el._cdMap) return;
    const { SERVICE_POINTS } = window.CD;
    const map = window.L.map(el, { scrollWheelZoom: false, zoomControl: true, attributionControl: true });
    el._cdMap = map;
    window.L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "© OpenStreetMap contributors",
      maxZoom: 18,
    }).addTo(map);
    window.L.circle([42.383, -71.098], {
      radius: 8600, color: "#3f6350", weight: 1.5, opacity: 0.7,
      fillColor: "#3f6350", fillOpacity: 0.09, interactive: false,
    }).addTo(map);
    SERVICE_POINTS.forEach(p => {
      const dir = p.lng < -71.15 ? "left" : p.lat > 42.41 ? "bottom" : "right";
      const offset = dir === "left" ? [-7, 0] : dir === "bottom" ? [0, 7] : [7, 0];
      window.L.circleMarker([p.lat, p.lng], {
        radius: p.core ? 7 : 5.5, color: "#ffffff", weight: 2,
        fillColor: p.core ? "#a2714c" : "#3f6350", fillOpacity: 1,
      }).addTo(map).bindTooltip(p.name, {
        permanent: true, direction: dir, offset: offset, className: "cd-tip",
      });
    });
    const bounds = window.L.latLngBounds(SERVICE_POINTS.map(p => [p.lat, p.lng]));
    const frame = () => map.fitBounds(bounds, { padding: [34, 52] });
    frame();
    const t = setTimeout(() => { map.invalidateSize(); frame(); }, 250);
    return () => { clearTimeout(t); map.remove(); if (box.current) box.current._cdMap = null; };
  }, []);
  return <div className="areas-map" ref={box} />;
}

function ServiceArea() {
  const { SERVICE_AREAS, GOOGLE_BOOKING_URL } = window.CD;
  return (
    <section id="areas" className="section section-alt">
      <div className="wrap areas-grid">
        <div>
          <span className="eyebrow">Where we work</span>
          <h2 className="sec-title" style={{ textAlign: "left", marginTop: 12 }}>Cambridge, Boston and the towns around them</h2>
          <p className="muted" style={{ fontSize: 16, marginTop: 14, maxWidth: 440 }}>
            We keep the radius tight on purpose. Working close to home means a technician can be on site the same morning you call, and that the same crew keeps coming back to your building.
          </p>
          <div className="area-chips">
            {SERVICE_AREAS.map(a => <span key={a} className="chip"><Ic.pin style={{ width: 13, height: 13 }} />{a}</span>)}
          </div>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 18 }}>
            Just outside the circle? <a href={GOOGLE_BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{ color: "var(--forest-700)", fontWeight: 600 }}>Ask anyway</a>. We take jobs a little further out when the schedule allows.
          </p>
        </div>
        <ServiceMap />
      </div>
    </section>
  );
}

function Faq() {
  const { FAQS } = window.CD;
  const [open, setOpen] = usePubX(0);
  return (
    <section id="faq" className="section">
      <div className="wrap faq-grid">
        <div className="faq-head">
          <span className="eyebrow">Questions</span>
          <h2 className="sec-title" style={{ textAlign: "left", marginTop: 12 }}>Good to know</h2>
          <p className="muted" style={{ fontSize: 15, marginTop: 12 }}>Anything we have missed gets covered on the consultation call.</p>
          <a href="#book" className="btn btn-soft" style={{ marginTop: 18 }}>Book a call<Ic.arrow style={{ width: 16, height: 16 }} /></a>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <Ic.chevDown style={{ width: 18, height: 18, transition: "transform .2s", transform: open === i ? "rotate(180deg)" : "none" }} />
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 220 : 0 }}>
                <p>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Booking() {
  const { GOOGLE_BOOKING_URL } = window.CD;
  return (
    <section id="book" className="section booking-sec">
      <div className="wrap booking-grid">
        <div>
          <span className="eyebrow" style={{ color: "var(--clay-300)" }}>How it starts</span>
          <h2 style={{ fontSize: 38, color: "var(--on-dark)", marginTop: 12 }}>Free in-person scope-out</h2>
          <p className="booking-lede">
            This is the part that matters. We come out, walk the space and take a proper look before quoting anything. The call beforehand is optional — book it if you would rather talk first, or skip straight to the visit.
          </p>
          <ol className="steps-two">
            <li>
              <span className="st-n">1</span>
              <div>
                <strong className="st-t">Brief call<span className="st-free">Optional &middot; Free</span></strong>
                <p className="st-d">Thirty minutes on the phone if you would rather talk before anyone comes out. We go over your building, the rooms you want serviced and what you are dealing with.</p>
              </div>
            </li>
            <li>
              <span className="st-n">2</span>
              <div>
                <strong className="st-t">In-person scope-out<span className="st-free">Free</span></strong>
                <p className="st-d">We walk the space, measure it properly, take baseline swabs and plate them in the lab. A written price follows within one business day.</p>
              </div>
            </li>
          </ol>
          <p className="booking-lede" style={{ marginTop: 26 }}>
            No deposit, no card, nothing owed until you decide to hire us. Extra calls before or after the scope-out are free too, for as long as you need to make up your mind.
          </p>
          <div className="contact-methods">
            <a href="tel:+16177022965" className="cm"><span className="cm-ic"><Ic.phone style={{ width: 18, height: 18 }} /></span><div><div className="cm-l">Call or text</div><div className="cm-v">(617) 702-2965</div></div></a>
            <a href="mailto:cleandeenco617@gmail.com" className="cm"><span className="cm-ic"><Ic.mail style={{ width: 18, height: 18 }} /></span><div><div className="cm-l">Email</div><div className="cm-v">cleandeenco617@gmail.com</div></div></a>
          </div>
        </div>

        <div className="card booking-card">
          <div className="bc-label">Appointment scheduling</div>
          <div className="bc-title">Step one: brief call</div>
          <div className="bc-meta">
            <span><Ic.cal style={{ width: 14, height: 14 }} />30 minutes</span>
            <span className="bc-free">Free</span>
          </div>
          <div className="bc-div" />
          <a className="btn btn-primary btn-block btn-lg" href={GOOGLE_BOOKING_URL} target="_blank" rel="noopener noreferrer">
            Choose a time on Google<Ic.arrow style={{ width: 17, height: 17 }} />
          </a>
          <p className="bc-note">
            Opens our Google appointment page in a new tab. You get a calendar invite straight away and a reminder the day before. Use it for the call or to line up the scope-out directly. Neither step costs anything.
          </p>
          <div className="bc-div" />
          <div className="bc-alt">
            Rather skip the calendar? Call or text <a href="tel:+16177022965">(617) 702-2965</a> and we will scope it right then.
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ onHome }) {
  const [privacy, setPrivacy] = usePubX(false);
  return (
    <>
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <Wordmark onDark onClick={onHome} />
          <p style={{ color: "var(--on-dark-soft)", fontSize: 14, marginTop: 14, maxWidth: 280 }}>
            Science-backed cleaning for businesses, facilities and homes across Cambridge and Boston, Massachusetts.
          </p>
        </div>
        <div className="footer-cols">
          <div><h4>Company</h4><a href="#difference">How it works</a><a href="#areas">Service area</a><a href="#faq">FAQ</a><a href="#book">Book a call</a></div>
          <div><h4>Get in touch</h4><a href="tel:+16177022965">(617) 702-2965</a><a href="mailto:cleandeenco617@gmail.com">cleandeenco617@gmail.com</a></div>
        </div>
      </div>
      <div className="wrap footer-bottom">
        <span>CleanDeen &middot; Cambridge, MA</span>
        <button type="button" className="footer-link-btn" onClick={() => setPrivacy(true)}>Privacy policy</button>
        <span>Serving Cambridge &amp; Boston, MA</span>
      </div>
    </footer>
    {privacy && <PrivacyPolicy onClose={() => setPrivacy(false)} />}
    </>
  );
}

function PrivacyPolicy({ onClose }) {
  usePubE(() => {
    const esc = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", esc);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", esc); document.body.style.overflow = prev; };
  }, []);
  return (
    <div className="pp-scrim" onClick={onClose}>
      <div className="pp-sheet" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Privacy policy">
        <div className="pp-head">
          <div>
            <div className="bc-label">CleanDeen</div>
            <h2 className="pp-title">Privacy policy</h2>
            <p className="pp-date">Last updated 27 August 2026</p>
          </div>
          <button type="button" className="pp-x" onClick={onClose} aria-label="Close"><Ic.x style={{ width: 18, height: 18 }} /></button>
        </div>
        <div className="pp-body">
          <p>This policy explains what information CleanDeen collects when you use this website, why we collect it, who else sees it, and the choices you have. It also describes the cookies and analytics this site uses.</p>

          <h3>What we collect</h3>
          <p><strong>When you book a consultation.</strong> Appointments are scheduled through Google Calendar Appointment Scheduling. When you book, Google passes us the name, email address, phone number and any notes you enter on the booking form. We use that information only to hold the call, confirm the on-site visit and follow up about your quote.</p>
          <p><strong>When you contact us.</strong> If you call, text or email us, we keep the message and your contact details so we can reply and keep a record of the job.</p>
          <p><strong>Automatically, from hosting.</strong> This site is hosted on Google Firebase Hosting. Like any web host, it records standard request logs, which include your IP address, browser and device type, the pages requested and the time of the request. Firebase also collects data needed to protect the service against abuse. We use these logs for security and to see which pages get used.</p>
          <p><strong>Maps.</strong> The service area map loads map tiles from OpenStreetMap. Loading those tiles sends your IP address and browser details to the OpenStreetMap Foundation, which is subject to their own privacy policy.</p>

          <h3>Cookies and Google Analytics</h3>
          <p>This site uses <strong>Google Analytics 4</strong>, a measurement service provided by Google, to understand how the site is used. Google Analytics sets cookies in your browser and reads them on later visits. The main ones are <code>_ga</code>, which stores a randomly generated identifier for your browser and lasts about two years, and <code>_ga_</code> followed by our measurement ID, which tracks the current session and lasts about two years as well. These are first-party cookies: they identify a browser, not a person by name.</p>
          <p>Through Google Analytics we and Google collect and process: the pages you view and when, how long you stay and how you move between pages, the site or search that referred you, your device type, operating system, browser and screen size, your general language and region, an approximate location derived from your IP address, and a randomly assigned identifier that lets Google recognise the same browser across visits. Google Analytics 4 does not store your full IP address; IP addresses are used to derive approximate location and are then discarded. We do not send names, email addresses, phone numbers or property addresses to Google Analytics.</p>
          <p>We use this only to see which pages people actually read, where visitors come from, and whether the booking button gets used, so we can improve the site. Google processes this data on our behalf as a service provider and may transfer and store it on servers in the United States. Google also uses the data to maintain and protect the Analytics service. How Google handles data from sites that use its services is described in its own privacy policy at <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">policies.google.com/privacy</a>, in <a href="https://policies.google.com/technologies/partner-sites" target="_blank" rel="noopener noreferrer">How Google uses information from sites or apps that use our services</a>, and in Google&rsquo;s <a href="https://support.google.com/analytics/answer/6004245" target="_blank" rel="noopener noreferrer">Safeguarding your data</a> documentation.</p>
          <p>We have not turned on Google Analytics Advertising Features, Google Signals, remarketing or demographic and interest reporting, so your visit here is not used to target ads to you. Analytics data is retained for fourteen months, after which Google deletes the event-level records.</p>
          <p>Beyond analytics, this site does not set any other cookies of its own and does not ask you to log in to anything. There are no third-party advertising pixels on this site.</p>

          <h3>How to opt out of analytics</h3>
          <p>You can block Google Analytics without losing any part of the site. Install Google&rsquo;s official <a href="https://tools.google.com/dlpage/gaoptout" target="_blank" rel="noopener noreferrer">Analytics Opt-out Browser Add-on</a>, which stops the Analytics script from sending data on any site you visit. You can also block or delete cookies in your browser settings, or use a private window or a tracker-blocking extension. To control what Google does with data across its own products, see <a href="https://myadcenter.google.com" target="_blank" rel="noopener noreferrer">My Ad Center</a> and <a href="https://myactivity.google.com" target="_blank" rel="noopener noreferrer">My Activity</a>. Booking, calling and emailing us all work normally with analytics blocked.</p>

          <h3>What we do not do</h3>
          <p>We do not sell, rent or trade your personal information, and we do not share it for cross-context behavioural advertising. We do not run advertising pixels on this site or use your visit to target ads to you. We do not combine analytics data with your booking details to build a marketing profile, and we do not add you to a mailing list unless you ask us to.</p>

          <h3>Who else sees your information</h3>
          <p>Only the people who need it: CleanDeen staff working on your job, and the service providers that run our tools. Today those are Google (Firebase Hosting, Google Analytics, Google Calendar and Gmail) and the OpenStreetMap Foundation for map tiles. Each of them processes data under its own terms. We may also disclose information if the law requires it, or to protect our rights or someone&rsquo;s safety.</p>

          <h3>How long we keep it</h3>
          <p>Booking and enquiry records are kept while we are in contact and for as long as we need them for tax, insurance and business records. Google Analytics records are retained for fourteen months. Hosting logs are kept on Google&rsquo;s standard retention schedule. When information is no longer needed, we delete it.</p>

          <h3>Security</h3>
          <p>The site is served over HTTPS. Booking details and the records of your job are held in Google&rsquo;s services with access limited to CleanDeen staff who need them. No system is perfectly secure, so we cannot promise absolute security, but we take reasonable steps to protect what we hold.</p>

          <h3>Your choices</h3>
          <p>You can ask us what personal information we hold about you, ask us to correct it, or ask us to delete it, and we will do so unless we are required to keep it. You can opt out of analytics using the methods above. You can cancel or reschedule an appointment from the confirmation email at any time. To make a request, email us at the address below and we will respond within a reasonable time.</p>

          <h3>Children</h3>
          <p>This site is meant for adults arranging cleaning services. We do not knowingly collect information from children under 13. If you believe a child has given us information, contact us and we will remove it.</p>

          <h3>Changes</h3>
          <p>If we change this policy we will update the date at the top of this page. Material changes will be noted on the site.</p>

          <h3>Contact</h3>
          <p>Questions about this policy, or a request about your information: <a href="mailto:cleandeenco617@gmail.com">cleandeenco617@gmail.com</a> or <a href="tel:+16177022965">(617) 702-2</a>. CleanDeen, Cambridge, Massachusetts.</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ServiceArea, ServiceMap, Faq, Booking, Footer, PrivacyPolicy });