/* Fluffy Friends — About page */
const { Button } = window.FluffyFriendsDesignSystem_a09c32;

function AboutPage({ onBook, onNav }) {
  useReveal();
  const values = [
    ['heart', 'Love first', 'Every pet is treated like family. Calm hands, soft voices and all the patience in the world — never rushed.'],
    ['scissors', 'Skilled & gentle', 'Trained groomers who tailor each treatment to your pet’s breed, coat and temperament.'],
    ['sparkles', 'Spotlessly clean', 'A hygienic, sanitised van for every single visit — premium, pet-safe products throughout.'],
  ];
  const team = [
    { img: 'groomer-phillip.jpg', pos: '34% 52%', name: 'Phillip Moralez', role: 'Gentle-touch groomer', handle: 'phillipfluffyfriends.ae' },
    { img: 'groomer-noel.jpg', pos: '40% 40%', name: 'Noel Bautista', role: 'Master groomer · 10+ years', handle: 'noelfluffyfriends.ae' },
    { img: 'groomer-mark.jpg', pos: '28% 40%', name: 'Mark Lopez', role: 'Senior groomer · 9 years', handle: 'markfluffyfriends.ae' },
  ];
  const stats = [['2,000+', 'Happy pets'], ['4.9★', 'Average rating'], ['3', 'Fully-equipped vans'], ['100%', 'At your door']];

  return (
    <main>
      <section className="page-hero">
        <Bunny className="page-hero__bunny l" />
        <Bunny className="page-hero__bunny r" />
        <div className="container">
          <div className="reveal in">
            <span className="eyebrow eyebrow--center">Our story</span>
            <h1>Grooming with love and care</h1>
            <p>Fluffy Friends began with a simple idea — that grooming should be calm, kind and come to you. So we built a salon on wheels and brought it to pets across Dubai.</p>
          </div>
        </div>
      </section>

      {/* Story */}
      <section className="section">
        <div className="container">
          <div className="story">
            <div className="story__media reveal">
              <img src={FLF.A + 'groom-aussie.jpg'} alt="A Fluffy Friends groomer caring for a dog inside the van" />
              <div className="stamp"><Bunny src="flf-bunny-white.png" /></div>
            </div>
            <div className="reveal">
              <span className="eyebrow">Why we started</span>
              <h2>A salon that travels to your pet</h2>
              <p>We noticed how stressful traditional grooming can be — the car ride, the carrier, the waiting room full of unfamiliar animals and noise. Pets deserve better, and so do the people who love them.</p>
              <p>So we created a fully-equipped pink salon-van and brought it to your door. One pet at a time, in a calm and familiar setting, with a groomer who gives them their full, undivided attention.</p>
              <p>Today we care for dogs, cats, bunnies and birds right across Dubai — every treatment personalised to the animal&rsquo;s breed, coat type and personality. Never a one-size-fits-all wash.</p>
              <div style={{ marginTop: 26, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Button variant="primary" onClick={onBook}>Book a groom</Button>
                <Button variant="outline" onClick={() => onNav('contact')}>Get in touch</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="section section--ink section--tight">
        <div className="container">
          <div className="stats reveal">
            {stats.map(([b, s]) => (
              <div className="stat" key={s}><b>{b}</b><span>{s}</span></div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section section--pink">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow eyebrow--center">What we stand for</span>
            <h2>Care in everything we do</h2>
          </div>
          <div className="values">
            {values.map(([ic, h, p], i) => (
              <div className="value reveal" key={h} style={{ transitionDelay: `${i * 80}ms` }}>
                <div className="value__ic"><Icon name={ic} size={29} stroke="var(--ink-900)" /></div>
                <h3>{h}</h3>
                <p dangerouslySetInnerHTML={{ __html: p }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The van */}
      <section className="section">
        <div className="container">
          <div className="van-feature">
            <div>
              <span className="eyebrow">The mobile salon</span>
              <h2 style={{ fontSize: 'clamp(28px,3.4vw,44px)', margin: '14px 0 14px', lineHeight: 1.05 }}>A real salon, on wheels</h2>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--text-secondary)' }}>Our van is a complete grooming studio — warm water, professional dryers, a calm grooming table and salon-grade products, all kept spotless and sanitised between every pet.</p>
              <ul className="van-list">
                {[
                  'Climate-controlled, calm and quiet inside',
                  'Sanitised after every single groom',
                  'Premium pet-safe shampoos & conditioners',
                  'Anti-allergy and medical shampoo on request',
                  'Tick & fleas protection treatments available',
                ].map(t => (
                  <li key={t}><span className="ic"><Icon name="check" size={16} stroke="var(--ink-900)" /></span>{t}</li>
                ))}
              </ul>
            </div>
            <div className="van-feature__media reveal">
              <img src={FLF.A + 'van-render.jpg'} alt="The Fluffy Friends pink mobile grooming van" />
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section section--sand">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow eyebrow--center">The people behind the care</span>
            <h2>Meet our groomers</h2>
            <p>Calm, certified and genuinely pet-mad — Phillip, Noel and Mark treat every friend like their own. Follow their work on Instagram.</p>
          </div>
          <div className="team-3">
            {team.map((m, i) => (
              <div className="member reveal" key={m.name} style={{ transitionDelay: `${i * 70}ms` }}>
                <div className="member__photo"><img src={FLF.A + m.img} alt={m.name} style={{ objectPosition: m.pos }} /></div>
                <h3>{m.name}</h3>
                <span>{m.role}</span>
                <a className="member__ig" href={'https://instagram.com/' + m.handle} target="_blank" rel="noopener"><Icon name="instagram" size={15} stroke="var(--brand-press)" /> @{m.handle}</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section ctaband">
        <div className="container">
          <div className="ctaband__inner reveal">
            <div>
              <h2>Let&rsquo;s pamper your pet</h2>
              <p>Join 2,000+ Dubai pet parents who groom the gentle, stress-free way.</p>
            </div>
            <div className="ctaband__actions">
              <Button variant="solid" size="lg" onClick={onBook}>Book a groom</Button>
              <Button variant="outline" size="lg" onClick={() => openWhatsApp()}>Chat on WhatsApp</Button>
            </div>
            <Bunny className="ctaband__bunny" src="flf-bunny-black.png" />
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });