// Internal service detail page
const ServicePage = ({ service, onBack, onNavigate }) => {
  const IconComp = Icon[service.icon];
  const others = SERVICES.filter(s => s.id !== service.id).slice(0, 3);

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [service.id]);

  return (
    <div>
      {/* Hero burgundy band */}
      <section className="burgundy-bg" style={{
        paddingTop: 160, paddingBottom: 100, padding: '160px 32px 100px',
      }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <button onClick={onBack} style={{
            background: 'none', border: 'none', color: 'var(--gold-bright)', cursor: 'pointer',
            fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 10, padding: 0, marginBottom: 40,
            fontFamily: 'inherit',
          }}>
            <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Icon.Arrow size={14} color="currentColor" /></span>
            Volver al inicio
          </button>

          <div style={{
            display: 'grid', gridTemplateColumns: '0.3fr 1fr', gap: 48, alignItems: 'start',
          }} className="sp-hero-grid">
            <div style={{
              width: 100, height: 100, borderRadius: '50%',
              border: '1px solid var(--gold)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--gold-bright)',
            }}>
              <IconComp size={44} color="var(--gold-bright)" />
            </div>
            <div>
              <div className="gold-rule serif italic-serif" style={{ fontSize: 14, color: 'var(--gold-bright)' }}>
                Área de práctica
              </div>
              <h1 className="serif gold-text" style={{
                fontSize: 'clamp(42px, 6vw, 76px)',
                fontWeight: 500, lineHeight: 1.02, margin: '20px 0 0',
              }}>{service.title}</h1>
              <p className="serif italic-serif" style={{
                fontSize: 22, color: 'rgba(245,239,230,0.85)',
                marginTop: 24, maxWidth: 720, lineHeight: 1.4,
              }}>
                {service.hero}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Description + includes */}
      <section style={{ padding: '100px 32px', background: 'var(--cream)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }} className="sp-desc-grid">
            <div>
              <div className="gold-rule serif italic-serif" style={{ fontSize: 14, color: 'var(--gold-deep)' }}>
                En qué consiste
              </div>
              <h2 className="serif" style={{
                fontSize: 'clamp(32px, 4vw, 44px)', color: 'var(--burgundy)',
                fontWeight: 500, lineHeight: 1.1, margin: '20px 0 28px',
              }}>
                Te acompaño durante <span className="italic-serif" style={{ color: 'var(--gold-deep)' }}>todo el proceso</span>.
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--ink-soft)' }}>
                {service.description}
              </p>
            </div>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-deep)', marginBottom: 24 }}>
                ¿Qué incluye?
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {service.includes.map((item, i) => (
                  <li key={i} style={{
                    display: 'flex', gap: 14, alignItems: 'flex-start',
                    padding: '16px 0', borderBottom: '1px solid var(--line)',
                  }}>
                    <span className="serif italic-serif" style={{
                      color: 'var(--gold-deep)', fontSize: 18, minWidth: 26, fontWeight: 500,
                    }}>
                      {String(i + 1).padStart(2, '0')}
                    </span>
                    <span style={{ fontSize: 15.5, color: 'var(--ink)', lineHeight: 1.5 }}>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: '100px 32px', background: 'var(--cream-warm)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div className="gold-rule serif italic-serif" style={{ fontSize: 14, color: 'var(--gold-deep)' }}>
              Cómo trabajamos
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(32px, 4vw, 48px)', color: 'var(--burgundy)',
              fontWeight: 500, lineHeight: 1.1, margin: '20px 0 0',
            }}>
              El proceso, paso a paso
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${service.process.length}, 1fr)`, gap: 0 }} className="sp-process-grid">
            {service.process.map((p, i) => (
              <div key={i} style={{
                padding: '32px 28px',
                background: 'white',
                position: 'relative',
                borderTop: '1px solid var(--line-gold)',
                borderBottom: '1px solid var(--line-gold)',
                borderLeft: i === 0 ? '1px solid var(--line-gold)' : 'none',
                borderRight: '1px solid var(--line-gold)',
              }}>
                <div className="serif italic-serif" style={{
                  fontSize: 48, fontWeight: 500, color: 'var(--gold)',
                  lineHeight: 1, marginBottom: 16,
                }}>
                  0{i + 1}
                </div>
                <div className="serif" style={{ fontSize: 22, color: 'var(--burgundy)', fontWeight: 500, marginBottom: 10 }}>
                  {p.t}
                </div>
                <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
                  {p.d}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQs */}
      <section style={{ padding: '100px 32px', background: 'var(--cream)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div className="gold-rule serif italic-serif" style={{ fontSize: 14, color: 'var(--gold-deep)' }}>
              Preguntas frecuentes
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(32px, 4vw, 44px)', color: 'var(--burgundy)',
              fontWeight: 500, lineHeight: 1.1, margin: '20px 0 0',
            }}>
              Lo que más nos consultan
            </h2>
          </div>

          <div>
            {service.faqs.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} defaultOpen={i === 0} />)}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="burgundy-bg" style={{ padding: '90px 32px', textAlign: 'center' }}>
        <div style={{ maxWidth: 720, margin: '0 auto' }}>
          <h2 className="serif gold-text" style={{
            fontSize: 'clamp(32px, 4.5vw, 52px)', fontWeight: 500, lineHeight: 1.1, margin: 0,
          }}>
            ¿Querés conversar sobre tu caso?
          </h2>
          <p style={{ color: 'rgba(245,239,230,0.85)', fontSize: 17, marginTop: 20, marginBottom: 36 }}>
            La primera consulta no compromete. Conversemos y veamos juntos el mejor camino.
          </p>
          <div style={{ display: 'inline-flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
            <button onClick={() => { onBack(); setTimeout(() => document.getElementById('booking')?.scrollIntoView({ behavior: 'smooth' }), 80); }}
              className="btn btn-cream">
              Reservar Consulta
              <Icon.Arrow size={14} />
            </button>
            <a href={`https://wa.me/${CONTACT.phoneIntl.replace(/\D/g,'')}?text=${encodeURIComponent('Hola Suyai, quisiera consultar sobre ' + service.title + '.')}`}
              target="_blank" rel="noopener noreferrer" className="btn btn-gold">
              <Icon.WhatsApp size={16} color="currentColor" />
              WhatsApp
            </a>
          </div>
        </div>
      </section>

      {/* Other services */}
      <section style={{ padding: '90px 32px', background: 'var(--cream-warm)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div className="gold-rule serif italic-serif" style={{ fontSize: 14, color: 'var(--gold-deep)', marginBottom: 16 }}>
            Otras áreas
          </div>
          <h3 className="serif" style={{ fontSize: 32, color: 'var(--burgundy)', fontWeight: 500, margin: '0 0 36px' }}>
            También trabajo en
          </h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="sp-other-grid">
            {others.map(s => {
              const I = Icon[s.icon];
              return (
                <div key={s.id} className="service-card" onClick={() => onNavigate(s.id)}
                  style={{ background: 'white', padding: 28, border: '1px solid var(--line-gold)' }}>
                  <I size={28} color="var(--gold-deep)" />
                  <h4 className="serif" style={{ fontSize: 22, color: 'var(--burgundy)', fontWeight: 500, margin: '14px 0 8px' }}>
                    {s.title}
                  </h4>
                  <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.55, margin: 0 }}>{s.short}</p>
                  <div className="arrow" style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 16,
                    color: 'var(--gold-deep)', fontSize: 11, letterSpacing: '0.18em',
                    textTransform: 'uppercase', fontWeight: 500,
                  }}>
                    Ver más <Icon.Arrow size={12} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 880px) {
          .sp-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .sp-desc-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .sp-process-grid { grid-template-columns: 1fr !important; }
          .sp-other-grid { grid-template-columns: 1fr !important; }
        }
        @media (min-width: 881px) and (max-width: 1100px) {
          .sp-process-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </div>
  );
};

const FAQItem = ({ q, a, defaultOpen }) => {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{ borderBottom: '1px solid var(--line-gold)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', background: 'none', border: 'none', cursor: 'pointer',
        textAlign: 'left', padding: '24px 0', display: 'flex',
        justifyContent: 'space-between', alignItems: 'center', gap: 16,
        fontFamily: 'inherit',
      }}>
        <span className="serif" style={{ fontSize: 20, color: 'var(--burgundy)', fontWeight: 500, lineHeight: 1.3 }}>
          {q}
        </span>
        <span style={{
          width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--gold)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--gold-deep)', flexShrink: 0,
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s ease',
        }}>
          <Icon.ChevronDown size={14} color="currentColor" />
        </span>
      </button>
      <div style={{
        maxHeight: open ? 300 : 0,
        overflow: 'hidden',
        transition: 'max-height 0.4s ease, padding 0.4s ease',
        paddingBottom: open ? 24 : 0,
      }}>
        <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, margin: 0, maxWidth: 680 }}>
          {a}
        </p>
      </div>
    </div>
  );
};

Object.assign(window, { ServicePage, FAQItem });