/* Fluffy Friends — Meet the groomers (with embedded Instagram reels) */
const { Button, Badge } = window.FluffyFriendsDesignSystem_a09c32;

/* The team — bios distilled from the brand's own words, kept warm & emoji-free.
   Each groomer has a real Instagram handle + a featured reel permalink. */
const GROOMERS = [
  {
    id: 'phillip',
    name: 'Phillip Moralez',
    role: 'Gentle-touch groomer',
    handle: 'phillipfluffyfriends.ae',
    photo: 'assets/imagery/groomer-phillip.jpg',
    pos: '34% 52%',
    tags: ['Calm energy', 'Nervous pets', 'Dogs & cats'],
    bio: 'Phillip leads with calm energy and a gentle approach — the kind of quiet presence that settles even the most nervous pet. From his favourite friends to groom to the little moments that make it all worth it, he brings patience and real care to every single visit.',
    reel: 'https://www.instagram.com/reel/DXg7_3mDfqU/',
  },
  {
    id: 'noel',
    name: 'Noel Bautista',
    role: 'Master groomer · 10+ years',
    handle: 'noelfluffyfriends.ae',
    photo: 'assets/imagery/groomer-noel.jpg',
    pos: '40% 40%',
    tags: ['10+ years', 'Loves bunnies', 'Endlessly patient'],
    bio: 'With over ten years in the grooming field, Noel is patient, gentle and genuinely passionate about pets — with a special soft spot for bunnies. He has a knack for making every friend feel relaxed, cared for and completely at home throughout their groom.',
    reel: 'https://www.instagram.com/reel/DYUS1yyKe2v/',
  },
  {
    id: 'mark',
    name: 'Mark Lopez',
    role: 'Senior groomer · 9 years',
    handle: 'markfluffyfriends.ae',
    photo: 'assets/imagery/groomer-mark.jpg',
    pos: '28% 40%',
    tags: ['9 years', 'Detail-focused', 'Calm & attentive'],
    bio: 'Nine years in, Mark is all about the details — calm, attentive and precise. He keeps every visit smooth, safe and stress-free, with a finish that is as gentle as it is gorgeous. Ask him which pets he loves grooming most.',
    reel: 'https://www.instagram.com/reel/DXy-69Esy3b/',
  },
];

/* Embedded Instagram reel — uses Instagram's official embed.js.
   Falls back to a tappable card if the embed can't load (offline / blocked). */
function InstagramReel({ url, name }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    let done = false;
    const process = () => {
      if (window.instgrm && window.instgrm.Embeds) { window.instgrm.Embeds.process(); return true; }
      return false;
    };
    if (process()) return;
    const t = setInterval(() => { if (process()) { done = true; clearInterval(t); } }, 350);
    const stop = setTimeout(() => clearInterval(t), 8000);
    return () => { clearInterval(t); clearTimeout(stop); };
  }, [url]);
  const permalink = url + (url.includes('?') ? '' : '?utm_source=ig_embed');
  return (
    <blockquote
      ref={ref}
      className="instagram-media"
      data-instgrm-captioned
      data-instgrm-permalink={permalink}
      data-instgrm-version="14"
      style={{ background: '#FFF', border: 0, borderRadius: 22, boxShadow: 'var(--shadow-card)', margin: 0, maxWidth: 380, minWidth: 280, width: '100%', padding: 0 }}
    >
      <a href={url} target="_blank" rel="noopener" className="reel-fallback">
        <span className="reel-fallback__play"><Icon name="play" size={26} stroke="var(--ink-900)" /></span>
        <b>Watch {name.split(' ')[0]}&rsquo;s reel</b>
        <span>on Instagram</span>
      </a>
    </blockquote>
  );
}

function GroomerRow({ g, i }) {
  const reversed = i % 2 === 1;
  return (
    <div className={'groomer reveal' + (reversed ? ' groomer--rev' : '')} style={{ transitionDelay: `${i * 80}ms` }}>
      <div className="groomer__media">
        <div className="groomer__blob" />
        <InstagramReel url={g.reel} name={g.name} />
      </div>
      <div className="groomer__body">
        <div className="groomer__head">
          <img className="groomer__avatar" src={g.photo} alt={g.name} loading="lazy" style={{ objectPosition: g.pos }} />
          <div>
            <h3>{g.name}</h3>
            <span className="groomer__role">{g.role}</span>
          </div>
        </div>
        <div className="groomer__tags">
          {g.tags.map(t => <span className="groomer__tag" key={t}>{t}</span>)}
        </div>
        <p>{g.bio}</p>
        <a className="groomer__ig" href={'https://instagram.com/' + g.handle} target="_blank" rel="noopener">
          <Icon name="instagram" size={18} stroke="var(--ink-900)" />
          <span>@{g.handle}</span>
          <Icon name="arrow-up-right" size={16} stroke="var(--brand-press)" />
        </a>
      </div>
    </div>
  );
}

function MeetGroomers() {
  return (
    <section className="section" id="groomers">
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow eyebrow--center">The faces behind the care</span>
          <h2>Meet the groomers</h2>
          <p>The gentle hands inside the pink van. Get to know the people who treat your pet like family — and watch them at work on Instagram.</p>
        </div>
        <div className="groomers">
          {GROOMERS.map((g, i) => <GroomerRow key={g.id} g={g} i={i} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MeetGroomers, InstagramReel });