// ─────────── Reviews ───────────
const REVIEWS = [
  { who: 'Tanvi Nehete', meta: '4 months ago · Google', q: 'I corrected my alignment in a year which many dentists said would take 4 to 5 years. The consulting was thorough and precise.' },
  { who: 'Annapoorna S. Pai', meta: 'A year ago · Google', q: 'They worked together not just as skilled professionals, but as a team with warmth and understanding. Her clinic in Mulund is spotless, well-organized and calm.' },
  { who: 'Adit Vora', meta: 'A year ago · Google', q: 'My case was mishandled by a previous dentist. Throughout my 7-year correction, Dr. Abhijit remained patient, understanding, and adjusted his approach to my needs.' },
  { who: 'Fabian Rose', meta: '8 months ago · Google', q: 'They go out of their way to make me feel like I\'m their only patient. Professional yet warm, and they keep me smiling.' },
  { who: 'Krish', meta: '7 months ago · Google', q: 'Overbite corrected through braces. He explained every step clearly and the results are fantastic. Highly recommend for anyone considering orthodontic treatment.' },
  { who: 'Shubham Kanekar', meta: 'A year ago · Google', q: 'The clinic is modern and welcoming. Dr. Abhijit always kept me informed about progress. Now, my smile looks amazing.' },
  { who: 'Sonia Gupta', meta: '7 months ago · Google', q: 'He treated my daughter. From the very first visit to the last, he made us feel comfortable. A true gentleman and very caring.' },
  { who: 'Nitya Prabhakar', meta: 'A year ago · Google', q: 'Cap replacement and root canal handled smoothly. Both doctors took time to explain each step, ensuring I was comfortable throughout.' },
];

const ReviewsSection = () => {
  const railRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  const onScroll = () => {
    const el = railRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setProgress(max > 0 ? (el.scrollLeft / max) * 100 : 0);
  };
  const scroll = (dir) => {
    const el = railRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (444), behavior: 'smooth' });
  };

  return (
    <section id="reviews" className="reviews sec-cream">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <p className="eyebrow"><span className="dot"></span>Patient stories</p>
            <h2 className="display">200+ five-star reviews.<br/><i>Real words.</i> Real mouths.</h2>
          </div>
          <p>Every review here is lifted verbatim from our Google profile. We don't curate, edit or incentivise feedback. We just keep doing the work.</p>
        </div>

        <div className="google-snap reveal reveal-delay-1">
          <div className="big">4.9</div>
          <div>
            <div className="stars-row">★ ★ ★ ★ ★</div>
            <div className="reviewsn">based on 200+ Google reviews</div>
          </div>
          <div className="right">
            We're the top-rated dental practice in Mulund East &amp; West, and the only one run by a husband-wife specialist team.
          </div>
        </div>

        <div className="reviews-rail reveal reveal-delay-2" ref={railRef} onScroll={onScroll}>
          {REVIEWS.map((r, i) => (
            <article key={i} className="review-card">
              <div className="stars">★ ★ ★ ★ ★</div>
              <p className="quote">"{r.q}"</p>
              <div className="who">
                <div className="avatar">{r.who[0]}</div>
                <div className="who-text">
                  <div className="n">{r.who}</div>
                  <div className="meta">{r.meta}</div>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="reviews-controls">
          <button className="btn-circle" onClick={() => scroll(-1)}><Icon name="chevron-left" size={18}/></button>
          <div className="reviews-progress"><div className="fill" style={{width: `${Math.max(8, progress)}%`}}></div></div>
          <button className="btn-circle" onClick={() => scroll(1)}><Icon name="chevron-right" size={18}/></button>
        </div>
      </div>
    </section>
  );
};

// ─────────── Branches ───────────
const BRANCHES = [
  {
    id: 'east',
    short: 'Mulund East',
    n: 'Branch 01',
    name: 'Neelam Nagar Clinic',
    addr: 'Shop No. 2, 9/C, Neelam Nagar, Gavanpada, Mulund East, Mumbai 400081',
    hours: 'Mon–Sat · 10:00 – 20:00',
    phone: '+91 93218 59061',
    open: true,
    coords: { x: 28, y: 58 },
    nearby: 'Near Gavanpada signal · 5 min from Mulund Stn (E)',
    mapSrc: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15074.46520747573!2d72.94600260114562!3d19.168265862883647!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b9414bf0e28f%3A0xe6b23cbda8593ebb!2sAlign-O-Dentt%20by%20Dr%20Shanbhags!5e0!3m2!1sen!2sin!4v1779551885601!5m2!1sen!2sin',
    mapsUrl: 'https://www.google.com/maps/place/Align-O-Dentt+by+Dr+Shanbhags/@19.168266,72.946003,15z',
  },
  {
    id: 'west',
    short: 'Mulund West',
    n: 'Branch 02',
    name: 'The Gateway by Wadhwa',
    addr: 'Unit 307, The Gateway by Wadhwa, near Atmosphere by Wadhwa, Hira Nagar GMLR, Mulund West, Mumbai 400081',
    hours: 'Mon–Sun · 10:00 – 20:00',
    phone: '+91 93218 59061',
    open: true,
    coords: { x: 70, y: 42 },
    nearby: 'In The Gateway commercial tower · Lift access',
    mapSrc: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15074.46520747573!2d72.94600260114562!3d19.168265862883647!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b9c91d1deb4f%3A0xd6a654af402c24aa!2sAlign-O-Dentt%20-%20Dr%20Shanbhags%20(Mulund%20West)!5e0!3m2!1sen!2sin!4v1779551910670!5m2!1sen!2sin',
    mapsUrl: 'https://www.google.com/maps/place/Align-O-Dentt+-+Dr+Shanbhags+(Mulund+West)',
  },
];

const BranchesSection = () => {
  const [active, setActive] = React.useState('east');
  const b = BRANCHES.find(x => x.id === active);
  return (
    <section id="branches" className="branches">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <p className="eyebrow"><span className="dot"></span>Visit us</p>
            <h2 className="display">Two clinics. <i>One Mulund.</i></h2>
          </div>
          <p>Both branches run on the same care protocol. Same sterilisation, same digital workflow, same doctors. Pick whichever is closer.</p>
        </div>

        <div className="reveal reveal-delay-1">
          <div className="branch-toggle">
            {BRANCHES.map(br => (
              <button
                key={br.id}
                className={active === br.id ? 'active' : ''}
                onClick={() => setActive(br.id)}
              >
                <span className="pill">{br.n}</span>
                <span>{br.short}</span>
              </button>
            ))}
          </div>

          <div className="branch-grid">
            <div className="branch-card" key={b.id} style={{animation:'fadeIn 500ms ease'}}>
              <div className="b-eyebrow">
                <span className="num">{b.id === 'east' ? '1' : '2'}</span>
                <span className="eyebrow" style={{margin:0}}>{b.n} · {b.short}</span>
              </div>
              <h3>{b.name}</h3>
              <p className="addr">{b.addr}</p>

              <div className="branch-row"><span className="k">Hours</span><span className="v">{b.hours}</span></div>
              <div className="branch-row"><span className="k">Status</span><span className="v open">Open now · accepting walk-ins</span></div>
              <div className="branch-row"><span className="k">Phone</span><span className="v">{b.phone}</span></div>
              <div className="branch-row"><span className="k">Landmark</span><span className="v">{b.nearby}</span></div>

              <div className="branch-actions">
                <Btn kind="primary" onClick={() => scrollTo('book')}>Book at this branch</Btn>
                <a href={b.mapsUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
                  Get directions
                  <span className="arrow"><Icon name="arrow" size={12}/></span>
                </a>
              </div>
            </div>

            <div className="branch-map">
              <iframe
                key={b.id}
                src={b.mapSrc}
                title={`${b.name} — Google Map`}
                loading="lazy"
                allowFullScreen
                referrerPolicy="no-referrer-when-downgrade"
                className="branch-map-iframe"
              />

              <div className="map-overlay">
                <div className="icon"><Icon name="pin" size={18}/></div>
                <div className="text">
                  <b>{b.name}</b>
                  <div className="sub">{b.short} · {b.short === 'Mulund East' ? '19.1721° N, 72.9568° E' : '19.1768° N, 72.9437° E'}</div>
                </div>
                <a href={b.mapsUrl} target="_blank" rel="noopener noreferrer" className="map-open-btn">
                  Open in Maps
                  <span className="arr"><Icon name="arrow" size={12}/></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ReviewsSection, BranchesSection });