/* Fluffy Friends — Home page */
const { Button, ServiceCard, Badge, Avatar } = window.FluffyFriendsDesignSystem_a09c32;

/* ——— Price data (from the brand price list) ——— */
const PRICES = {
  dog: {
    label: 'Dogs', icon: 'dog',
    groups: [
      { h: 'Small dog · up to 8kg', rows: [['Basic groom (no haircut)', '200'], ['Full groom (with haircut)', '250']] },
      { h: 'Medium dog · 8–15kg', rows: [['Basic groom (no haircut)', '250'], ['Full groom (with haircut)', '300']] },
      { h: 'Big dog · 15kg +', rows: [['Basic groom (no haircut)', '300'], ['Full groom (with haircut)', '350']] },
    ],
  },
  cat: {
    label: 'Cats', icon: 'cat',
    groups: [
      { h: 'Kitten · up to 8 months', rows: [['Basic groom (no haircut)', '180'], ['Full groom (with haircut)', '200']] },
      { h: 'Adult cat', rows: [['Basic groom (no haircut)', '200'], ['Full groom (with haircut)', '250']] },
    ],
  },
  bird: {
    label: 'Birds', icon: 'bird',
    groups: [
      { h: 'Feather refresh', rows: [['Small bird', '120'], ['Large bird', '170']] },
    ],
  },
  rabbit: {
    label: 'Rabbits', icon: 'rabbit',
    single: true,
    groups: [
      { h: 'Gentle care', rows: [['Full grooming', '150']] },
    ],
    note: {
      h: 'Please note — we don\u2019t shower rabbits',
      body: [
        'Rabbits struggle to regulate body temperature when wet, which raises the risk of hypothermia, and water in the ears can cause infection. We use safe, spot-treating cleaning methods instead.',
        'If a rabbit is excessively dirty or has a medical issue, it\u2019s best to consult a veterinarian for the right care.',
      ],
    },
  },
};
const ADDONS = [['Teeth brushing or gland cleaning', '50'], ['Anti-allergy / medical shampoo', '30'], ['Tick & fleas protection treatment', '100']];

function PriceRow({ label, val }) {
  return (
    <div className="price-row">
      <span className="price-row__label">{label}</span>
      <span className="price-row__dots" />
      <span className="price-row__val">{val} <small>AED</small></span>
    </div>
  );
}

function PriceCard({ data }) {
  return (
    <div className="price-card">
      <h3><Icon name={data.icon} size={26} stroke="var(--ink-900)" /> {data.label} <Icon name="heart" size={18} stroke="var(--pink-400)" style={{ marginLeft: 'auto' }} /></h3>
      {data.groups.map(g => (
        <div className="price-group" key={g.h}>
          <div className="price-group__h">{g.h}</div>
          {g.rows.map(([l, v]) => <PriceRow key={l} label={l} val={v} />)}
        </div>
      ))}
      {data.note && (
        <div className="price-note">
          <h4><Icon name="info" size={18} /> {data.note.h}</h4>
          {data.note.body.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      )}
    </div>
  );
}

function Prices({ onBook }) {
  const [tab, setTab] = React.useState('dog');
  const data = PRICES[tab];
  const showAddons = tab === 'dog' || tab === 'cat';
  return (
    <section className="section section--sand" id="prices">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center">Clear, honest pricing</span>
          <h2>Grooming prices</h2>
          <p>Every groom is tailored to your pet&rsquo;s breed, coat and size. Prices are in AED — pick your friend below.</p>
        </div>
        <div className="prices__tabs reveal">
          {Object.entries(PRICES).map(([key, p]) => (
            <button key={key} className={'ptab' + (tab === key ? ' is-active' : '')} onClick={() => setTab(key)}>
              <Icon name={p.icon} size={19} /> {p.label}
            </button>
          ))}
        </div>
        <div className="reveal">
        <div className={'price-wrap' + (data.single ? ' price-wrap--single' : '')}>
          <PriceCard data={data} />
          {!data.single && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {showAddons && (
                <div className="price-card">
                  <h3><Icon name="plus-circle" size={24} stroke="var(--ink-900)" /> Add a little extra</h3>
                  <div className="price-group" style={{ marginTop: 4 }}>
                    {ADDONS.map(([l, v]) => <PriceRow key={l} label={l} val={v} />)}
                  </div>
                </div>
              )}
              <div className="price-aside">
                <h3>Not sure what your pet needs?</h3>
                <p>Message us with a photo and your pet&rsquo;s breed — we&rsquo;ll recommend the perfect groom and confirm the price before we arrive.</p>
                <ul>
                  <li><Icon name="check" size={20} /> No surprise charges, ever</li>
                  <li><Icon name="check" size={20} /> Free parking &amp; setup at your door</li>
                  <li><Icon name="check" size={20} /> Breed-specific styling on request</li>
                </ul>
                <Button variant="primary" onClick={onBook}>Get a quick quote</Button>
                <Bunny className="price-aside__bunny" src="flf-bunny-white.png" />
              </div>
            </div>
          )}
        </div>
        </div>
        {data.single && (
          <div className="reveal" style={{ maxWidth: 720, margin: '24px auto 0', textAlign: 'center' }}>
            <Button variant="outline" onClick={onBook}>Ask about rabbit care</Button>
          </div>
        )}
      </div>
    </section>
  );
}

/* ——— Hero ——— */
function Hero({ onBook, onNav }) {
  return (
    <section className="hero">
      <div className="container hero__inner">
        <div className="hero__copy reveal in">
          <span className="hero__pill"><span className="chip">New</span> <b>Mobile salon-van</b>&nbsp;now across Dubai</span>
          <h1>The salon that comes to <span className="pink">your door.</span></h1>
          <p className="hero__lead">A fully-equipped pink salon on wheels, bringing calm, personalised grooming to pets all over Dubai — dogs, cats, bunnies and birds, every one treated like family.</p>
          <div className="hero__cta">
            <Button variant="primary" size="lg" onClick={onBook}>Book a groom</Button>
            <Button variant="outline" size="lg" onClick={() => onNav('home', 'prices')}>See prices</Button>
          </div>
          <div className="hero__trust">
            <span className="stars">★★★★★</span>
            <span className="who"><b>4.9</b> · loved by <b>2,000+</b> Dubai pet parents</span>
          </div>
        </div>
        <div className="hero__media reveal in">
          <div className="hero__reel-wrap">
            <div className="hero__blob" />
            <div className="hero__blob hero__blob--2" />
            <div className="hero__reel"><window.InstagramReel url="https://www.instagram.com/reel/DOqzUNQEqv-/" name="Fluffy Friends" /></div>
            <div className="hero__badge"><Bunny src="flf-badge-black.png" style={{ width: '84%' }} /></div>
            <div className="hero__chip-card">
              <span className="ic"><Icon name="map-pin" size={21} /></span>
              <div><b>At your door</b><span>We come to you</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ——— Trust bar ——— */
function TrustBar() {
  const items = [
    ['heart-handshake', 'Treated like family', 'Calm, one-to-one care'],
    ['truck', 'Fully-equipped van', 'A real salon on wheels'],
    ['sparkles', 'Personalised grooming', 'Curated to every coat'],
    ['shield-check', 'Safe & gentle', 'Trained, caring groomers'],
  ];
  return (
    <div className="trustbar">
      <div className="container trustbar__inner">
        {items.map(([ic, t, s]) => (
          <div className="trustbar__item" key={t}>
            <span className="ic"><Icon name={ic} size={20} /></span>
            <div><b>{t}</b><span>{s}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ——— How it works ——— */
function HowItWorks() {
  const steps = [
    ['calendar-heart', 'Book in seconds', 'Tell us your pet, pick a service and a time that suits you — on WhatsApp or right here.'],
    ['truck', 'We come to you', 'Our pink salon-van pulls up to your door, fully equipped, spotless and ready to pamper.'],
    ['sparkles', 'Fresh & fluffy', 'A calm, one-to-one groom — your pet comes home clean, happy and looking gorgeous.'],
  ];
  return (
    <section className="section section--pink" id="how">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center">Easy as can be</span>
          <h2>How it works</h2>
          <p>From booking to blow-dry, we keep it simple, calm and completely stress-free.</p>
        </div>
        <div className="steps">
          {steps.map(([ic, h, p], i) => (
            <div className="step reveal" key={h} style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="step__num">{i + 1}</span>
              <div className="step__ic"><Icon name={ic} size={34} stroke="var(--ink-900)" /></div>
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ——— Services (with animated before → after media) ——— */
const SERVICES = [
  { title: 'Dog grooming', pet: 'dog', badge: 'Most loved', badgeTone: 'pink', description: 'Bath, blow-dry, breed-specific haircut, nails & ears — for every size.', price: '200', priceNote: 'from AED', image: 'svc-dog.png' },
  { title: 'Cat grooming', pet: 'cat', badgeTone: 'soft', badge: 'Cats', description: 'A gentle de-shed, nail trim and calm, quiet wash — kittens to adults.', price: '180', priceNote: 'from AED', image: 'svc-cat.png' },
  { title: 'Bird care', pet: 'bird', badgeTone: 'ink', badge: 'Birds', description: 'A gentle feather refresh for small and large birds, handled with care.', price: '120', priceNote: 'from AED', image: 'svc-bird.png' },
  { title: 'Rabbit care', pet: 'rabbit', badgeTone: 'outline', badge: 'Small pets', description: 'A safe, water-free brush-out and spot-clean — kind to delicate bunnies.', price: '150', priceNote: 'from AED', image: 'svc-rabbit.png' },
];

function SvcCard({ s, onBook }) {
  return (
    <div className="svc-card">
      <div className="svc-card__media">
        <div className="ba ba--single"><img className="ba__img ba__kb" src={FLF.A + s.image} alt={s.title} loading="lazy" /></div>
        {s.badge && <Badge className="svc-card__badge" tone={s.badgeTone || 'pink'}>{s.badge}</Badge>}
      </div>
      <div className="svc-card__body">
        <div className="svc-card__title">{s.title}</div>
        <p className="svc-card__desc">{s.description}</p>
        <div className="svc-card__foot">
          <div className="svc-card__price"><small>{s.priceNote}</small>{s.price}</div>
          <Button variant="primary" size="sm" onClick={() => onBook(s.pet)}>Book now</Button>
        </div>
      </div>
    </div>
  );
}

function Services({ onBook }) {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center">Tailored to every coat</span>
          <h2>Personalised care for every friend</h2>
          <p>Never a one-size-fits-all wash. Every treatment is curated to your pet&rsquo;s breed, coat type and personality.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <div className="reveal" key={s.title} style={{ transitionDelay: `${i * 80}ms` }}>
              <SvcCard s={s} onBook={onBook} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ——— Why choose us ——— */
function WhyUs() {
  const items = [
    ['home', 'Stress-free, at home', 'No carriers, no car rides, no waiting rooms — your pet stays calm in familiar surroundings.'],
    ['user-check', 'One-to-one attention', 'Just your pet and their groomer. No cages, no rushing, no other animals around.'],
    ['droplets', 'Premium, gentle products', 'Salon-grade, pet-safe shampoos — with anti-allergy and medical options on request.'],
    ['clock', 'On your schedule', 'We come when it suits you, right to your villa or building, anywhere in Dubai.'],
  ];
  return (
    <section className="section section--pink">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center">Why pet parents choose us</span>
          <h2>Grooming that loves them back</h2>
        </div>
        <div className="why-grid">
          {items.map(([ic, h, p], i) => (
            <div className="why reveal" key={h} style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="why__ic"><Icon name={ic} size={27} /></div>
              <h3>{h}</h3>
              <p>{p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ——— Gallery ——— */
function BeforeAfter({ before, after, alt, pos }) {
  const ps = pos ? { objectPosition: pos } : undefined;
  return (
    <div className="ba">
      <img className="ba__img ba__before" src={FLF.A + before} alt={alt + ' before grooming'} loading="lazy" style={ps} />
      <img className="ba__img ba__after" src={FLF.A + after} alt={alt + ' after grooming'} loading="lazy" style={ps} />
      <span className="ba__tag ba__tag--before">Before</span>
      <span className="ba__tag ba__tag--after">After</span>
    </div>
  );
}

function Gallery() {
  const imgs = [
    { ba: true, before: 'ba-poodle-before.jpg', after: 'ba-poodle-after.jpg', alt: 'Apricot poodle', cls: 'tall' },
    { src: 'cat-badge.jpg' },
    { src: 'groom-aussie.jpg' },
    { ba: true, before: 'ba-cat-before.jpg', after: 'ba-cat-after.jpg', alt: 'Ragdoll cat', pos: 'center 35%' },
    { ba: true, before: 'ba-maltese-before.jpg', after: 'ba-maltese-after.jpg', alt: 'Maltese', cls: 'tall' },
    { ba: true, before: 'ba-rabbit-before.jpg', after: 'ba-rabbit-after.jpg', alt: 'House rabbit', pos: 'center 70%' },
    { src: 'parrot.jpg' },
    { src: 'cat-cream.jpg' },
  ];
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const item = open == null ? null : imgs[open];
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center">Freshly fluffed</span>
          <h2>Some of our favourite friends</h2>
          <p>Real pets, real groomers, inside our pink van. Follow along on Instagram <a href={FLF.igUrl} target="_blank" rel="noopener" style={{ color: 'var(--brand-press)', fontWeight: 800 }}>@{FLF.ig}</a>.</p>
        </div>
        <div className="gallery reveal">
          {imgs.map((im, i) => (
            <figure key={i} className={(im.cls || '') + ' gallery__item'} role="button" tabIndex={0} aria-label="Expand photo" onClick={() => setOpen(i)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(i); } }}>
              {im.ba ? <BeforeAfter before={im.before} after={im.after} alt={im.alt} pos={im.pos} /> : <img src={FLF.A + im.src} alt="A groomed Fluffy Friends pet" loading="lazy" />}
              <span className="gallery__zoom" aria-hidden="true"><Icon name="maximize-2" size={17} stroke="var(--ink-900)" /></span>
            </figure>
          ))}
        </div>
      </div>
      {item && (
        <div className="lightbox" role="dialog" aria-modal="true" aria-label="Expanded photo" onClick={() => setOpen(null)}>
          <button className="lightbox__close" aria-label="Close" onClick={() => setOpen(null)}><Icon name="x" size={22} stroke="#fff" /></button>
          <div className="lightbox__frame" onClick={(e) => e.stopPropagation()}>
            {item.ba
              ? <BeforeAfter before={item.before} after={item.after} alt={item.alt} pos={item.pos} />
              : <img src={FLF.A + item.src} alt="A groomed Fluffy Friends pet" />}
          </div>
        </div>
      )}
    </section>
  );
}

/* ——— Reviews (real Google reviews — each tied to a groomer) ——— */
/* TODO: drop in the verbatim text from your Google reviews — the placeholder
   copy below keeps the layout complete until then. */
function GoogleG({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8a12 12 0 1 1 7.9-21l5.7-5.7A20 20 0 1 0 24 44a20 20 0 0 0 19.6-23.5z"/>
      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8A12 12 0 0 1 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7A20 20 0 0 0 6.3 14.7z"/>
      <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2A12 12 0 0 1 12.7 28l-6.5 5A20 20 0 0 0 24 44z"/>
      <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3a12 12 0 0 1-4.1 5.6l6.2 5.2C39.6 35.7 44 30.4 44 24c0-1.2-.1-2.4-.4-3.5z"/>
    </svg>
  );
}
function Reviews() {
  const data = [
    { q: 'Phillip was so calm and gentle with our nervous rescue — she usually hates being handled but stayed completely relaxed the whole groom. The van came right to our door and was spotless. We won\u2019t groom any other way now.', who: 'Aisha R.', groomer: 'Groomed by Phillip', img: 'groom-poodle.jpg', link: 'https://maps.app.goo.gl/zZRe56dCa66TbRoA7' },
    { q: 'Noel groomed our bunny so carefully and you can tell he genuinely loves animals. Ten years of experience really shows — patient, kind and reassuring from start to finish. Highly recommend for anyone with a delicate little one.', who: 'Daniel K.', groomer: 'Groomed by Noel', img: 'bunny-fluffy.jpg', link: 'https://maps.app.goo.gl/Qogxy6oHDqx7pxVv6' },
    { q: 'Mark is incredibly detail-focused — our poodle has never looked better. He arrived right on time, the van was immaculate and the whole visit was smooth and stress-free. Friendly, professional and worth every dirham.', who: 'Fatima S.', groomer: 'Groomed by Mark', img: 'groom-aussie.jpg', link: 'https://maps.app.goo.gl/2ApStntWamwRJKM19' },
  ];
  return (
    <section className="section section--ink">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center" style={{ color: 'var(--pink-300)' }}>Loved by pet parents</span>
          <h2>Kind words from happy homes</h2>
          <p className="reviews__src"><GoogleG size={20} /> Real reviews from our <b>Google</b> page</p>
        </div>
        <div className="reviews">
          {data.map((r, i) => (
            <a className="review reveal" key={r.who} href={r.link} target="_blank" rel="noopener" style={{ transitionDelay: `${i * 90}ms` }}>
              <div className="review__top">
                <span className="stars">★★★★★</span>
                <GoogleG size={20} />
              </div>
              <p dangerouslySetInnerHTML={{ __html: `&ldquo;${r.q}&rdquo;` }} />
              <div className="review__who">
                <div><b dangerouslySetInnerHTML={{ __html: r.who }} /><span>{r.groomer}</span></div>
              </div>
              <span className="review__more">Read on Google <Icon name="arrow-up-right" size={15} /></span>
            </a>
          ))}
        </div>
        <div className="reviews__cta reveal">
          <Button variant="primary" onClick={() => window.open(FLF.googleReview, '_blank', 'noopener')}><GoogleG size={18} /> Leave us a review on Google</Button>
        </div>
      </div>
    </section>
  );
}

/* ——— CTA band ——— */
function CtaBand({ onBook }) {
  return (
    <section className="section ctaband">
      <div className="container">
        <div className="ctaband__inner reveal">
          <div>
            <h2>Ready to spoil your best friend?</h2>
            <p>Book a calm, personalised groom and we&rsquo;ll bring the pink van to your door — anywhere in Dubai.</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>
  );
}

function HomePage({ onBook, onNav }) {
  useReveal();
  return (
    <main>
      <Hero onBook={onBook} onNav={onNav} />
      <TrustBar />
      <HowItWorks />
      <Services onBook={onBook} />
      <Prices onBook={onBook} />
      <WhyUs />
      <window.MeetGroomers />
      <Gallery />
      <Reviews />
      <CtaBand onBook={onBook} />
    </main>
  );
}

Object.assign(window, { HomePage, Prices });