/* ============================================================
   Services page sections
   ============================================================ */

const SERVICES = [
{
  num: "01", anchor: "residential", tag: "Residential Cleaning", icon: "home",
  title: "Residential Cleaning", photo: "photo-1567767292278-a4f21aa2d36e",
  intro: [
  "Your home is your sanctuary. Whether you live in an HDB flat in Punggol, a condominium in Orchard, or a landed property in the East Coast, our residential team makes it feel fresh and spotless — every single time.",
  "Singaporean households are busy. That's why we offer flexible schedules — one-time, weekly, fortnightly, or monthly — that fit around your life, not the other way around."],

  cta: "Request a Home Cleaning Quote",
  groups: [
  { h: "What's Included", items: ["Full dusting of all surfaces, shelves & fixtures", "Vacuuming & mopping of all floor types — tile, parquet, marble, vinyl", "Bathroom & toilet scrubbing, descaling & sanitising", "Kitchen cleaning — countertops, hob & sink", "Interior window wiping & glass polishing", "Bedroom tidying & bed linen changing (on request)", "Common area & corridor cleaning"] },
  { h: "Specialised Services", items: ["Deep cleaning — top-to-bottom intensive clean", "Move-in / move-out cleaning", "Post-renovation dust & residue removal", "Spring cleaning — seasonal deep clean", "Mattress & upholstery — sanitised & deodorised"] },
  { h: "Perfect For", items: ["HDB flat owners & tenants in all towns", "Condo residents — regular or one-time", "Move-in, move-out & tenancy handovers", "Busy families & working professionals"] }]

},
{
  num: "02", anchor: "commercial", tag: "Commercial Cleaning", icon: "building",
  title: "Commercial Cleaning", photo: "photo-1497366754035-f200968a6e72", alt: true,
  intro: [
  "A clean, well-maintained workplace is one of the strongest signals a business can send — to its employees, its clients, and its customers. We serve businesses of all sizes across Singapore with professional, scheduled cleaning that stays compliant with NEA regulations.",
  "From daily office maintenance to periodic deep cleans for large spaces, every job is scoped properly, executed efficiently, and inspected before our team leaves."],

  cta: "Get a Commercial Cleaning Quote",
  groups: [
  { h: "Spaces We Clean", items: ["Corporate offices & co-working spaces", "Retail shops & shopping mall units", "Warehouses & industrial facilities", "Schools, training & education centres", "Healthcare clinics & wellness centres", "Hotels, serviced apartments & venues", "Government & institutional premises"] },
  { h: "Our Solutions", items: ["Daily/weekly office cleaning — desks, pantries, washrooms", "Floor care — scrubbing, buffing, polishing, carpet extraction", "High-touch disinfection — NEA-compliant protocols", "Waste management & bin lining", "Glass & facade window cleaning", "Post-event cleaning", "Periodic deep cleaning for hygiene audits"] },
  { h: "Why Businesses Choose Us", items: ["Flexible 3, 6 or 12-month contracts", "Consistent assigned crews", "Fully NEA-compliant operations", "Fully insured — liability & workmen's comp", "Same-day responsiveness on issues"] }]

},
{
  num: "03", anchor: "fnb", tag: "F&B Cleaning", icon: "chef",
  title: "F&B Cleaning", photo: "photo-1556911220-bff31c812dba",
  intro: [
  "Singapore's F&B industry runs under strict hygiene regulations — and rightly so. Your kitchen, dining area, and prep zones need a level of cleanliness that goes well beyond the ordinary. That's where our specialist F&B team comes in.",
  "We work with fine dining, casual restaurants, cafés, food courts, and hawker-style outlets — protecting your customers, your staff, and your SFA licence."],

  cta: "Get an F&B Cleaning Quote",
  groups: [
  { h: "Our F&B Services Cover", items: ["Commercial kitchen deep cleaning — degreasing, descaling & sanitising", "Hood & exhaust vent cleaning — removes fire-hazard grease build-up", "Professional dishwashing for high-volume operations", "Floor cleaning & anti-slip treatment", "Walk-in chiller & freezer cleaning & sanitising", "Front-of-house — dining hall, bar, restrooms, entrance", "Waste disposal area cleaning & maintenance", "Pre-opening & post-closing daily contracts"] },
  { h: "Why F&B Operators Trust Us", items: ["Specialist knowledge of SFA & NEA food hygiene rules", "Experienced teams that work around your kitchen schedule", "Non-disruptive cleaning, adapted to your hours", "Proven track record with premium restaurant brands", "A dedicated account manager on every contract"] }]

}];


const ServiceHero = () =>
<header className="hero svc-hero" id="top">
    <div className="blob blob-red"></div>
    <div className="blob blob-ink"></div>
    <div className="wrap">
      <Reveal as="div" className="eyebrow center">Our services</Reveal>
      <Reveal as="h1" delay={1}>
        Professional Cleaning for <span className="hl">Every Space<span className="underline"></span></span>, Every Need
      </Reveal>
      <Reveal as="p" delay={2} className="hero-sub" style={{ margin: "26px auto 0" }}>
        From the comfort of your home to the bustle of your restaurant kitchen, Bright Solution delivers cleaning services built around what Singapore homes and businesses actually need — each one with the same commitment to quality and reliability.
      </Reveal>
      <div className="svc-index">
        {SERVICES.map((s, i) =>
      <Reveal key={s.anchor} delay={i + 1} as="a" href={`#${s.anchor}`} className="svc-index-card">
            <span className="ic"><Icon name={s.icon} /></span>
            <span className="tx"><span className="t">{s.title}</span><span className="s">Service {s.num}</span></span>
            <span className="ar"><Icon name="arrow" /></span>
          </Reveal>
      )}
      </div>
    </div>
  </header>;


const ServiceBlock = ({ data, onQuote }) => {
  const { num, anchor, tag, icon, title, photo, intro, cta, groups, alt } = data;
  return (
    <section className={`section svc-block ${alt ? "alt" : ""}`} id={anchor} style={{ ...(alt ? { background: "var(--cream)" } : null), padding: "80px 0px" }}>
      <div className="wrap">
        <div className="svc-block-head">
          <div className="svc-copy">
            <Reveal as="div" className="svc-num">{num}</Reveal>
            <Reveal as="div" delay={1} className="eyebrow"><Icon name={icon} style={{ width: 15, height: 15 }} /> {tag} · Singapore</Reveal>
            <Reveal as="h2" delay={1} className="section-title">{title}</Reveal>
            <Reveal delay={2}>
              {intro.map((p, i) => <p key={i} className="svc-intro">{p}</p>)}
            </Reveal>
            <Reveal delay={3} style={{ marginTop: 30 }}>
              <Magnetic><button className="btn btn-primary btn-lg" onClick={onQuote}>{cta} <Icon name="arrow" /></button></Magnetic>
            </Reveal>
          </div>
          <Reveal className="svc-vis">
            <PhotoSlot id={`svc-page-${anchor}`} photo={photo} w={1400} label={`Drop a photo — ${title}`} />
          </Reveal>
        </div>
        <div className="svc-lists">
          {groups.map((g, gi) =>
          <Reveal key={g.h} delay={Math.min(gi + 1, 4)} className="svc-list-group">
              <h4><span className="dot-red"></span>{g.h}</h4>
              <ul className="feat-list">
                {g.items.map((it, i) =>
              <li key={i}><span className="chk"><Icon name="check" /></span><span>{it}</span></li>
              )}
              </ul>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const ServicesCTA = ({ onQuote }) =>
<section className="section cta" id="contact" style={{ padding: "80px 0px" }}>
    <div className="blob blob-red" style={{ opacity: .4 }}></div>
    <div className="wrap cta-grid">
      <div>
        <Reveal as="div" className="eyebrow light">Still deciding?</Reveal>
        <Reveal as="h2" delay={1}>Not Sure Which Service You Need?</Reveal>
        <Reveal as="p" delay={2}>No problem. Tell us about your space and requirements — we'll recommend the right cleaning solution and give you a transparent, no-obligation quote. We serve all of Singapore, 7 days a week.</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>;


Object.assign(window, { SERVICES, ServiceHero, ServiceBlock, ServicesCTA });