/* Cantinho Kids — seções: Header, Hero, Pilares, Carrossel */

/* ---------------- HEADER ---------------- */
function Header({ onOpen, scrolled }) {
  return (
    <header className="header" data-scrolled={scrolled}>
      <div className="wrap header__inner">
        <a className="brand" href="#inicio" onClick={(e) => { e.preventDefault(); scrollToId('inicio'); }} aria-label="Cantinho Kids, ir para o início">
          <BrandLogo size={46} />
          <span className="brand__name">Cantinho Kids <small>Moda Circular</small></span>
        </a>
        <nav className="nav" aria-label="Navegação principal">
          {NAV.map((n) => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => { e.preventDefault(); scrollToId(n.id); }}>{n.label}</a>
          ))}
        </nav>
        <a className="btn btn--cta header__cta" href={waLink('Oi! Vim pelo site da Cantinho Kids 💚')} target="_blank" rel="noopener">
          <BrandIcon name="whatsapp" /> Chamar no WhatsApp
        </a>
        <button className="menu-btn" onClick={onOpen} aria-label="Abrir menu" aria-haspopup="true">
          <Icon name="menu" />
        </button>
      </div>
    </header>
  );
}

function Drawer({ open, onClose }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  return (
    <React.Fragment>
      <div className="drawer-backdrop" data-open={open} onClick={onClose} />
      <aside className="drawer" data-open={open} aria-hidden={!open} aria-label="Menu">
        <div className="drawer__top">
          <a className="brand" href="#inicio" onClick={(e) => { e.preventDefault(); onClose(); scrollToId('inicio'); }}>
            <BrandLogo size={44} />
            <span className="brand__name">Cantinho Kids <small>Moda Circular</small></span>
          </a>
          <button className="menu-btn" onClick={onClose} aria-label="Fechar menu"><Icon name="x" /></button>
        </div>
        <nav aria-label="Navegação">
          {NAV.map((n) => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => { e.preventDefault(); onClose(); scrollToId(n.id); }}>
              <Icon name={n.icon} /> {n.label}
            </a>
          ))}
        </nav>
        <div className="drawer__cta">
          <a className="btn btn--cta btn--block" href={waLink('Oi! Vim pelo site da Cantinho Kids 💚')} target="_blank" rel="noopener" onClick={onClose}>
            <BrandIcon name="whatsapp" /> Chamar no WhatsApp
          </a>
        </div>
      </aside>
    </React.Fragment>
  );
}

/* ---------------- HERO ---------------- */
function Hero({ layout }) {
  const editorial = layout === 'editorial';
  return (
    <section id="inicio" className="hero section">
      {/* blobs orgânicos + doodles */}
      <div className="blob blob--soft" style={{ width: 460, height: 460, top: -140, right: -160 }} />
      <div className="blob" style={{ width: 260, height: 260, bottom: -60, left: -110, background: 'var(--green-wash)' }} />
      <div className="doodle float" style={{ width: 30, height: 30, top: 92, right: '6%', '--rot': '12deg' }}><Doodle kind="heart" /></div>
      <div className="doodle float f2 doodle--desk" style={{ width: 30, height: 30, top: '14%', left: '3%', '--rot': '-10deg' }}><Doodle kind="star" /></div>
      <div className="doodle float f3 doodle--desk" style={{ width: 26, height: 26, bottom: '12%', left: '47%', '--rot': '0deg' }}><Doodle kind="spark" /></div>

      {editorial && (
        <div className="hero__band">
          <div style={{ position: 'absolute', inset: 0 }}><Photo photo={CFG.fotos[0]} showBadge={false} /></div>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, var(--brand-cream) 0%, var(--brand-cream) 40%, color-mix(in srgb, var(--brand-cream) 70%, transparent) 60%, transparent 100%)' }} />
        </div>
      )}

      <div className="wrap">
        <div className="hero__inner">
          <div className="hero__copy">
            <span className="eyebrow"><Icon name="recycle" style={{ width: 16, height: 16 }} /> Moda circular infantil em Nova Friburgo</span>
            <h1 className="display">
              Roupinhas que ganham <span className="script" style={{ fontSize: '0.92em' }}>uma nova história</span>
            </h1>
            <p className="lead">
              Peças infantis únicas, escolhidas uma a uma, a preço justo. Moda circular no Centro de Nova Friburgo, pertinho de você.
            </p>
            <div className="hero__actions">
              <a className="btn btn--cta btn--lg" href={waLink('Oi! Vim pelo site da Cantinho Kids 💚 Queria saber mais sobre as peças.')} target="_blank" rel="noopener">
                <BrandIcon name="whatsapp" /> Chamar no WhatsApp
              </a>
              <button className="btn btn--secondary btn--lg" onClick={() => scrollToId('onde')}>
                Onde fica a loja <Icon name="arrowDown" style={{ width: 18, height: 18 }} />
              </button>
            </div>
            <div className="hero__trust">
              <span className="dots">
                <span style={{ background: 'var(--green-wash)' }}><HangerHeart style={{ width: 18 }} /></span>
                <span style={{ background: 'var(--coral-wash)' }}><HangerHeart style={{ width: 18 }} /></span>
                <span style={{ background: 'var(--yellow-wash)' }}><HangerHeart style={{ width: 18 }} /></span>
              </span>
              Famílias de Friburgo já vestem moda circular
            </div>
          </div>

          <div className="hero__art">
            <div className="hero__photo"><Photo photo={CFG.fotoHero} /></div>
            <div className="hero__chip hero__chip--a">
              <span className="ic" style={{ background: 'var(--coral-wash)', color: 'var(--brand-coral)' }}><Icon name="heart" /></span>
              <span><b>Peça única</b><small>a última desse modelo</small></span>
            </div>
            <div className="hero__chip hero__chip--b">
              <span className="ic" style={{ background: 'var(--green-wash)', color: 'var(--brand-green)' }}><Icon name="tag" /></span>
              <span><b>Preço justo</b><small>economia de verdade</small></span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PILARES ---------------- */
const PILARES = [
  { icon: 'sparkles', tint: 'green',  title: 'Peças selecionadas com carinho', text: 'Cada roupinha passa pelas nossas mãos. Só entra o que a gente vestiria nos nossos filhos.' },
  { icon: 'recycle',  tint: 'coral',  title: 'Moda circular que faz a diferença', text: 'Dar nova vida às roupas cuida do bolso e do planeta. Menos desperdício, mais história.' },
  { icon: 'wallet',   tint: 'yellow', title: 'Qualidade e economia pra família', text: 'Peças em ótimo estado por um preço que cabe no orçamento. A criança cresce e o guarda-roupa acompanha.' },
];
function Pilares() {
  const tintColor = { green: 'var(--brand-green)', coral: 'var(--brand-coral)', yellow: '#c98a14' };
  return (
    <section id="moda-circular" className="section section-pad">
      <div className="wrap">
        <div className="head-block center reveal">
          <span className="eyebrow"><Icon name="heart" style={{ width: 16, height: 16 }} /> Por que moda circular</span>
          <h2 className="section-title" style={{ marginTop: 14 }}>Bom pra criança, pro bolso e pro planeta</h2>
          <p className="lead">Três motivos pra vestir seu pequeno com peças que já têm história e ganham mais uma com você.</p>
        </div>
        <div className="pillars">
          {PILARES.map((p, k) => (
            <article className="pillar reveal" key={k} style={{ transitionDelay: `${k * 80}ms` }}>
              <div className="pillar__ic" style={{ background: `var(--${p.tint}-wash)`, color: tintColor[p.tint] }}>
                <Icon name={p.icon} />
              </div>
              <h3>{p.title}</h3>
              <p>{p.text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CARROSSEL ---------------- */
function Carousel({ layout }) {
  const photos = CFG.fotos;
  const [i, setI] = React.useState(0);
  const [maxI, setMaxI] = React.useState(0);
  const trackRef = React.useRef(null);
  const vpRef = React.useRef(null);
  const [tx, setTx] = React.useState(0);
  const hovering = React.useRef(false);
  const touch = React.useRef({ x: 0, dx: 0, active: false });

  const measure = React.useCallback(() => {
    const track = trackRef.current, vp = vpRef.current;
    if (!track || !track.children.length || !vp) return;
    const slideW = track.children[0].getBoundingClientRect().width;
    const visible = Math.max(1, Math.round(vp.getBoundingClientRect().width / slideW));
    const m = Math.max(0, photos.length - visible);
    setMaxI(m);
    setI((cur) => Math.min(cur, m));
    setTx(-Math.min(i, m) * slideW);
  }, [i, photos.length]);

  React.useEffect(() => {
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, [measure, layout]);

  React.useEffect(() => {
    const track = trackRef.current;
    if (!track || !track.children.length) return;
    const slideW = track.children[0].getBoundingClientRect().width;
    setTx(-i * slideW);
  }, [i]);

  // autoplay
  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    const id = setInterval(() => {
      if (hovering.current || document.hidden) return;
      setI((p) => (p >= maxI ? 0 : p + 1));
    }, 4600);
    return () => clearInterval(id);
  }, [maxI]);

  const go = (n) => setI(Math.max(0, Math.min(n, maxI)));
  const next = () => setI((p) => (p >= maxI ? 0 : p + 1));
  const prev = () => setI((p) => (p <= 0 ? maxI : p - 1));

  const onTouchStart = (e) => { touch.current = { x: e.touches[0].clientX, dx: 0, active: true }; };
  const onTouchMove  = (e) => { if (touch.current.active) touch.current.dx = e.touches[0].clientX - touch.current.x; };
  const onTouchEnd   = () => {
    if (!touch.current.active) return;
    const d = touch.current.dx; touch.current.active = false;
    if (d < -40) next(); else if (d > 40) prev();
  };

  return (
    <section id="galeria" className="gallery section section-pad">
      <div className="wrap">
        <div className="gallery__head reveal">
          <div className="head-block">
            <span className="eyebrow"><Icon name="camera" style={{ width: 16, height: 16 }} /> Nosso cantinho por dentro</span>
            <h2 className="section-title" style={{ marginTop: 14 }}>Dá uma espiadinha na vitrine</h2>
            <p className="lead">Achadinhos novos toda semana. Passe pra ver e venha conhecer pessoalmente.</p>
          </div>
          <div className="arrows" role="group" aria-label="Navegar nas fotos">
            <button className="arrow" onClick={prev} aria-label="Foto anterior"><Icon name="chevronLeft" /></button>
            <button className="arrow" onClick={next} aria-label="Próxima foto"><Icon name="chevronRight" /></button>
          </div>
        </div>

        <div className="carousel"
             onMouseEnter={() => (hovering.current = true)}
             onMouseLeave={() => (hovering.current = false)}
             onFocusCapture={() => (hovering.current = true)}
             onBlurCapture={() => (hovering.current = false)}>
          <div className="carousel__viewport" ref={vpRef}
               onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}
               role="region" aria-roledescription="carrossel" aria-label="Fotos da loja">
            <div className="carousel__track" ref={trackRef} style={{ transform: `translateX(${tx}px)` }}>
              {photos.map((ph, k) => (
                <div className="slide" key={k}>
                  <Photo photo={ph} caption={ph.alt} />
                </div>
              ))}
            </div>
          </div>
          <div className="carousel__nav">
            <div className="dots" role="tablist" aria-label="Selecionar foto">
              {Array.from({ length: maxI + 1 }).map((_, k) => (
                <button key={k} aria-current={k === i} aria-label={`Ir para a foto ${k + 1}`} onClick={() => go(k)} />
              ))}
            </div>
            <p style={{ color: 'rgba(255,255,255,.7)', fontSize: 14, fontWeight: 700, margin: 0 }}>
              {String(Math.min(i + 1, photos.length)).padStart(2, '0')} / {String(photos.length).padStart(2, '0')}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Drawer, Hero, Pilares, Carousel });