/* ============================================================
   Our Work page sections
   ============================================================ */

const WorkHero = () =>
<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 work</Reveal>
      <Reveal as="h1" delay={1}>Our Work <span className="hl">Speaks for Itself<span className="underline"></span></span></Reveal>
      <Reveal as="p" delay={2} className="hero-sub" style={{ margin: "26px auto 0" }}>
        Over two years of professional cleaning in Singapore has taken us into some extraordinary spaces — immaculate fine dining restaurants, high-traffic offices, busy HDB homes, and pristine condominiums. Here's a look at who we work with, and what we do for them.
      </Reveal>
      <div className="work-stats">
        <Reveal delay={1} className="work-stat"><div className="n"><Counter to={2} />+</div><div className="l">Years in Singapore</div></Reveal>
        <Reveal delay={2} className="work-stat"><div className="n"><Counter to={15} />+</div><div className="l">F&amp;B partners</div></Reveal>
        <Reveal delay={3} className="work-stat"><div className="n"><Counter to={3} /></div><div className="l">Service categories</div></Reveal>
        <Reveal delay={4} className="work-stat"><div className="n"><Counter to={100} suffix="%" /></div><div className="l">Commitment, every visit</div></Reveal>
      </div>
    </div>
  </header>;


const PrestigiousClients = () => {
  const featured = [
  { name: "Sona's Grill", desc: "Indian Restaurant & Bar" },
  { name: "Bottle Tree Café Restaurant", desc: "Café & Dining" },
  { name: "Lakeside Eatery", desc: "Established 1989" },
  { name: "Mamma Mia! Trattoria e Caffè", desc: "Italian Trattoria & Caffè" }];

  const groups = [
  { label: "Fine Dining", names: ["Punjab Grill", "Neon Pigeon", "Wakanui", "Alat", "Long Play"] },
  { label: "Casual Dining", names: ["Pasta Bar", "Bonding Kitchen", "Chancita", "The Spot", "Perch"] },
  { label: "Local Favourites", names: ["Ponggol Nasi Lemak", "Tinto", "Mischief", "Rookery", "Ola", "Tonite"] }];

  return (
    <section className="section" id="clients" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head">
          <div className="eyebrow">Our prestigious clients</div>
          <h2 className="section-title">Trusted by Singapore's<br />Finest Establishments</h2>
          <p className="section-sub">Our client relationships are built on consistent results, clear communication, and a genuine commitment to quality — from beloved local eateries to acclaimed fine dining rooms.</p>
        </Reveal>
        <div className="client-cards">
          {featured.map((c, i) =>
          <Reveal key={c.name} delay={Math.min(i + 1, 4)} className="client-card">
              <span className="client-ic"><Icon name="chef" /></span>
              <div className="client-meta">
                <div className="client-name">{c.name}</div>
                <div className="client-desc">{c.desc}</div>
              </div>
            </Reveal>
          )}
        </div>
        <div className="client-groups">
          {groups.map((g, i) =>
          <Reveal key={g.label} delay={i + 1} className="client-group">
              <div className="client-group-label"><span className="dot-red"></span>{g.label}</div>
              <div className="client-chips">
                {g.names.map((n) => <span key={n} className="name-chip">{n}</span>)}
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const WhatWeDeliver = () => {
  const items = [
  "A properly scoped, site-assessed cleaning plan — no generic packages",
  "A trained, professional crew that arrives on time and works with care",
  "NEA-compliant practices on every commercial or F&B job",
  "Post-clean verification before the team departs",
  "A dedicated contact for feedback, scheduling & follow-ups",
  "Consistent quality on every visit — not just the first clean"];

  return (
    <section className="section" id="deliver" style={{ background: "var(--cream)", padding: "80px 0px" }}>
      <div className="wrap cov-grid">
        <div>
          <Reveal as="div" className="eyebrow">What every client gets</Reveal>
          <Reveal as="h2" delay={1} className="section-title">One Standard.<br />Every Project.</Reveal>
          <Reveal as="p" delay={2} className="section-sub">Regardless of the size of the project or the type of space, every client who works with Bright Solution receives the same standard of service.</Reveal>
        </div>
        <div className="serve-list">
          {items.map((it, i) =>
          <Reveal key={i} delay={Math.min(i + 1, 4)} className="serve-item">
              <span className="serve-check"><Icon name="check" /></span>
              <span className="serve-txt">{it}</span>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const GALLERY = [
{ cat: "Residential", photo: "photo-1567767292278-a4f21aa2d36e", cap: "Condo living room — full home clean, Orchard" },
{ cat: "Commercial", photo: "photo-1497366754035-f200968a6e72", cap: "Corporate office — daily maintenance, CBD" },
{ cat: "F&B", photo: "photo-1556911220-bff31c812dba", cap: "Commercial kitchen — degreasing & sanitising" },
{ cat: "Residential", photo: "photo-1586023492125-27b2c045efd7", cap: "HDB interior — move-in deep clean, Punggol" },
{ cat: "Commercial", photo: "photo-1497366811353-6870744d04b2", cap: "Meeting space — periodic deep clean, Raffles Place" },
{ cat: "F&B", photo: "photo-1581349485608-9469926a8e5e", cap: "Stainless prep area — SFA-ready clean" },
{ cat: "Residential", photo: "photo-1484154218962-a197022b5858", cap: "Kitchen — residential deep clean, Tampines" },
{ cat: "Commercial", photo: "photo-1531973576160-7125cd663d86", cap: "Open-plan office — floor care & polishing" },
{ cat: "F&B", photo: "photo-1559329007-40df8a9345d8", cap: "Front-of-house — dining hall reset" },
{ cat: "Residential", photo: "photo-1522708323590-d24dbb6b0267", cap: "Landed home — weekly upkeep, East Coast" },
{ cat: "Commercial", photo: "photo-1604328698692-f76ea9498e76", cap: "Co-working floor — high-touch disinfection" },
{ cat: "F&B", photo: "photo-1466637574441-749b8f19452f", cap: "Café kitchen — hood & exhaust degrease" }];


const Gallery = () => {
  const cats = ["All", "Residential", "Commercial", "F&B"];
  const [active, setActive] = useState("All");
  return (
    <section className="section" id="gallery" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head center">
          <div className="eyebrow center">Project gallery</div>
          <h2 className="section-title">Spaces We've Transformed</h2>
          <p className="section-sub">A look across our three service categories. Drag your own before-and-after photos onto any frame to make this gallery yours.</p>
        </Reveal>
        <div className="gal-tabs">
          {cats.map((c) =>
          <button key={c} className={`gal-tab ${active === c ? "active" : ""}`} onClick={() => setActive(c)}>{c}</button>
          )}
        </div>
        <div className="gal-grid">
          {GALLERY.map((g, i) => {
            const show = active === "All" || active === g.cat;
            return (
              <div key={i} className={`gal-card ${show ? "" : "gal-hidden"}`}>
                <div className="gal-img">
                  <PhotoSlot id={`gallery-${i}`} photo={g.photo} w={900} label={`Drop a before/after photo — ${g.cap}`} />
                </div>
                <span className="gal-tag">{g.cat}</span>
                <div className="gal-cap">{g.cap}</div>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

const WorkTestimonials = () => {
  const cards = [
  { body: "The team has been cleaning our restaurant kitchen for months and the difference is visible every single day. Thorough, punctual, and they genuinely understand what a commercial kitchen needs. We won't go anywhere else.", nm: "Rajesh", biz: "Restaurant Owner · Tanjong Pagar" },
  { body: "We switched to Bright Solution for our office and the consistency is night and day. Same crew every week, always on time, and our staff have noticed how much fresher the space feels.", nm: "Michelle Tan", biz: "Operations Lead · Raffles Place" },
  { body: "I work long hours, and their fortnightly clean has genuinely given me my weekends back. My condo has never looked better and they're so easy to deal with over WhatsApp.", nm: "Daniel Lim", biz: "Homeowner · Orchard" },
  { body: "From hood degreasing to the dining area, they keep us SFA-ready without ever disrupting service. And our account manager actually picks up the phone.", nm: "Aisyah", biz: "Café Manager · Yishun" },
  { body: "Booked a move-out deep clean and got my full deposit back — spotless, even the spots I'd given up on. Quick booking and a transparent quote.", nm: "Priya", biz: "Tenant · Tampines" },
  { body: "Reliable, professional, and detail-obsessed. Our shopfront and back areas are always presentable for customers. Highly recommend for any retail business.", nm: "Kevin Ng", biz: "Retail Manager · Bugis" }];

  return (
    <section className="section" id="reviews" style={{ background: "var(--cream)", padding: "80px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head center">
          <div className="eyebrow center">Client testimonials</div>
          <h2 className="section-title">What Our Clients Say About Us</h2>
        </Reveal>
        <div className="test-grid">
          {cards.map((c, i) =>
          <Reveal key={i} delay={Math.min(i % 3 + 1, 3)} className="test-card">
              <div className="quote">”</div>
              <Stars />
              <p className="body">{c.body}</p>
              <div className="who">
                <span className="av">{c.nm.charAt(0)}</span>
                <div><div className="nm">{c.nm}</div><div className="biz">{c.biz}</div></div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const WorkCTA = ({ 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">Let's begin</Reveal>
        <Reveal as="h2" delay={1}>Want Results Like These?</Reveal>
        <Reveal as="p" delay={2}>Whether you need a one-time deep clean or a long-term cleaning partner for your home, office, or restaurant — we're ready to get started. Contact us today for a free, no-obligation assessment.</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>
      </Reveal>
    </div>
  </section>;


Object.assign(window, { WorkHero, PrestigiousClients, WhatWeDeliver, Gallery, WorkTestimonials, WorkCTA });