/* global React */
const ServicePage = ({ service }) => {
  const { Logo, Btn, Eyebrow, GlassCard, Light, Icon } = window;

  return (
    <>
      <a href="#main" style={{ position:'absolute', left:-9999, top:'auto' }}>Saltar al contenido</a>

      <header style={{
        position:'sticky', top:0, zIndex:50, padding:'18px 5vw',
        background:'rgba(23,23,23,.85)', backdropFilter:'blur(16px)',
        borderBottom:'1px solid rgba(255,255,255,.06)',
        display:'flex', alignItems:'center', justifyContent:'space-between',
      }}>
        <a href="../index.html" aria-label="Brotek — Inicio"><Logo height={26}/></a>
        <div style={{display:'flex', gap:24, alignItems:'center'}}>
          <a href="../index.html" style={navLinkStyle}>Inicio</a>
          <a href="../index.html#solucion" style={navLinkStyle}>Servicios</a>
          <a href="../Blog.html" style={navLinkStyle}>Blog</a>
          <a href="../contacto.html" style={navLinkStyle}>Contacto</a>
          <Btn variant="primary" icon="arrow-up-right" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">Agendar diagnóstico técnico gratuito</Btn>
        </div>
      </header>

      <nav aria-label="Breadcrumb" style={{ padding:'24px 5vw 0', maxWidth:1280, margin:'0 auto',
        fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-subtle)', letterSpacing:'.06em' }}>
        <a href="../index.html" style={{color:'inherit', textDecoration:'none'}}>Inicio</a>
        <span style={{margin:'0 10px'}}>/</span>
        <a href="../index.html#solucion" style={{color:'inherit', textDecoration:'none'}}>Servicios</a>
        <span style={{margin:'0 10px'}}>/</span>
        <span style={{color:'var(--fg)'}}>{service.title}</span>
      </nav>

      <main id="main">
        {/* Hero with H1 */}
        <section style={{ position:'relative', padding:'80px 5vw 64px', overflow:'hidden' }}>
          <Light color={service.color} size={900} top="-200px" right="-100px" opacity={.35} blur={80}/>
          <div style={{ maxWidth:1280, margin:'0 auto', position:'relative', zIndex:1,
            display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48, alignItems:'center' }}>
            <div>
              <Eyebrow color={service.color}>{service.eyebrow}</Eyebrow>
              <h1 style={{ marginTop:18, marginBottom:24, fontFamily:'var(--font-display)', fontWeight:600,
                fontSize:'clamp(34px, 4.4vw, 60px)', lineHeight:1.06, letterSpacing:'-0.025em', color:'var(--fg)' }}>
                {service.h1} <span style={{color:service.color}}>| Brotek</span>
              </h1>
              <p style={{ fontSize:18, lineHeight:1.55, color:'var(--fg-muted)', maxWidth:580, marginBottom:28 }}>{service.lead}</p>
              <div style={{ display:'flex', gap:14, flexWrap:'wrap' }}>
                <Btn variant="primary" icon="arrow-up-right" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">Agendar diagnóstico técnico gratuito</Btn>
                <Btn variant="ghost" icon="arrow-right" href="../index.html">Volver a la home</Btn>
              </div>
            </div>
            <div style={{ position:'relative', height:380, display:'flex', alignItems:'center', justifyContent:'center' }}>
              {/* Service-specific sticker composition */}
              {(() => {
                const stickerSets = {
                  'ethical-hacking': [
                    { color:'#EC4D2A', label:'Pentest', sublabel:'OFFENSIVE·01', rotate:-12, pos:{top:20,left:20}, size:130 },
                    { color:'#A335E7', label:'OWASP', sublabel:'WSTG·v4.2', rotate:8, pos:{top:60,right:10}, size:115 },
                    { color:'#EC008C', label:'OSCP', sublabel:'CERTIFIED', rotate:-5, pos:{bottom:90,left:50}, size:120 },
                    { color:'#FB881D', label:'CVSS 3.1', sublabel:'SCORING', rotate:10, pos:{bottom:30,right:40}, size:125 },
                  ],
                  'offensive-security': [
                    { color:'#EC008C', label:'Red Team', sublabel:'ADVERSARY', rotate:-10, pos:{top:20,left:30}, size:135 },
                    { color:'#EC4D2A', label:'MITRE', sublabel:'ATT&CK', rotate:7, pos:{top:70,right:0}, size:120 },
                    { color:'#A335E7', label:'Phishing', sublabel:'CAMPAIGN', rotate:-6, pos:{bottom:90,left:60}, size:115 },
                    { color:'#3551E7', label:'C2', sublabel:'COBALT·STRIKE', rotate:9, pos:{bottom:30,right:30}, size:120 },
                  ],
                  'defensive-team': [
                    { color:'#3551E7', label:'Blue Team', sublabel:'DEFENSIVE·03', rotate:-10, pos:{top:20,left:20}, size:135 },
                    { color:'#35E747', label:'SOC 24/7', sublabel:'MONITORING', rotate:8, pos:{top:70,right:10}, size:120 },
                    { color:'#35E7C7', label:'SIEM', sublabel:'CORRELATION', rotate:-5, pos:{bottom:90,left:60}, size:115 },
                    { color:'#A335E7', label:'Hunting', sublabel:'PROACTIVE', rotate:10, pos:{bottom:30,right:30}, size:125 },
                  ],
                  'devsecops': [
                    { color:'#A335E7', label:'DevSecOps', sublabel:'PIPELINE·04', rotate:-12, pos:{top:20,left:20}, size:140 },
                    { color:'#3551E7', label:'SAST', sublabel:'STATIC·SCAN', rotate:7, pos:{top:70,right:0}, size:115 },
                    { color:'#FB881D', label:'SCA', sublabel:'DEPENDENCIES', rotate:-6, pos:{bottom:90,left:50}, size:120 },
                    { color:'#35E747', label:'CI / CD', sublabel:'GITHUB·GITLAB', rotate:9, pos:{bottom:30,right:40}, size:125 },
                  ],
                  'grc': [
                    { color:'#EC008C', label:'ISO 27001', sublabel:'CERTIFIED', rotate:-10, pos:{top:20,left:30}, size:135 },
                    { color:'#A335E7', label:'SOC 2', sublabel:'TYPE·II', rotate:8, pos:{top:70,right:10}, size:115 },
                    { color:'#3551E7', label:'PCI DSS', sublabel:'v4.0', rotate:-5, pos:{bottom:90,left:60}, size:115 },
                    { color:'#CFC5CB', label:'NIST CSF', sublabel:'GOVERNANCE', rotate:10, pos:{bottom:30,right:30}, size:125 },
                  ],
                  'prevencion-de-riesgos': [
                    { color:'#FB881D', label:'BIA', sublabel:'IMPACT·ANALYSIS', rotate:-10, pos:{top:20,left:20}, size:130 },
                    { color:'#EC4D2A', label:'BCP', sublabel:'CONTINUITY', rotate:8, pos:{top:70,right:10}, size:115 },
                    { color:'#3551E7', label:'DRP', sublabel:'DISASTER·REC', rotate:-5, pos:{bottom:90,left:60}, size:120 },
                    { color:'#A335E7', label:'FAIR', sublabel:'QUANTITATIVE', rotate:10, pos:{bottom:30,right:30}, size:125 },
                  ],
                  'cyber-threat-intelligence': [
                    { color:'#35E7C7', label:'Dark Web', sublabel:'MONITORING', rotate:-12, pos:{top:20,left:20}, size:135 },
                    { color:'#EC008C', label:'OSINT', sublabel:'INTELLIGENCE', rotate:8, pos:{top:70,right:0}, size:115 },
                    { color:'#A335E7', label:'Brand Protect', sublabel:'TAKEDOWN', rotate:-6, pos:{bottom:90,left:50}, size:125 },
                    { color:'#FB881D', label:'Data Leak', sublabel:'CREDENTIALS', rotate:10, pos:{bottom:30,right:30}, size:120 },
                  ],
                };
                const stickers = stickerSets[service.slug] || stickerSets['ethical-hacking'];
                return (
                  <>
                    {stickers.map((s, i) => (
                      <div key={i} style={{ position:'absolute', ...s.pos, zIndex: 2 }}>
                        <window.Sticker color={s.color} label={s.label} sublabel={s.sublabel}
                          rotate={s.rotate} size={s.size}/>
                      </div>
                    ))}
                    <div style={{ width:240, height:240, borderRadius:'50%',
                      background:`radial-gradient(circle, ${service.color}88, ${service.color}22 50%, transparent 75%)`,
                      filter:'blur(36px)' }}/>
                  </>
                );
              })()}
            </div>
          </div>
        </section>

        {/* What is — search intent H2 */}
        {service.whatIs && (
          <section style={{ padding:'48px 5vw', maxWidth:1100, margin:'0 auto' }}>
            <h2 style={{ fontFamily:'var(--font-display)', fontWeight:600,
              fontSize:'clamp(24px, 2.6vw, 38px)', lineHeight:1.15, letterSpacing:'-0.02em', color:'var(--fg)', marginBottom:24 }}>
              {service.whatIs.h2}
            </h2>
            {service.whatIs.paragraphs.map((p, i) => (
              <p key={i} style={{ fontSize:17, lineHeight:1.7, color:'var(--fg-muted)', marginBottom:16, maxWidth:820 }}>{p}</p>
            ))}
          </section>
        )}

        {/* How we do it — E-E-A-T expertise */}
        {service.howWeDoIt && (
          <section style={{ padding:'48px 5vw', background:'rgba(255,255,255,.02)' }}>
            <div style={{ maxWidth:1100, margin:'0 auto' }}>
              <Eyebrow color={service.color}>El método Brotek</Eyebrow>
              <h2 style={{ marginTop:14, fontFamily:'var(--font-display)', fontWeight:600,
                fontSize:'clamp(24px, 2.6vw, 38px)', lineHeight:1.15, letterSpacing:'-0.02em', color:'var(--fg)', marginBottom:24 }}>
                {service.howWeDoIt.h2}
              </h2>
              {service.howWeDoIt.paragraphs.map((p, i) => (
                <p key={i} style={{ fontSize:17, lineHeight:1.7, color:'var(--fg-muted)', marginBottom:16, maxWidth:820 }}>{p}</p>
              ))}
            </div>
          </section>
        )}

        {/* Intelligence cycle (CTI-specific, optional) */}
        {service.cycle && (
          <section style={{ padding:'72px 5vw', maxWidth:1280, margin:'0 auto' }}>
            <Eyebrow color={service.color}>Ciclo de Inteligencia</Eyebrow>
            <h2 style={{ marginTop:14, marginBottom:36, fontFamily:'var(--font-display)', fontWeight:600,
              fontSize:'clamp(24px, 2.6vw, 38px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
              {service.cycle.h2}
            </h2>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16 }}>
              {service.cycle.steps.map((s, i) => (
                <div key={i} style={{ position:'relative',
                  background:`linear-gradient(135deg, ${service.color}18, rgba(255,255,255,.02))`,
                  border:`1px solid ${service.color}33`, borderRadius:20, padding:24, overflow:'hidden' }}>
                  <div style={{ position:'absolute', top:14, right:18, fontFamily:'var(--font-mono)',
                    fontSize:48, fontWeight:700, color:`${service.color}22`, letterSpacing:'-0.04em' }}>
                    {String(i+1).padStart(2,'0')}
                  </div>
                  <div style={{ position:'relative', zIndex:1 }}>
                    <h3 style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:18, color:service.color, marginBottom:10 }}>{s.title}</h3>
                    <p style={{ fontSize:14, lineHeight:1.6, color:'var(--fg-muted)' }}>{s.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Pillars (CTI-specific, optional) */}
        {service.pillars && (
          <section style={{ padding:'72px 5vw', background:'rgba(255,255,255,.02)' }}>
            <div style={{ maxWidth:1280, margin:'0 auto' }}>
              <Eyebrow color={service.color}>Pilares</Eyebrow>
              <h2 style={{ marginTop:14, marginBottom:36, fontFamily:'var(--font-display)', fontWeight:600,
                fontSize:'clamp(24px, 2.6vw, 38px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
                {service.pillars.h2}
              </h2>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16 }}>
                {service.pillars.items.map((p, i) => (
                  <GlassCard key={i} radius={20} hover={false} style={{ padding:28, position:'relative' }}>
                    <div style={{ width:40, height:40, borderRadius:12, marginBottom:16,
                      background:`linear-gradient(135deg, ${service.color}, ${service.color}55)`,
                      display:'flex', alignItems:'center', justifyContent:'center',
                      fontFamily:'var(--font-mono)', fontSize:14, fontWeight:600, color:'#0a0a0a' }}>
                      0{i+1}
                    </div>
                    <h3 style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:17, color:'var(--fg)', marginBottom:10, lineHeight:1.3 }}>{p.title}</h3>
                    <p style={{ fontSize:14, lineHeight:1.6, color:'var(--fg-muted)' }}>{p.desc}</p>
                  </GlassCard>
                ))}
              </div>
            </div>
          </section>
        )}

        {/* Benefits AR — local SEO */}
        {service.benefitsAR && (
          <section style={{ padding:'64px 5vw', maxWidth:1280, margin:'0 auto' }}>
            <Eyebrow color={service.color}>Argentina</Eyebrow>
            <h2 style={{ marginTop:14, marginBottom:36, fontFamily:'var(--font-display)', fontWeight:600,
              fontSize:'clamp(24px, 2.6vw, 38px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
              {service.benefitsAR.h2}
            </h2>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16 }}>
              {service.benefitsAR.bullets.map((b, i) => (
                <GlassCard key={i} radius={20} hover={false} style={{ padding:24 }}>
                  <h3 style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:17,
                    color:service.color, marginBottom:10 }}>{b.t}</h3>
                  <p style={{ fontSize:14, lineHeight:1.6, color:'var(--fg-muted)' }}>{b.d}</p>
                </GlassCard>
              ))}
            </div>
            <p style={{ marginTop:24, fontSize:14, color:'var(--fg-subtle)', fontFamily:'var(--font-mono)', letterSpacing:'.04em' }}>
              Brotek S.A. · Av. Dorrego 864, CABA, Argentina
            </p>
          </section>
        )}

        {/* Deliverables */}
        <section style={{ padding:'48px 5vw', background:'rgba(255,255,255,.02)' }}>
          <div style={{ maxWidth:1280, margin:'0 auto' }}>
            <Eyebrow color={service.color}>Entregables</Eyebrow>
            <h2 style={{ marginTop:14, marginBottom:36, fontFamily:'var(--font-display)', fontWeight:600,
              fontSize:'clamp(24px, 2.4vw, 36px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
              Qué recibís al contratar este servicio
            </h2>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:16 }}>
              {service.deliverables.map((d, i) => (
                <GlassCard key={i} radius={20} hover={false} style={{ padding:24 }}>
                  <div style={{ width:36, height:36, borderRadius:10, marginBottom:14,
                    background:`linear-gradient(135deg, ${service.color}, ${service.color}66)`,
                    display:'flex', alignItems:'center', justifyContent:'center', color:'#fff' }}>
                    <Icon name="check" size={18}/>
                  </div>
                  <h3 style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:16, color:'var(--fg)', marginBottom:8 }}>{d.title}</h3>
                  <p style={{ fontSize:14, lineHeight:1.55, color:'var(--fg-muted)' }}>{d.desc}</p>
                </GlassCard>
              ))}
            </div>
          </div>
        </section>

        {/* Methodology */}
        <section style={{ padding:'80px 5vw', maxWidth:1280, margin:'0 auto' }}>
          <Eyebrow>Metodología</Eyebrow>
          <h2 style={{ marginTop:14, marginBottom:36, fontFamily:'var(--font-display)', fontWeight:600,
            fontSize:'clamp(24px, 2.4vw, 36px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
            Cómo trabajamos paso a paso
          </h2>
          <ol style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:1,
            background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.06)',
            borderRadius:20, overflow:'hidden' }}>
            {service.methodology.map((m, i) => (
              <li key={i} style={{ background:'var(--brotek-black)', padding:'28px 32px',
                display:'grid', gridTemplateColumns:'80px 1fr 2fr', gap:32, alignItems:'baseline' }}>
                <span style={{ fontFamily:'var(--font-mono)', fontSize:12, color:service.color, letterSpacing:'.14em' }}>
                  PASO {String(i+1).padStart(2,'0')}
                </span>
                <h3 style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:18, color:'var(--fg)' }}>{m.title}</h3>
                <p style={{ fontSize:15, lineHeight:1.6, color:'var(--fg-muted)' }}>{m.desc}</p>
              </li>
            ))}
          </ol>
        </section>

        {/* FAQ */}
        {service.faqs && service.faqs.length > 0 && (
          <section style={{ padding:'48px 5vw 80px', maxWidth:900, margin:'0 auto' }}>
            <Eyebrow>Preguntas frecuentes</Eyebrow>
            <h2 style={{ marginTop:14, marginBottom:32, fontFamily:'var(--font-display)', fontWeight:600,
              fontSize:'clamp(24px, 2.4vw, 36px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
              {service.title} — preguntas frecuentes
            </h2>
            {service.faqs.map((q, i) => (
              <details key={i} style={{ borderTop:'1px solid rgba(255,255,255,.08)', padding:'20px 0' }}>
                <summary style={{ cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:500,
                  fontSize:17, color:'var(--fg)', listStyle:'none', display:'flex',
                  justifyContent:'space-between', alignItems:'center', gap:16 }}>
                  {q.q}
                  <span style={{color:service.color, fontFamily:'var(--font-mono)', fontSize:14}}>+</span>
                </summary>
                <p style={{ marginTop:12, fontSize:15, lineHeight:1.65, color:'var(--fg-muted)' }}>{q.a}</p>
              </details>
            ))}
          </section>
        )}

        {/* Related services — internal linking */}
        {service.related && service.related.length > 0 && (
          <section style={{ padding:'48px 5vw 64px', maxWidth:1280, margin:'0 auto' }}>
            <Eyebrow>Servicios relacionados</Eyebrow>
            <h2 style={{ marginTop:14, marginBottom:24, fontFamily:'var(--font-display)', fontWeight:600,
              fontSize:'clamp(22px, 2.2vw, 32px)', letterSpacing:'-0.02em', color:'var(--fg)' }}>
              Seguí explorando los servicios de Brotek
            </h2>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:16 }}>
              {service.related.map(r => (
                <a key={r.slug} href={`${r.slug}.html`} style={{ textDecoration:'none' }}>
                  <GlassCard radius={20} style={{ padding:24, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:17, color:'var(--fg)' }}>{r.label}</span>
                    <Icon name="arrow-up-right" size={18} color="var(--fg-muted)"/>
                  </GlassCard>
                </a>
              ))}
            </div>
            <p style={{ marginTop:24, fontSize:14, color:'var(--fg-muted)' }}>
              ¿Buscás algo más amplio? Volvé a <a href="../index.html" style={{color:service.color, textDecoration:'underline'}}>la home de Brotek</a> o consultá nuestros <a href="../Blog.html" style={{color:service.color, textDecoration:'underline'}}>artículos del blog</a>.
            </p>
          </section>
        )}

        {/* Final CTA */}
        <section style={{ padding:'64px 5vw 96px' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', position:'relative',
            background:`linear-gradient(135deg, ${service.color}33, rgba(23,23,23,1) 70%)`,
            border:`1px solid ${service.color}55`, borderRadius:32, padding:'56px 48px',
            textAlign:'center', overflow:'hidden' }}>
            <Light color={service.color} size={500} top="-150px" left="50%" opacity={.4} blur={80}/>
            <div style={{position:'relative', zIndex:1}}>
              <h2 style={{ fontFamily:'var(--font-display)', fontWeight:600,
                fontSize:'clamp(28px, 3.2vw, 44px)', letterSpacing:'-0.02em', color:'var(--fg)', marginBottom:16 }}>
                Agendá un diagnóstico técnico gratuito
              </h2>
              <p style={{ fontSize:17, color:'var(--fg-muted)', maxWidth:580, margin:'0 auto 28px', lineHeight:1.55 }}>
                Te respondemos en menos de 24hs hábiles desde nuestras oficinas en Av. Dorrego 864, CABA.
              </p>
              <Btn variant="primary" size="lg" icon="arrow-up-right" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">Agendar diagnóstico</Btn>
            </div>
          </div>
        </section>
      </main>
    </>
  );
};

const navLinkStyle = {
  fontFamily:'var(--font-body)', fontWeight:500, fontSize:14,
  color:'var(--fg)', textDecoration:'none', opacity:.85,
};

window.ServicePage = ServicePage;