// Marquee typographique — mots alternés filled/outline sur fond rose
function ServicesMarquee() {
  const words = ['MANICURE','PEDICURE','GELINHO','HENNA','MICROBLADING','EPILAÇÃO','MASSAGEM','ROSTO'];
  const loop = [...words, ...words, ...words];
  return (
    <section className="svcmq">
      <div className="svcmq-track">
        {loop.map((w, i) => (
          <span key={i} className={i % 2 === 0 ? 'svcmq-w filled' : 'svcmq-w outline'}>
            {w}<span className="svcmq-sep">•</span>
          </span>
        ))}
      </div>
      <style>{`
        .svcmq{background:#F774A0;padding:clamp(26px,3.4vw,48px) 0;overflow:hidden}
        .svcmq-track{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:svcmqScroll 34s linear infinite}
        .svcmq:hover .svcmq-track{animation-play-state:paused}
        @keyframes svcmqScroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
        .svcmq-w{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(38px,6.4vw,86px);line-height:1;letter-spacing:-0.01em;display:inline-flex;align-items:center}
        .svcmq-w.filled{color:#FFFFFF}
        .svcmq-w.outline{color:transparent;-webkit-text-stroke:1.5px #FFFFFF}
        .svcmq-sep{color:#FFFFFF;-webkit-text-stroke:0;font-size:.42em;margin:0 clamp(20px,2.6vw,44px);opacity:.85;transform:translateY(-.12em)}
        @media (prefers-reduced-motion:reduce){.svcmq-track{animation:none}}
      `}</style>
    </section>
  );
}

// Lieu & Horaires — card blanche, labels verticaux, Google Map
function LocationHours() {
  const [gallery, setGallery] = React.useState(false);
  const [page, setPage] = React.useState(0);

  // Photos du salon — ajouter d'autres { label, src } au fur et à mesure
  const photos = [
    { label: 'Fachada', src: 'https://lh3.googleusercontent.com/gps-cs-s/AHRPTWnbr21A87FfAP7KCOyjZTwj5SkR2BhCJca26dEOSMjhsATM9i4fFzEsXu70waaL0to7oHaVWuA_xr0gTnDXajdIIvbuo88aWLxgPVCFXzSKpOwq2pE2tXrlTjBVub6dJZZlmDLG6nuewR6Q=w1200-h1600-k-no' },
    { label: 'Sala de espera', src: 'https://lh3.googleusercontent.com/gps-cs-s/AHRPTWn6ZvubRxYjS8ndUJM_JSWijG5d5GTh-aOSD3oOOG1JPIOGqI-Bie9SljeQsLv46BX2PpYeH_7t8o8uf5zqAo8d7OYTr8O6pXHl0FyqNIeD7P9fm95l-I-wQPjNCA7OqdDoPe-zSC9deO39=w1200-h1600-k-no' },
    { label: 'Cabine de rosto', src: 'https://lh3.googleusercontent.com/gps-cs-s/AHRPTWmpYDXXe7MXc_HL-AOvXV_Go_tCUXjZgUG4SBI2OlJMDp4UfS_gR5EExWhTJKa7xe6jCph_kadbDRQWkwxs6Cr7yHmNwN4SAKHr2v_F1PgaEWAu7uAU_zZEIGkQH6boV6veS80IAFqaJNps=w1200-h1600-k-no' },
    { label: 'Zona de unhas', src: 'https://lh3.googleusercontent.com/gps-cs-s/AHRPTWkiS0eMnRgFNyjTRXmrfAMdQJvmTjV5P2vk2JwavCjJM3hmlbpJxc3aLG6j1gJe099eZstiJfeueGj_SQRGbzevD-KLsUGOVCJIBu6WX-cLBUWtTNL7nicMZKsGgGcHRde-dY6QocOBm2ke=w1200-h1600-k-no' },
    { label: 'Detalhe deco', src: 'https://lh3.googleusercontent.com/gps-cs-s/AHRPTWmdN0gV1RmW5kwOcFd6T9uVC8ffweYIPAINXvfUenir15uiBsuyZzj2aEPmb5FTl5UfBalLERIyDn4u2mqaS_CJRRh57ZB512QM4g9Qkl9QXZuA7z-QyCX2vR9-Q1HfNVIr9MYFa1Rmy5w=w1200-h1600-k-no' },
    { label: 'Receção', src: 'https://lh3.googleusercontent.com/gps-cs-s/AHRPTWns8x0FbcbnQpS6LWADXJteco7bgVOOE6LJEIi-41_2IbQDjFH5rCizxz9uwvJKaCERR85AcWGEaRWK50tNwbBguwvw1Pt7x5gnlN_tNkk9trWMqqSEaJH-9ycEXAPZzK8wj9hdhf3qmwBJ=w1200-h1600-k-no' },
  ];
  const perPage = 2;
  const pages = Math.ceil(photos.length / perPage);
  const slice = photos.slice(page * perPage, page * perPage + perPage);

  React.useEffect(() => {
    if (!gallery) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setGallery(false);
      if (e.key === 'ArrowRight') setPage(p => (p + 1) % pages);
      if (e.key === 'ArrowLeft') setPage(p => (p - 1 + pages) % pages);
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [gallery, pages]);

  React.useEffect(() => {
    document.body.style.overflow = gallery ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [gallery]);

  return (
    <section id="morada" className="loc">
      <div className="loc-petals" aria-hidden="true"></div>
      <div className="wrap">
        <h2 className="loc-mega">Lugar</h2>

        <div className="loc-card">
          <button type="button" className="loc-vpill" onClick={() => { setGallery(true); setPage(0); }}>Fotos do Salão</button>

          <h3 className="loc-cardtitle">Morada</h3>

          <div className="loc-body">
            <div className="loc-info">
              <p className="loc-addr">R. do rio homem 10<br/>4730-580 Soutelo, Braga</p>

              <a className="loc-tel" href="tel:+351920772138">+351 920 772 138</a>

              <a className="loc-btn" href="https://maps.google.com/?q=R.+do+rio+homem+10,+4730-580+Soutelo,+Braga" target="_blank" rel="noopener">Ver direções</a>
            </div>

            <div className="loc-map">
              <iframe
                title="Mapa Belezaapinkk"
                src="https://maps.google.com/maps?q=R.%20do%20rio%20homem%2010%2C%204730-580%20Soutelo%2C%20Braga&z=15&output=embed"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen>
              </iframe>
            </div>
          </div>
        </div>
      </div>

      {gallery && ReactDOM.createPortal(
        <div className="fg-overlay" onClick={() => setGallery(false)}>
          <div className="fg-panel" onClick={e => e.stopPropagation()}>
            <button type="button" className="fg-close" onClick={() => setGallery(false)} aria-label="Fechar">✕</button>
            <h3 className="fg-title">Fotos do Salão</h3>
            <div className="fg-stage">
              <button type="button" className="fg-arrow" onClick={() => setPage(p => (p - 1 + pages) % pages)} aria-label="Anterior">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 6l-6 6 6 6"/></svg>
              </button>
              <div className="fg-pair">
                {slice.map((p, i) => (
                  <figure className="fg-shot" key={page + '-' + i}>
                    <div className="fg-slot">
                      {p.src
                        ? <img src={p.src} alt={p.label + ' — salão de beleza Belezaapinkk em Soutelo, Braga'} loading="lazy" referrerPolicy="no-referrer" />
                        : <span>{p.label}</span>}
                    </div>
                  </figure>
                ))}
              </div>
              <button type="button" className="fg-arrow" onClick={() => setPage(p => (p + 1) % pages)} aria-label="Seguinte">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
              </button>
            </div>
            <div className="fg-dots">
              {Array.from({ length: pages }).map((_, i) => (
                <button type="button" key={i} className={i === page ? 'on' : ''} onClick={() => setPage(i)} aria-label={'Página ' + (i + 1)}></button>
              ))}
            </div>
          </div>
        </div>,
        document.body
      )}

      <style>{`
        .loc{position:relative;background:#FCE8EE;padding:clamp(70px,9vw,130px) 0;overflow:hidden}
        .loc-petals{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 50% 50%,#F774A0 0 1.6px,transparent 1.7px),radial-gradient(circle at 50% 50%,#F774A0 0 1.1px,transparent 1.2px);background-size:64px 64px,64px 64px;background-position:0 0,32px 32px}
        .loc .wrap{position:relative;z-index:1}

        .loc-mega{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(62px,11vw,150px);line-height:.95;color:#F774A0;text-align:center;margin:0 0 clamp(-18px,-1.6vw,-8px);letter-spacing:-.02em;position:relative;z-index:2}

        .loc-card{position:relative;background:#F774A0;border-radius:2rem;padding:clamp(36px,4.4vw,68px) clamp(28px,3.6vw,56px);margin:0 auto;max-width:1120px;box-shadow:0 28px 80px rgba(247,116,160,.3)}

        .loc-vpill{position:absolute;top:50%;right:clamp(-40px,-2.4vw,-22px);transform:translateY(-50%);writing-mode:vertical-rl;background:#FCE8EE;color:#F774A0;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:clamp(18px,1.8vw,26px);padding:clamp(26px,3vw,44px) clamp(12px,1.1vw,17px);border-radius:999px;box-shadow:0 12px 30px rgba(247,116,160,.22);border:0;cursor:pointer;transition:transform .3s,box-shadow .3s}
        .loc-vpill:hover{transform:translateY(-50%) translateX(-4px);box-shadow:0 18px 40px rgba(247,116,160,.34)}

        .loc-cardtitle{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(28px,3.6vw,52px);line-height:1.1;color:#FFFFFF;text-align:center;margin:0 0 clamp(30px,3.6vw,52px)}

        .loc-body{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,3.4vw,52px);align-items:center}

        .loc-info{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,2.2vw,30px);min-width:0}
        .loc-addr{font-family:'Lato',system-ui,sans-serif;font-size:clamp(20px,2.1vw,28px);font-weight:700;line-height:1.4;color:#FFFFFF;margin:0}

        .loc-tel{font-family:'Playfair Display',Georgia,serif;font-size:clamp(22px,2.2vw,30px);color:#FFFFFF;transition:opacity .25s}
        .loc-tel:hover{opacity:.78}

        .loc-btn{font-family:'Lato',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;background:#FFFFFF;color:#F774A0;padding:14px 32px;border-radius:999px;transition:transform .25s,box-shadow .25s}
        .loc-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.16)}

        .loc-map{border-radius:1rem;overflow:hidden;min-height:clamp(300px,32vw,420px);background:#FCE8EE}
        .loc-map iframe{width:100%;height:100%;min-height:clamp(300px,32vw,420px);border:0;display:block}

        @media (max-width:1060px){
          .loc-body{grid-template-columns:1fr}
          .loc-vpill{position:static;transform:none;writing-mode:horizontal-tb;display:block;margin:26px auto 0;padding:14px 30px;font-size:18px;width:fit-content}
          .loc-vpill:hover{transform:translateY(-2px)}
          .loc-card{padding:clamp(30px,6vw,44px) clamp(22px,5vw,32px)}
        }

        /* Gallery overlay */
        .fg-overlay{position:fixed;inset:0;z-index:300;background:rgba(42,30,35,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,40px);animation:fgIn .25s ease}
        @keyframes fgIn{from{opacity:0}to{opacity:1}}
        .fg-panel{position:relative;background:#FCE8EE;border-radius:2rem;padding:clamp(26px,3.4vw,52px) clamp(20px,3vw,44px) clamp(22px,2.6vw,36px);width:min(1180px,100%);max-height:100%;overflow:auto;box-shadow:0 40px 100px rgba(42,30,35,.34);animation:fgPop .3s cubic-bezier(.2,.7,.2,1)}
        @keyframes fgPop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
        .fg-close{position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);width:38px;height:38px;border-radius:999px;background:#FFFFFF;color:#F774A0;font-size:15px;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(247,116,160,.24);transition:transform .25s}
        .fg-close:hover{transform:rotate(90deg)}
        .fg-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(26px,3.4vw,48px);line-height:1.1;color:#F774A0;text-align:center;margin:0 0 clamp(22px,2.6vw,36px)}
        .fg-stage{display:flex;align-items:center;gap:clamp(8px,1.4vw,20px)}
        .fg-pair{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);min-width:0}
        .fg-shot{margin:0;min-width:0;animation:fgFade .35s ease}
        @keyframes fgFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
        .fg-slot{aspect-ratio:4/5;background:#FFFFFF;border-radius:1.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(247,116,160,.16);overflow:hidden}
        .fg-slot img{width:100%;height:100%;object-fit:cover;display:block}
        .fg-slot span{font-family:'Lato',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#F774A0;opacity:.7;text-align:center;padding:0 12px}
        .fg-arrow{flex:0 0 auto;width:clamp(38px,3.6vw,52px);height:clamp(38px,3.6vw,52px);border-radius:999px;background:#F774A0;color:#FFFFFF;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(247,116,160,.3);transition:transform .25s}
        .fg-arrow svg{width:22px;height:22px}
        .fg-arrow:hover{transform:scale(1.08)}
        .fg-dots{display:flex;justify-content:center;gap:8px;margin-top:clamp(20px,2.4vw,32px)}
        .fg-dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(247,116,160,.32);cursor:pointer;padding:0;transition:width .25s,background .25s}
        .fg-dots button.on{width:26px;background:#F774A0}
        @media (max-width:640px){
          .fg-pair{grid-template-columns:1fr}
          .fg-shot:nth-child(2){display:none}
          .fg-panel{border-radius:1.25rem}
        }
      `}</style>
    </section>
  );
}

// Instagram — polaroids en éventail
function InstagramSection() {
  // Placeholders Unsplash — esthétique / ongles / soins — à remplacer par les photos du salon
  const decks = [
    { rot: -5, srcs: [
      'https://images.unsplash.com/photo-1604654894610-df63bc536371?w=900&h=1125&fit=crop&crop=entropy&q=80',
      'https://images.unsplash.com/photo-1632345031435-8727f6897d53?w=900&h=1125&fit=crop&crop=entropy&q=80',
      'https://images.unsplash.com/photo-1607779097040-26e80aa78e66?w=900&h=1125&fit=crop&crop=entropy&q=80',
    ]},
    { rot: 1.5, srcs: [
      'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=900&h=1125&fit=crop&crop=entropy&q=80',
      'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=900&h=1125&fit=crop&crop=entropy&q=80',
      'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=900&h=1125&fit=crop&crop=entropy&q=80',
    ]},
    { rot: 5, srcs: [
      'https://images.unsplash.com/photo-1607779097040-26e80aa78e66?w=900&h=1125&fit=crop&crop=entropy&q=80',
      'https://images.unsplash.com/photo-1620331311520-246422fd82f9?w=900&h=1125&fit=crop&crop=entropy&q=80',
      'https://images.unsplash.com/photo-1631730359585-38a4935cbec4?w=900&h=1125&fit=crop&crop=entropy&q=80',
    ]},
  ];

  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => s + 1), 4200);
    return () => clearInterval(id);
  }, []);

  // Rotation du logo pilotée par le scroll
  const glyphRef = React.useRef(null);
  const [spin, setSpin] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const el = glyphRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const p = 1 - (r.top + r.height / 2) / window.innerHeight;
      setSpin(p * 260);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="instagram" className="ig">
      <div className="ig-petals" aria-hidden="true"></div>
      <div className="ig-inner">
        <div className="ig-head">
          <svg ref={glyphRef} className="ig-glyph" style={{ transform: 'rotate(' + spin.toFixed(2) + 'deg)' }} viewBox="0 0 24 24" fill="none" stroke="#F774A0" strokeWidth="1.7" aria-hidden="true">
            <rect x="2.5" y="2.5" width="19" height="19" rx="5.5"/>
            <circle cx="12" cy="12" r="4.6"/>
            <circle cx="17.4" cy="6.6" r="1.2" fill="#F774A0" stroke="none"/>
          </svg>
          <h2 className="ig-title">Instagram</h2>
        </div>

        <div className="ig-fan">
          {decks.map((d, i) => {
            const src = d.srcs[(step + i) % d.srcs.length];
            return (
              <figure className="ig-card" key={i} style={{ '--rot': d.rot + 'deg' }}>
                <div className="ig-slot">
                  <img src={src} key={src} alt={['manicure gel Braga','tratamento facial Braga','estética unhas Braga'][i] || 'estética Braga'} loading="lazy" referrerPolicy="no-referrer" />
                </div>

                {i === 1 && (
                  <div className="ig-foot">
                    <span className="ig-badge">
                      <BrandLogo variant="medallion" style={{ width: '100%', height: '100%' }} />
                    </span>
                    <p className="ig-handle">@belezaapinkk</p>
                    <a className="ig-btn" href="https://www.instagram.com/belezaapinkk" target="_blank" rel="noopener">SEGUIR</a>
                  </div>
                )}
              </figure>
            );
          })}
        </div>
      </div>

      <style>{`
        .ig{position:relative;background:#FCE8EE;padding:clamp(60px,7.5vw,110px) 0 clamp(60px,7.5vw,100px);overflow:hidden}
        .ig-petals{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 50% 50%,#F774A0 0 1.6px,transparent 1.7px),radial-gradient(circle at 50% 50%,#F774A0 0 1.1px,transparent 1.2px);background-size:64px 64px,64px 64px;background-position:0 0,32px 32px}
        .ig-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}

        .ig-head{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.6vw,26px);flex-wrap:nowrap}
        .ig-glyph{width:clamp(46px,6.4vw,104px);height:clamp(46px,6.4vw,104px);flex:0 0 auto;will-change:transform}
        @media (prefers-reduced-motion:reduce){.ig-glyph{transform:none!important}}
        .ig-title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(44px,8.4vw,130px);line-height:1;color:#F774A0;letter-spacing:-.02em;margin:0}

        .ig-fan{display:flex;justify-content:center;align-items:flex-start;margin:clamp(34px,4.2vw,60px) 0 0;width:100%;padding:0 clamp(12px,2vw,28px)}
        .ig-card{margin:0;flex:0 0 auto;width:clamp(180px,25vw,380px);background:#FFFFFF;border-radius:1rem;padding:10px;transform:rotate(var(--rot));box-shadow:14px 14px 0 #F774A0,0 18px 44px rgba(247,116,160,.24);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
        .ig-card:nth-child(1){margin-right:clamp(-40px,-3.4vw,-16px);margin-top:clamp(16px,2.6vw,44px)}
        .ig-card:nth-child(3){margin-left:clamp(-40px,-3.4vw,-16px);margin-top:clamp(16px,2.6vw,44px)}
        .ig-card:nth-child(2){z-index:2;width:clamp(200px,27vw,410px)}
        .ig-card:hover{transform:rotate(var(--rot)) translateY(-12px) scale(1.03);box-shadow:18px 18px 0 #F774A0,0 30px 60px rgba(247,116,160,.32);z-index:3}
        .ig-slot{aspect-ratio:4/5;background:#FCE8EE;border-radius:.6rem;display:flex;align-items:center;justify-content:center;overflow:hidden}
        .ig-slot img{width:100%;height:100%;object-fit:cover;display:block;animation:igSwap .9s ease}
        @keyframes igSwap{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

        .ig-foot{position:relative;padding:clamp(44px,4vw,58px) 14px clamp(16px,1.6vw,22px);display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.4vw,18px)}
        .ig-badge{position:absolute;top:clamp(-34px,-3vw,-24px);left:50%;transform:translateX(-50%);width:clamp(62px,6.4vw,92px);height:clamp(62px,6.4vw,92px);border-radius:999px;overflow:hidden;background:#FFFFFF;box-shadow:0 8px 22px rgba(247,116,160,.28);display:block}
        .ig-handle{font-family:'Lato',system-ui,sans-serif;font-size:clamp(17px,1.7vw,24px);font-weight:700;color:#2a1e23;margin:0}
        .ig-btn{font-family:'Lato',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;background:#F774A0;color:#FFFFFF;padding:13px 36px;border-radius:.75rem;transition:transform .25s,box-shadow .25s}
        .ig-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(247,116,160,.38)}

        @media (max-width:640px){
          .ig-fan{flex-direction:column;align-items:center;gap:22px}
          .ig-card,.ig-card:nth-child(2){width:min(78%,300px)}
          .ig-card:nth-child(1),.ig-card:nth-child(3){margin:0}
          .ig-card{box-shadow:10px 10px 0 #F774A0,0 14px 34px rgba(247,116,160,.22)}
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ServicesMarquee, LocationHours, InstagramSection });