/* ============================================================
   Top sections: Nav, Hero, Marquee, About, Services, Stats
   ============================================================ */

const HOME = "https://brightsolutionandservice.com/";
const Nav = ({ onQuote, active = "Home" }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Home", HOME], ["About Us", "about.html"], ["Service", "service.html"], ["Our Works", "our-work.html"], ["Contact Us", "contact.html"]];
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href={HOME} className="nav-logo"><img src="assets/logo.png" alt="Bright Solution & Service" style={{ width: "200px", objectFit: "fill", height: "200px" }} /></a>
        <div className="nav-links">
          {links.map(([t, h]) => <a key={t} href={h} className={`nav-link ${t === active ? "active" : ""}`}>{t}</a>)}
        </div>
        <div className="nav-cta">
          <a href="tel:+6593574447" className="nav-phone"><Icon name="phone" /> +65 935 7444 7</a>
          <Magnetic><button className="btn btn-primary" onClick={onQuote}>Get a Free Quote</button></Magnetic>
          <button className="menu-btn" onClick={onQuote} aria-label="Menu"><Icon name="menu" /></button>
        </div>
      </div>
    </nav>);

};

const Hero = ({ onQuote }) =>
<header className="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>Available now</b> · <span className="pill">2+ yrs in Singapore</span>
        </Reveal>
        <Reveal as="h1" delay={1}>
          Singapore's Trusted <span className="hl">Cleaning Partner<span className="underline"></span></span> — For Homes, Offices &amp; Restaurants
        </Reveal>
        <Reveal as="p" delay={2} className="hero-sub">
          Professional cleaning you can count on, every single time. Spotless results across residential, commercial, and F&amp;B spaces all over Singapore.
        </Reveal>
        <Reveal as="div" delay={3} className="hero-cta">
          <Magnetic><button className="btn btn-primary btn-lg" onClick={onQuote}>Get a Free Quote <Icon name="arrow" /></button></Magnetic>
          <a href="#services" className="btn btn-ghost btn-lg">View 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">Covering all <b>28 postal districts</b></span>
        </Reveal>
      </div>

      <div className="hero-visual">
        <Parallax speed={0.06} style={{ position: "absolute", inset: 0 }}>
          <div className="hero-photo"><PhotoSlot id="hero-photo" photo="photo-1586023492125-27b2c045efd7" w={1600} label="Drop a hero photo — bright, clean interior" /></div>
        </Parallax>
        <div className="float-card fc-1">
          <span className="ic red"><Icon name="sparkle" /></span>
          <div><div className="lbl">Spotless, every time</div><div className="val">100% Satisfaction</div></div>
        </div>
        <div className="float-card fc-2">
          <span className="ic dark"><Icon name="shield" /></span>
          <div><div className="lbl">Compliance</div><div className="val">NEA Standards</div></div>
        </div>
        <div className="float-card fc-3">
          <span className="ic red"><Icon name="clock" /></span>
          <div><div className="lbl">Always</div><div className="val">On Time</div></div>
        </div>
        <Icon name="sparkle" className="sparkle" style={{ width: 26, height: 26, top: "12%", right: "8%" }} />
        <Icon name="sparkle" className="sparkle" style={{ width: 18, height: 18, bottom: "30%", left: "-6%", animationDelay: "1s" }} />
      </div>
    </div>
  </header>;


const Marquee = () => {
  const items = ["Residential Cleaning", "Commercial Cleaning", "F&B Cleaning", "Deep Cleaning", "Office Upkeep", "Kitchen Hygiene", "Move-in / Move-out"];
  const Row = () =>
  <div className="marquee">
      {[...items, ...items].map((t, i) =>
    <span className="item" key={i}>{t} <span className="sep">✦</span></span>
    )}
    </div>;

  return <div className="strip"><Row /></div>;
};

const About = () =>
<section className="section" id="about">
    <div className="wrap about-grid">
      <Reveal className="about-vis">
        <PhotoSlot id="about-team" photo="photo-1581578731548-c64695cc6952" label="Drop a photo — team at work" />
        <div className="about-stat">
          <div className="it"><div className="n"><span className="red">2+</span> yrs</div><div className="l">Cleaning Singapore</div></div>
          <div className="vline"></div>
          <div className="it"><div className="n">3<span className="red">×</span></div><div className="l">Service categories</div></div>
          <div className="vline"></div>
          <div className="it"><div className="n">28</div><div className="l">Postal districts</div></div>
        </div>
      </Reveal>
      <div className="about-body">
        <Reveal as="div" className="eyebrow">Why Singapore trusts us</Reveal>
        <Reveal as="h2" delay={1} className="section-title">A Cleaner Space.<br />A Better Day. Every Time.</Reveal>
        <Reveal delay={2}>
          <p>At Bright Solution and Service Pte Ltd, we know a clean environment isn't just about appearances — it's about the <strong>well-being, safety, and productivity</strong> of the people who live and work in it. We approach every job, big or small, with the same dedication and care.</p>
          <p>From spotless HDB flats in Toa Payoh to busy commercial kitchens in the CBD, our experienced team brings <strong>precision, reliability, and genuine pride</strong> to every space we clean.</p>
        </Reveal>
      </div>
    </div>
  </section>;


const Services = ({ onQuote }) => {
  const svc = [
  { num: "01", icon: "home", title: "Residential Cleaning", img: "spotless living room", photo: "photo-1567767292278-a4f21aa2d36e", body: "Your home deserves the best. Our professional home cleaners handle everything — from routine upkeep to thorough deep cleans — so you can focus on what matters most." },
  { num: "02", icon: "building", title: "Commercial Cleaning", img: "modern office space", photo: "photo-1497366754035-f200968a6e72", body: "A clean workplace is a productive one. Reliable, scheduled cleaning for offices, retail outlets, warehouses and more — fully compliant with Singapore's NEA standards." },
  { num: "03", icon: "chef", title: "F&B Cleaning", img: "stainless commercial kitchen", photo: "photo-1556911220-bff31c812dba", body: "Food hygiene is non-negotiable. Our specialist F&B team keeps your restaurant, café or food outlet kitchen-clean, grease-free, and audit-ready at all times." }];

  return (
    <section className="section" id="services" style={{ background: "var(--cream)", padding: "80px 0px" }}>
      <div className="wrap">
        <Reveal as="div" className="section-head center">
          <div className="eyebrow center">What we do</div>
          <h2 className="section-title">Our Services</h2>
          <p className="section-sub">Three specialised teams, one standard of excellence — whatever space you need cleaned, we have it covered under one roof.</p>
        </Reveal>
        <div className="svc-grid">
          {svc.map((s, i) =>
          <Reveal key={s.num} delay={i + 1} className="svc-card">
              <span className="corner"></span>
              <div className="num">{s.num}</div>
              <div className="svc-img"><PhotoSlot id={`svc-${s.num}`} photo={s.photo} w={900} label={`Drop a photo — ${s.img}`} /></div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <a className="svc-link" href="#" onClick={(e) => {e.preventDefault();onQuote();}}>
                Learn more <Icon name="arrow" />
              </a>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

const Stats = () => {
  const stats = [
  { el: <><Counter to={2} />+</>, l: "Years of professional cleaning experience in Singapore" },
  { el: <><Counter to={3} /></>, l: "Service lines — Residential, Commercial & F&B, all under one roof", red: true },
  { el: <><Counter to={100} suffix="%" /></>, l: "Commitment on every job — we never cut corners" },
  { el: <>SME<span className="red"> →</span> Brands</>, l: "Trusted by businesses across Singapore, from SMEs to established names" }];

  return (
    <section className="section stats" style={{ padding: "80px 0px 0px" }}>
      <div className="blob blob-red"></div>
      <div className="wrap">
        <Reveal as="div" className="section-head">
          <div className="eyebrow light">By the numbers</div>
          <h2 className="section-title" style={{ color: "#fff" }}>Numbers That Speak<br />for Themselves</h2>
        </Reveal>
        <div className="stats-grid">
          {stats.map((s, i) =>
          <Reveal key={i} delay={i + 1} className="stat">
              <div className="n">{s.red ? <span className="red">{s.el}</span> : s.el}</div>
              <div className="l">{s.l}</div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

Object.assign(window, { Nav, Hero, Marquee, About, Services, Stats });