/* ============================================
   SERVICE DETAIL SHELL — individual service pages
   ============================================ */

function ServiceShell({ slug, eyebrow, title, italic, tagline, description, photoTone, photoLabel, sections, faq, related, ctaText = 'Agendar este serviço' }) {
  return (
    <>
      <Header active="services" />
      <main>
        <section style={{background:'var(--paper)', paddingTop:48, paddingBottom:32}}>
          <div className="container">
            <a href="../servicos.html" style={{display:'inline-flex', alignItems:'center', gap:6, color:'var(--muted)', fontSize:14, fontWeight:600, marginBottom:24}}>
              ← Todos os serviços
            </a>
            <div className="svc-hero">
              <div>
                <Reveal><span className="eyebrow">{eyebrow}</span></Reveal>
                <Reveal delay={120}>
                  <h1 className="display-xl" style={{margin:'24px 0 16px'}}>
                    {title} <span className="italic">{italic}</span>
                  </h1>
                </Reveal>
                <Reveal delay={220}>
                  <p className="body-lg" style={{maxWidth:560}}>{tagline}</p>
                </Reveal>
                <Reveal delay={340}>
                  <div style={{display:'flex', gap:12, marginTop:32, flexWrap:'wrap'}}>
                    <a href="../contato.html" className="btn btn-primary btn-lg"><Icon.Calendar size={16}/> {ctaText}</a>
                    <a href="https://wa.me/5511999900000" className="btn btn-ghost btn-lg"><Icon.Whatsapp size={16}/> WhatsApp</a>
                  </div>
                </Reveal>
              </div>
              <Reveal x={32} delay={200}>
                <Photo label={photoLabel} ratio="4/5" tone={photoTone}/>
              </Reveal>
            </div>
          </div>
          <style>{`
            .svc-hero { display:grid; gap:48px; grid-template-columns:1fr; align-items:center; }
            @media (min-width:1024px) { .svc-hero { grid-template-columns:1.2fr 1fr; gap:80px; } }
          `}</style>
        </section>

        <section className="section">
          <div className="container" style={{maxWidth:880}}>
            <Reveal>
              <p className="body-lg" style={{maxWidth:680, marginBottom:48}}>{description}</p>
            </Reveal>
            {sections.map((s, i) => (
              <Reveal key={i} delay={i*80}>
                <section style={{marginBottom:64, paddingTop:32, borderTop:'1px solid var(--line)'}}>
                  <div style={{display:'flex', gap:24, alignItems:'flex-start', flexWrap:'wrap'}} className="svc-row">
                    <div style={{minWidth:140}}>
                      <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.12em', color:'var(--teal-700)'}}>{String(i+1).padStart(2,'0')}</div>
                      <h2 className="display-md" style={{margin:'8px 0 0'}}>{s.title}</h2>
                    </div>
                    <div style={{flex:1, minWidth:280}}>
                      <p className="body" style={{margin:'0 0 16px'}}>{s.body}</p>
                      {s.items && (
                        <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:10}}>
                          {s.items.map((it, j) => (
                            <li key={j} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:15}}>
                              <span style={{color:'var(--teal-500)', flexShrink:0, marginTop:3}}><Icon.Check size={14}/></span> {it}
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </div>
                </section>
              </Reveal>
            ))}
          </div>
        </section>

        {faq && faq.length > 0 && (
          <section className="section" style={{background:'var(--paper)'}}>
            <div className="container" style={{maxWidth:880}}>
              <Reveal>
                <span className="eyebrow">Dúvidas frequentes</span>
                <h2 className="display-lg" style={{margin:'16px 0 32px'}}>Perguntas comuns</h2>
              </Reveal>
              {faq.map((f, i) => (
                <Reveal key={i} delay={i*60}>
                  <details style={{padding:'20px 0', borderTop:'1px solid var(--line)'}}>
                    <summary style={{cursor:'pointer', fontFamily:'var(--font-display)', fontSize:18, fontWeight:600, listStyle:'none', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                      {f.q}
                      <span style={{flexShrink:0, color:'var(--muted)'}}>+</span>
                    </summary>
                    <p style={{margin:'12px 0 0', fontSize:15, color:'var(--ink-soft)', lineHeight:1.6}}>{f.a}</p>
                  </details>
                </Reveal>
              ))}
            </div>
          </section>
        )}

        {related && related.length > 0 && (
          <section className="section">
            <div className="container">
              <Reveal>
                <h2 className="display-lg" style={{margin:'0 0 32px'}}>Serviços relacionados</h2>
              </Reveal>
              <div style={{display:'grid', gap:20, gridTemplateColumns:'1fr'}} className="rel-grid">
                {related.map((r, i) => (
                  <Reveal key={i} delay={i*100}>
                    <a href={r.href} className="card card-pad" style={{display:'flex', flexDirection:'column', height:'100%'}}>
                      <h3 className="display-sm" style={{margin:'0 0 8px'}}>{r.title}</h3>
                      <p className="body-sm" style={{margin:'0 0 16px'}}>{r.desc}</p>
                      <span className="btn-link" style={{marginTop:'auto'}}>Ver detalhes →</span>
                    </a>
                  </Reveal>
                ))}
              </div>
              <style>{`
                @media (min-width:768px) { .rel-grid { grid-template-columns:repeat(3, 1fr) !important; } }
              `}</style>
            </div>
          </section>
        )}

        <CTAStrip />
      </main>
      <Footer />
      <GlobalWidgets />
    </>
  );
}

Object.assign(window, { ServiceShell });