/* ============================================================
   Bottom sections: WhyUs, Testimonials, Coverage, CTA, Footer
   ============================================================ */

const WhyUs = () => {
  const items = [
  { idx: "01", icon: "shield", title: "Dedicated Excellence", body: "We never cut corners. Every surface, every corner, every space is cleaned to the highest standard — because that's the commitment we make when you trust us with your property." },
  { idx: "02", icon: "clock", title: "Reliable & Punctual", body: "We show up when we say we will. Whether it's a weekly home clean or a daily commercial contract, you can depend on us to be there — on time, every time." },
  { idx: "03", icon: "handshake", title: "True Client Partnership", body: "We don't just clean and leave. We listen to your requirements, adapt to your schedule, and work closely with you so the results consistently meet your expectations." }];

  return (
    <section className="section" id="why" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head">
          <div className="eyebrow">Why choose us</div>
          <h2 className="section-title">Why Clients Keep<br />Coming Back to Us</h2>
        </Reveal>
        <div className="why-grid">
          {items.map((it, i) =>
          <Reveal key={it.idx} delay={i + 1} className="why-card">
              <div className="ic"><Icon name={it.icon} /></div>
              <div className="idx">{it.idx}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const Testimonials = () => {
  const cards = [
  { init: "—", body: "Add a real client testimonial here once collected — what they hired you for and the result.", nm: "Client Name", biz: "Business / Area · e.g. Tanjong Pagar" },
  { init: "—", body: "Recommended format: a short, specific 2–3 sentence review in the client's own words.", nm: "Client Name", biz: "Business / Area · e.g. Tampines" },
  { init: "—", body: "Genuine reviews build trust fast — especially from F&B and office clients across Singapore.", nm: "Client Name", biz: "Business / Area · e.g. Orchard" }];

  return (
    <section className="section" id="reviews" style={{ background: "var(--cream)", padding: "80px 0px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head center">
          <div className="eyebrow center">Social proof</div>
          <h2 className="section-title">What Our Clients Say</h2>
        </Reveal>
        <div className="test-grid">
          {cards.map((c, i) =>
          <Reveal key={i} delay={i + 1} className="test-card">
              <div className="quote">”</div>
              <Stars />
              <p className="body">{c.body}</p>
              <div className="who">
                <span className="av">{c.init}</span>
                <div><div className="nm">{c.nm}</div><div className="biz">{c.biz}</div></div>
              </div>
            </Reveal>
          )}
        </div>
        <Reveal as="p" className="test-note">Placeholder — swap in 3 real client testimonials (name, business or area, short review) once collected.</Reveal>
      </div>
    </section>);

};

// Five-point star path centered on (cx, cy), outer radius r
const starPath = (cx, cy, r) => {
  const pts = [];
  for (let i = 0; i < 10; i++) {
    const rad = i % 2 === 0 ? r : r * 0.42;
    const a = Math.PI / 5 * i - Math.PI / 2;
    pts.push(`${(cx + rad * Math.cos(a)).toFixed(1)},${(cy + rad * Math.sin(a)).toFixed(1)}`);
  }
  return `M${pts.join("L")}Z`;
};

const RegionStar = ({ name, sx, sy, tx, ty, anchor = "middle" }) =>
<g className="sg-region">
    <text x={tx} y={ty} textAnchor={anchor} className="sg-label" fontFamily="Poppins, sans-serif" fontSize="22" fontWeight="600">{name}</text>
    <circle className="sg-ping" cx={sx} cy={sy} r="11" fill="none" stroke="#0F0F10" strokeWidth="2" />
    <path d={starPath(sx, sy, 12)} className="sg-star" />
  </g>;


const SingaporeMap = () => {
  // star = marker on island; tx/ty = label position (above the star, like the reference)
  const regions = [
  { name: "North West", sx: 300, sy: 322, tx: 300, ty: 300 },
  { name: "South West", sx: 208, sy: 360, tx: 196, ty: 338, anchor: "middle" },
  { name: "Central", sx: 478, sy: 372, tx: 478, ty: 398, anchor: "middle" },
  { name: "North East", sx: 642, sy: 332, tx: 652, ty: 310 },
  { name: "South East", sx: 818, sy: 338, tx: 822, ty: 316 }];

  return (
    <svg className="sg-map" viewBox="0 0 1000 520" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Map of Singapore with the five service regions">
      <defs>
        <filter id="islandShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="9" stdDeviation="14" floodColor="#D31C28" floodOpacity="0.22" />
        </filter>
      </defs>
      {/* Singapore main island */}
      <path
        d="M70 360 L120 338 L150 352 L180 330 L205 344 L225 312 L258 300 L300 286 L322 304 L345 282 L382 292 L405 262 L430 250 L452 266 L470 246 L500 232 L548 224 L596 232 L628 214 L666 220 L700 206 L726 224 L748 206 L772 224 L800 236 L842 244 L880 232 L918 250 L948 278 L922 312 L884 332 L836 356 L778 376 L704 394 L626 408 L556 416 L500 414 L450 402 L404 412 L356 400 L306 392 L252 378 L200 368 L156 372 L120 358 L88 360 Z"
        fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" filter="url(#islandShadow)" />
      
      {/* offshore islands */}
      <path d="M735 188 Q770 172 815 182 Q828 192 800 200 Q760 206 738 198 Z" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      <path d="M860 196 Q885 180 918 192 Q930 204 905 212 Q875 214 860 204 Z" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      <path d="M150 392 Q200 386 244 398 Q252 408 228 414 Q180 418 150 406 Z" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      <path d="M438 426 Q472 420 514 430 Q522 438 500 442 Q462 444 440 436 Z" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      <circle cx="556" cy="456" r="9" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      <circle cx="590" cy="466" r="6" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      <circle cx="616" cy="456" r="5" fill="#EF3340" stroke="#D31C28" strokeWidth="1.5" />
      {/* center wordmark */}
      <text x="438" y="338" textAnchor="middle" className="sg-title" fontFamily="Poppins, sans-serif" fontSize="34" fontWeight="800" letterSpacing="1.5">SINGAPORE</text>
      {regions.map((r) => <RegionStar key={r.name} {...r} />)}
    </svg>);

};

const Coverage = () => {
  const regions = [
  { tag: "Central", zone: "Central Region", areas: "Toa Payoh, Novena, Kallang, Tanglin" },
  { tag: "N-East", zone: "North East Region", areas: "Hougang, Punggol, Sengkang, Serangoon" },
  { tag: "N-West", zone: "North West Region", areas: "Woodlands, Yishun, Sembawang, Choa Chu Kang" },
  { tag: "S-East", zone: "South East Region", areas: "Bedok, Marine Parade, Changi, Paya Lebar" },
  { tag: "S-West", zone: "South West Region", areas: "Jurong, Clementi, Bukit Batok, Queenstown" }];

  return (
    <section className="section cov" id="coverage" style={{ padding: "80px 0px 0px" }}>
      <div className="wrap cov-grid">
        <div>
          <Reveal as="div" className="eyebrow">Geo coverage</Reveal>
          <Reveal as="h2" delay={1} className="section-title">Serving All<br />of Singapore</Reveal>
          <Reveal as="p" delay={2} className="section-sub">North, South, East or West — our crews come to you. HDB estates, condos, landed homes, offices, industrial spaces and F&amp;B outlets across all 28 postal districts.</Reveal>
          <div className="cov-regions">
            {regions.map((r, i) =>
            <Reveal key={r.tag} delay={Math.min(i + 1, 4)} className="cov-row">
                <span className="tag">{r.tag}</span>
                <div><div className="zone">{r.zone}</div><div className="areas">{r.areas}</div></div>
              </Reveal>
            )}
          </div>
        </div>
        <Reveal className="cov-map">
          <SingaporeMap />
        </Reveal>
      </div>
    </section>);

};

const CTA = ({ onQuote }) =>
<section className="section cta" id="contact">
    <div className="blob blob-red" style={{ opacity: .4 }}></div>
    <div className="wrap cta-grid">
      <div>
        <Reveal as="div" className="eyebrow light">Get started</Reveal>
        <Reveal as="h2" delay={1}>Ready for a Cleaner Space?</Reveal>
        <Reveal as="p" delay={2}>Get in touch today for a no-obligation quote. Our friendly team will assess your needs and recommend the right solution — a one-time deep clean or an ongoing service contract.</Reveal>
        <Reveal delay={3} style={{ marginTop: 36 }}>
          <Magnetic><button className="btn btn-primary btn-lg" onClick={onQuote}>Get a Free Quote <Icon name="arrow" /></button></Magnetic>
        </Reveal>
      </div>
      <Reveal as="div" delay={2} className="cta-contacts">
        <a className="contact-row" href="tel:+6593574447">
          <span className="ic"><Icon name="phone" /></span>
          <div><div className="l">Call us</div><div className="v">+65 935 7444 7</div></div>
        </a>
        <a className="contact-row" href="mailto:contact@brightsolutionandservice.com">
          <span className="ic"><Icon name="mail" /></span>
          <div><div className="l">Email us</div><div className="v">contact@brightsolutionandservice.com</div></div>
        </a>
        <a className="contact-row" href="https://www.brightsolutionandservice.com" target="_blank" rel="noopener">
          <span className="ic"><Icon name="globe" /></span>
          <div><div className="l">Visit</div><div className="v">www.brightsolutionandservice.com</div></div>
        </a>
      </Reveal>
    </div>
  </section>;


const Footer = ({ onQuote }) =>
<footer className="footer">
    <div className="wrap">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="logo-txt">BRIGHT <span className="red">SOLUTION</span></div>
          <p>Bright Solution and Service Pte Ltd , professional residential, commercial and F&B cleaning across Singapore.</p>
        </div>
        <div className="footer-col">
          <h4>Services</h4>
          <a href="service.html#residential">Residential Cleaning</a>
          <a href="service.html#commercial">Commercial Cleaning</a>
          <a href="service.html#fnb">F&amp;B Cleaning</a>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <a href="about.html">About Us</a>
          <a href="index.html#why">Why Choose Us</a>
          <a href="index.html#coverage">Coverage</a>
          <a href="our-work.html">Our Work</a>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <a href="tel:+6593574447">+65 935 7444 7</a>
          <a href="mailto:contact@brightsolutionandservice.com">Email us</a>
          <a href="#" onClick={(e) => {e.preventDefault();onQuote();}}>Get a Free Quote</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} Bright Solution and Service Pte Ltd. All rights reserved.</span>
        <span>Singapore · All 28 postal districts</span>
      </div>
    </div>
  </footer>;


Object.assign(window, { WhyUs, Testimonials, Coverage, SingaporeMap, CTA, Footer });