// Serviços · Como funciona · Personalização · Segmentos

// ─────────────────────────────────────────────────────────────
// Serviços — 8 cards
// ─────────────────────────────────────────────────────────────
function Servicos({ copy, accent }) {
  const c = copy.serv;
  return (
    <Section id="servicos" py={96}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          caption={c.caption}
          accent={accent} />
        

        <div data-grid-collapse style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 16
        }}>
          {c.items.map((item, i) =>
          <article key={i} style={{
            background: T.night,
            border: `1px solid ${T.hairline}`,
            padding: '32px 28px 28px',
            minHeight: 280,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'stretch',
            gap: 14,
            transition: 'background .2s ease',
            position: 'relative'
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = T.night2}
          onMouseLeave={(e) => e.currentTarget.style.background = T.night}>
            
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <Icon kind={item.icon} accent={accent} color={T.cream} size={36} />
                <Kicker style={{ color: accent }}>{item.n}</Kicker>
              </div>

              <h3 style={{
              fontFamily: T.sans, fontWeight: 400, fontSize: 24,
              letterSpacing: '-0.02em', lineHeight: 1.1,
              margin: 0, color: T.cream
            }}>{item.name}</h3>

              <p style={{
              fontSize: 14, lineHeight: 1.5, color: T.bone,
              margin: 0, textWrap: 'pretty', flex: 1
            }}>{item.desc}</p>
            </article>
          )}
        </div>
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// Como funciona — 4 passos horizontais
// ─────────────────────────────────────────────────────────────
function ComoFunciona({ copy, accent }) {
  const c = copy.how;
  return (
    <Section id="como-funciona" py={96} bg={T.night} style={{ borderTop: `1px solid ${T.hairline}` }}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          accent={accent} />
        

        {/* Pipeline horizontal */}
        <div style={{ position: 'relative', marginTop: 24, marginBottom: 56 }}>
          {/* base line */}
          <div style={{
            position: 'absolute', top: 36, left: '6%', right: '6%',
            height: 1, background: T.hairline
          }} />
          <div style={{
            position: 'absolute', top: 36, left: '6%', width: '88%',
            height: 1, backgroundImage: `linear-gradient(to right, ${accent} 0, ${accent} 8px, transparent 8px, transparent 16px)`,
            backgroundSize: '16px 1px',
            opacity: 0.6
          }} />

          <div data-grid-collapse style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
            {c.steps.map((s, i) =>
            <div key={i} style={{
              position: 'relative'
            }}>
                {/* node */}
                <div style={{
                width: 72, height: 72,
                background: T.night, border: `1.5px solid ${i === 0 ? accent : T.hairline}`,
                borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 20, position: 'relative', zIndex: 1,
                transition: 'border-color .2s ease'
              }}>
                  <Icon kind={s.icon} accent={accent} color={i === 0 ? accent : T.cream} size={32} />
                  {i === 0 &&
                <span style={{
                  position: 'absolute', top: -4, right: -4,
                  width: 14, height: 14, borderRadius: '50%', background: accent,
                  animation: 'pulse9j 1.6s ease-in-out infinite',
                  boxShadow: `0 0 12px ${accent}88`
                }} />
                }
                </div>
                <Kicker style={{ marginBottom: 8 }}>{s.n} / 04</Kicker>
                <h3 style={{
                fontFamily: T.sans, fontWeight: 400, fontSize: 26,
                letterSpacing: '-0.025em', lineHeight: 1.1,
                margin: '0 0 14px', color: T.cream,
                maxWidth: 240
              }}>{s.name}</h3>
                <p style={{
                fontSize: 14, lineHeight: 1.55, color: T.bone,
                margin: 0, textWrap: 'pretty', maxWidth: 240
              }}>{s.desc}</p>
              </div>
            )}
          </div>
        </div>
      </Container>
    </Section>);

}

// ─────────────────────────────────────────────────────────────
// Personalização — configurador inline
// ─────────────────────────────────────────────────────────────
function Personalizacao({ copy, accent, waLink }) {
  const c = copy.perso;
  const [idx, setIdx] = React.useState(0);

  const screenContents = ['logo', 'video', 'neutral'];
  const bgVariants = ['wood', 'concrete', 'black', 'purple'];
  const shelfVariants = ['books', 'plants', 'vinyl', 'catalog'];

  // Slides pré-configurados — combos curados que rotam automaticamente
  const slides = React.useMemo(() => [
  { light: c.lights[0], bg: 0, shelf: 0, screen: 0, photo: 'assets/photos/main-room.jpg' },
  { light: c.lights[3], bg: 3, shelf: 2, screen: 1, photo: 'assets/photos/lounge.jpg' },
  { light: c.lights[2], bg: 1, shelf: 1, screen: 2, photo: 'assets/photos/in-action.jpg' },
  { light: c.lights[1], bg: 0, shelf: 3, screen: 0, photo: 'assets/photos/main-room.jpg' },
  { light: c.lights[5], bg: 2, shelf: 2, screen: 1, photo: 'assets/photos/lounge.jpg' }],
  [c.lights]);

  // Auto-cycle every 3.2s
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % slides.length), 3200);
    return () => clearInterval(t);
  }, [slides.length]);

  const s = slides[idx];

  return (
    <Section id="cenario" py={96} bg={T.night2} style={{ borderTop: `1px solid ${T.hairline}`, borderBottom: `1px solid ${T.hairline}` }}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          caption={c.caption}
          accent={accent} />
        

        {/* Slideshow — preview cycling */}
        <div style={{
          background: T.night, border: `1px solid ${T.hairline}`,
          padding: '24px 24px 18px', position: 'relative', maxWidth: 980, margin: '0 auto'
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <Kicker>SLIDE {String(idx + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')} · STAGE A</Kicker>
            <Kicker style={{ color: accent }}>● AUTO</Kicker>
          </div>
          <div style={{ position: 'relative' }}>
            <MediaSlot
              key={idx}
              kind="image"
              src={s.photo}
              aspect="16/9"
              accent={accent}
              showChrome={false} />
          </div>
          {/* progress dots */}
          <div style={{
            display: 'flex', justifyContent: 'center', gap: 8,
            marginTop: 16, paddingTop: 14, borderTop: `1px solid ${T.hairline}`
          }}>
            {slides.map((_, i) =>
            <button key={i} onClick={() => setIdx(i)} style={{
              width: i === idx ? 28 : 8, height: 8,
              background: i === idx ? accent : T.hairline,
              border: 'none', borderRadius: 4, cursor: 'pointer',
              transition: 'width .25s ease, background .25s ease', padding: 0
            }} aria-label={`Slide ${i + 1}`} />
            )}
          </div>
        </div>

        {/* CTA */}
        <div style={{ textAlign: 'center', marginTop: 36 }}>
          <a href={waLink} target="_blank" rel="noopener" style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            padding: '16px 24px',
            background: accent, color: T.ink,
            fontFamily: T.mono, fontSize: 12, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            textDecoration: 'none', borderRadius: 4,
            transition: 'transform .15s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
            
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.ink, animation: 'pulse9j 1.6s ease-in-out infinite' }} />
            {c.cta}
          </a>
        </div>
      </Container>
    </Section>);

}

function ConfigRow({ label, options, value, onChange, accent }) {
  return (
    <div>
      <Kicker style={{ marginBottom: 10 }}>{label}</Kicker>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: T.hairline, border: `1px solid ${T.hairline}` }}>
        {options.map((opt, i) =>
        <button key={i} onClick={() => onChange(i)} style={{
          background: value === i ? T.night2 : T.night,
          border: 'none', padding: '12px 14px',
          fontFamily: T.mono, fontSize: 12, color: value === i ? T.cream : T.bone,
          letterSpacing: '0.04em', textAlign: 'left', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 12,
          transition: 'background .15s ease, color .15s ease'
        }}>
            <span style={{
            width: 10, height: 10, borderRadius: '50%',
            border: `1.5px solid ${value === i ? accent : T.hairline}`,
            background: value === i ? accent : 'transparent',
            flexShrink: 0
          }} />
            <span style={{ flex: 1 }}>{opt}</span>
            <span style={{
            fontSize: 10, color: T.fog, letterSpacing: '0.22em'
          }}>{String(i + 1).padStart(2, '0')}</span>
          </button>
        )}
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────────
// Segmentos — 4 cards link
// ─────────────────────────────────────────────────────────────
function Segmentos({ copy, accent }) {
  const c = copy.segs;
  return (
    <Section id="segmentos" py={96}>
      <Container>
        <SectionHead
          kicker={c.kicker}
          title1={c.title1} title1Hi={c.title1Hi} title1Punct={c.title1Punct}
          caption={c.caption}
          accent={accent} />
        

        <div data-grid-collapse style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16
        }}>
          {c.cards.map((card, i) =>
          <a key={i} href={card.link} style={{
            background: T.night, color: T.cream, textDecoration: 'none',
            border: `1px solid ${T.hairline}`,
            padding: '32px 28px 28px',
            display: 'flex', flexDirection: 'column',
            gap: 16,
            minHeight: 280,
            transition: 'background .2s ease',
            position: 'relative'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.background = T.night2;e.currentTarget.querySelector('[data-arrow]').style.transform = 'translateX(6px)';}}
          onMouseLeave={(e) => {e.currentTarget.style.background = T.night;e.currentTarget.querySelector('[data-arrow]').style.transform = 'translateX(0)';}}>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <Icon kind={card.icon} accent={accent} color={T.cream} size={36} />
                <Kicker style={{ color: accent }}>{card.tag}</Kicker>
              </div>

              <h3 style={{
              fontFamily: T.sans, fontWeight: 400, fontSize: 22,
              letterSpacing: '-0.02em', lineHeight: 1.15,
              margin: 0, color: T.cream
            }}>{card.name}</h3>

              <p style={{
              lineHeight: 1.5, color: T.bone,
              margin: 0, textWrap: 'pretty', flex: 1,
              fontSize: 14
            }}>{card.desc}</p>

              <div style={{
              marginTop: 'auto', paddingTop: 16, borderTop: `1px solid ${T.hairline}`,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between'
            }}>
                <span style={{
                fontFamily: T.mono, fontSize: 11, color: T.cream, fontWeight: 600,
                letterSpacing: '0.22em', textTransform: 'uppercase'
              }}>{card.cta}</span>
                <span data-arrow style={{
                fontFamily: T.mono, fontSize: 18, color: accent,
                transition: 'transform .2s ease'
              }}>→</span>
              </div>
            </a>
          )}
        </div>
      </Container>
    </Section>);

}

Object.assign(window, { Servicos, ComoFunciona, Personalizacao, Segmentos, ConfigRow });