/* ============================================================
   About Us page sections
   ============================================================ */

const AboutHero = ({ onQuote }) =>
<header className="hero about-hero" id="top">
    <div className="blob blob-red"></div>
    <div className="blob blob-ink"></div>
    <div className="wrap hero-grid">
      <div className="hero-copy">
        <Reveal as="div" className="hero-badge">
          <span className="dot"></span> <b>About us</b> · <span className="pill">Bright Solution &amp; Service</span>
        </Reveal>
        <Reveal as="h1" delay={1}>
          We're More Than Just a Cleaning Company — We're Your <span className="hl">Partner in Clean<span className="underline"></span></span>
        </Reveal>
        <Reveal as="p" delay={2} className="hero-sub">
          Bright Solution and Service Pte Ltd was founded with one clear purpose: to raise the standard of professional cleaning services in Singapore. Every home, office, and food establishment deserves to be genuinely clean — not just surface-level tidy, but truly hygienic and well-maintained.
        </Reveal>
        <Reveal as="div" delay={3} className="hero-cta">
          <Magnetic><button className="btn btn-primary btn-lg" onClick={onQuote}>Work With Us <Icon name="arrow" /></button></Magnetic>
          <a href={HOME + "#services"} className="btn btn-ghost btn-lg">Our Services</a>
        </Reveal>
        <Reveal as="div" delay={4} className="hero-trust">
          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <Stars /><span className="txt"><b>Premium</b> restaurant partners</span>
          </div>
          <span className="hero-divider"></span>
          <span className="txt"><b>2+ years</b> trusted across Singapore</span>
        </Reveal>
      </div>
      <div className="hero-visual">
        <Parallax speed={0.06} style={{ position: "absolute", inset: 0 }}>
          <div className="hero-photo"><PhotoSlot id="about-hero" photo="photo-1581578731548-c64695cc6952" w={1400} label="Drop a photo — the team in action" /></div>
        </Parallax>
        <div className="float-card fc-2">
          <span className="ic red"><Icon name="heart" /></span>
          <div><div className="lbl">What drives us</div><div className="val">Partner in Clean</div></div>
        </div>
        <div className="float-card fc-3">
          <span className="ic dark"><Icon name="users" /></span>
          <div><div className="lbl">Trained &amp; vetted</div><div className="val">People First</div></div>
        </div>
      </div>
    </div>
  </header>;


const OurStory = () =>
<section className="section" id="story" style={{ padding: "80px 0px" }}>
    <div className="wrap about-grid">
      <Reveal className="about-vis">
        <PhotoSlot id="story-photo" photo="photo-1497366754035-f200968a6e72" w={1400} label="Drop a photo — our team / workplace" />
        <div className="about-stat">
          <div className="it"><div className="n"><span className="red">2+</span> yrs</div><div className="l">Building our reputation</div></div>
          <div className="vline"></div>
          <div className="it"><div className="n">15<span className="red">+</span></div><div className="l">F&amp;B partners &amp; counting</div></div>
          <div className="vline"></div>
          <div className="it"><div className="n">5</div><div className="l">Regions served</div></div>
        </div>
      </Reveal>
      <div className="about-body">
        <Reveal as="div" className="eyebrow">Our story</Reveal>
        <Reveal as="h2" delay={1} className="section-title">From a Small Team to<br />a Name You Can Trust</Reveal>
        <Reveal delay={2}>
          <p>We started small — a tight-knit team with high standards and a deep belief that <strong>professionalism in cleaning was long overdue</strong> in Singapore. In just over two years, we've built a reputation we're proud of: a company that shows up, does the job right, and genuinely cares about the spaces we clean and the people who use them.</p>
          <p>Today, we work with residential households, corporate offices, retail businesses, and F&amp;B outlets across Singapore — including <strong>premium fine dining restaurants, casual dining favourites, and well-loved local establishments</strong>. A testament to the trust the industry has placed in us.</p>
        </Reveal>
      </div>
    </div>
  </section>;


const VisionMission = () =>
<section className="section" id="vision" style={{ background: "var(--cream)", padding: "80px 0px" }}>
    <div className="wrap">
      <Reveal as="div" className="section-head center">
        <div className="eyebrow center">Our purpose</div>
        <h2 className="section-title">Our Vision &amp; Mission</h2>
      </Reveal>
      <div className="vm-grid">
        <Reveal delay={1} className="vm-card">
          <span className="vm-ic"><Icon name="target" /></span>
          <h3>Our Vision</h3>
          <p>We envision a Singapore where every space — from a family's HDB flat to a bustling restaurant kitchen — is safe, hygienic, and cared for. A cleaner Singapore is a healthier, happier Singapore, and we're committed to being part of that every single day.</p>
        </Reveal>
        <Reveal delay={2} className="vm-card dark">
          <span className="vm-ic"><Icon name="sparkle" /></span>
          <h3>Our Mission</h3>
          <p>To deliver cleaning solutions that genuinely exceed expectations. We go beyond the basics — using the right techniques, the right products, and the right people — to restore and maintain every space we work in to its very best condition.</p>
        </Reveal>
      </div>
    </div>
  </section>;


const Values = () => {
  const items = [
  { icon: "shield", title: "Integrity in Every Job", body: "We treat every space as if it were our own — doing the work properly even when no one is watching, and always being transparent with our clients about what needs to be done." },
  { icon: "users", title: "A Team You Can Trust", body: "Every member of our cleaning team is trained, vetted, and held to a consistent standard. We invest in our people because the quality of your experience starts with them." },
  { icon: "handshake", title: "Solutions That Fit Your Life", body: "No two clients are the same. We offer flexible scheduling, customisable service scopes, and genuine responsiveness — because your time and your space matter." }];

  return (
    <section className="section" id="values" style={{ padding: "80px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head">
          <div className="eyebrow">What drives us</div>
          <h2 className="section-title">The Values Behind<br />Every Clean</h2>
        </Reveal>
        <div className="why-grid">
          {items.map((it, i) =>
          <Reveal key={it.title} delay={i + 1} className="why-card">
              <div className="ic"><Icon name={it.icon} /></div>
              <div className="idx">{String(i + 1).padStart(2, "0")}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const WhoWeServe = () => {
  const clients = [
  "Homeowners & tenants — HDB flats, condominiums & landed properties",
  "Small & medium enterprises (SMEs) and corporate offices",
  "Retail spaces, commercial complexes & co-working environments",
  "Restaurants, cafés, food courts & commercial kitchens",
  "Hotels, event venues & serviced apartments"];

  return (
    <section className="section cov" id="serve" style={{ padding: "80px 0px" }}>
      <div className="wrap cov-grid">
        <div>
          <Reveal as="div" className="eyebrow">Who we serve</Reveal>
          <Reveal as="h2" delay={1} className="section-title">Clients of Every<br />Shape &amp; Size</Reveal>
          <Reveal as="p" delay={2} className="section-sub">We're proud to serve a diverse range of clients across Singapore — wherever there's a space worth caring for, we're ready.</Reveal>
        </div>
        <div className="serve-list">
          {clients.map((c, 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">{c}</span>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const Partners = () => {
  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 partners" id="partners" style={{ padding: "80px 0px" }}>
      <div className="blob blob-red" style={{ opacity: .4 }}></div>
      <div className="wrap">
        <Reveal as="div" className="section-head center">
          <div className="eyebrow light center">Our F&amp;B partners</div>
          <h2 className="section-title" style={{ color: "#fff" }}>Trusted by Singapore's<br />Best Restaurants</h2>
          <p className="section-sub" style={{ color: "rgba(255,255,255,.7)" }}>We're honoured to be the cleaning partner of choice for some of Singapore's most respected dining establishments.</p>
        </Reveal>
        <div className="partner-cols">
          {groups.map((g, i) =>
          <Reveal key={g.label} delay={i + 1} className="partner-group">
              <div className="partner-label"><span className="dot-red"></span>{g.label}</div>
              <div className="partner-names">
                {g.names.map((n) => <span key={n} className="partner-chip">{n}</span>)}
              </div>
            </Reveal>
          )}
        </div>
        <Reveal as="p" className="partner-note">
          Being trusted by these establishments means our F&amp;B cleaning standards are genuinely world-class — and that same standard is what <strong>every one of our clients</strong> receives.
        </Reveal>
      </div>
    </section>);

};

const AboutCTA = ({ 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">Get in touch</Reveal>
        <Reveal as="h2" delay={1}>Let's Work Together</Reveal>
        <Reveal as="p" delay={2}>Ready to experience the Bright Solution difference? Reach out to our team today — we'd love to understand your needs and show you what a truly professional cleaning service looks like.</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, { AboutHero, OurStory, VisionMission, Values, WhoWeServe, Partners, AboutCTA });