// Sections.jsx — Stats, Services, Escuelas, Proceso, Blog, FAQ

// ── STATS (números reales de la trayectoria)
const PDStats = () => {
  const stats = [
    { n: '10+', l: 'Años de experiencia', s: 'Fotografía escolar profesional desde 2015' },
    { n: '10K+', l: 'Alumnos fotografiados', s: 'Retratos, credenciales y ceremonias' },
    { n: '100%', l: 'Procesos propios', s: 'Equipo, edición y logística in-house' },
    { n: '48h', l: 'Respuesta a propuestas', s: 'De la visita a la cotización detallada' },
  ];
  return (
    <section style={{ padding: '80px 5%', background: '#0d1b3e', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 50% at 80% 20%, rgba(46,203,177,0.1) 0%, transparent 60%)', pointerEvents: 'none' }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <div className="eyebrow reveal" style={{ marginBottom: 40, justifyContent: 'center', color: 'var(--accent)' }}>
          <span className="dot"></span>10 AÑOS HACIENDO FOTOGRAFÍA ESCOLAR
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 2, background: 'rgba(255,255,255,0.08)', borderRadius: 16, overflow: 'hidden' }}>
          {stats.map((st, i) => (
            <div key={i} className="reveal" data-delay={i * 80} style={{ background: '#0d1b3e', padding: '36px 28px', textAlign: 'left' }}>
              <div style={{ fontFamily: "'GCarturm', sans-serif", fontSize: 56, fontWeight: 700, color: 'var(--accent)', letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 12 }}>{st.n}</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: '#fff', marginBottom: 6 }}>{st.l}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.5 }}>{st.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── SERVICES
const SERVICE_LIST = [
  { id: 'retratos', title: 'Retratos Escolares', tag: 'PORTRAIT', desc: 'Fotografías individuales con calidad de estudio. Iluminación profesional, múltiples poses, edición detallada.', highlight: 'Calidad de estudio', features: ['Iluminación profesional', 'Hasta 3 poses por alumno', 'Retoque y edición', 'Impresión en mate o brillante'] },
  { id: 'graduacion', title: 'Graduación', tag: 'EVENT', desc: 'Cobertura completa de ceremonias de graduación. Toga, birrete, diplomas, retratos formales e informales.', highlight: 'Paquetes personalizados', features: ['Cobertura completa del evento', 'Retratos con toga y birrete', 'Álbum impreso incluido', 'Galería digital privada'] },
  { id: 'credenciales', title: 'Credenciales Escolares', tag: 'ID', desc: 'Credenciales impresas en PVC de alta calidad con fotografía profesional. Diseño personalizado por escuela.', highlight: 'PVC alta durabilidad', features: ['PVC de alta durabilidad', 'Impresión a color en ambos lados', 'Diseño personalizado', 'Código QR opcional'] },
  { id: 'eventos', title: 'Eventos Escolares', tag: 'EVENT', desc: 'Festivales, kermesses, ceremonias cívicas, actividades deportivas. Entrega rápida para comunicación.', highlight: 'Entrega en 72h', features: ['Fotógrafo asignado', 'Entrega en 72h', 'Galería online privada', 'Uso libre para la escuela'] },
  { id: 'albumes', title: 'Álbumes de Fin de Año', tag: 'PRINT', desc: 'Anuarios escolares impresos en alta calidad. Diseño editorial, fotografía, textos y logística de distribución.', highlight: 'Diseño editorial', features: ['Diseño editorial custom', 'Impresión tapa dura', 'Fotos grupales + individuales', 'Mínimo 40 páginas'] },
  { id: 'marketing', title: 'Marketing Educativo', tag: 'MEDIA', desc: 'Fotografía y video para la comunicación de tu institución: sitio web, redes sociales, brochures, publicidad.', highlight: 'Licencia comercial', features: ['Sesión de branding institucional', 'Video corporativo 1-2min', 'Banco de imágenes anual', 'Licencia de uso comercial'] },
];

const ServiceIcon = ({ id }) => {
  const icons = {
    retratos: <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>,
    graduacion: <path d="M22 10v6M2 10l10-5 10 5-10 5z M6 12v5c3 3 9 3 12 0v-5"/>,
    credenciales: <><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M15 11h3M15 15H7"/></>,
    eventos: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    albumes: <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>,
    marketing: <path d="M3 11l18-8-7 19-2-9z"/>,
  };
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {icons[id]}
    </svg>
  );
};

const PDServices = ({ onContact }) => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <section id="servicios" style={{ background: '#fff' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <div className="eyebrow reveal" style={{ marginBottom: 16 }}><span className="dot"></span>NUESTROS SERVICIOS</div>
          <h2 className="display reveal" style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, color: '#0d1b3e', marginBottom: 18 }}>
            Todo lo que tu escuela necesita en <span style={{ color: 'var(--accent-dark)' }}>un solo lugar.</span>
          </h2>
          <p className="reveal" style={{ fontSize: 17, color: '#44506a', maxWidth: 560 }}>
            Seis servicios diseñados específicamente para instituciones educativas privadas. Equipo propio, proceso probado durante más de 10 años.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 18 }}>
          {SERVICE_LIST.map((sv, i) => {
            const h = hovered === i;
            return (
              <div key={sv.id} className="reveal" data-delay={(i % 3) * 100}
                onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}
                style={{
                  position: 'relative', background: '#fff', borderRadius: 16, padding: 28,
                  border: h ? '1.5px solid var(--accent)' : '1px solid #eef1f6',
                  boxShadow: h ? '0 18px 50px rgba(46,203,177,0.18)' : '0 1px 3px rgba(13,27,62,0.04)',
                  transform: h ? 'translateY(-4px)' : 'none',
                  transition: 'all 0.25s ease', cursor: 'pointer',
                }}>
                <div style={{ position: 'absolute', top: 14, right: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: '3px 8px', borderRadius: 4, background: h ? 'var(--accent)' : '#f0f2f7', color: h ? '#0d1b3e' : '#8d98b3', letterSpacing: '0.1em', fontWeight: 600 }}>{sv.tag}</div>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: h ? 'var(--accent)' : '#e8faf7', color: h ? '#0d1b3e' : 'var(--accent-dark)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22, transition: 'all 0.25s' }}>
                  <ServiceIcon id={sv.id} />
                </div>
                <h3 className="display" style={{ fontSize: 20, fontWeight: 700, color: '#0d1b3e', marginBottom: 10 }}>{sv.title}</h3>
                <p style={{ fontSize: 14, color: '#636e87', lineHeight: 1.6, marginBottom: 18 }}>{sv.desc}</p>
                <div style={{ paddingTop: 16, borderTop: '1px solid #eef1f6', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent-dark)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.04em' }}>{sv.highlight}</span>
                  <span style={{ fontSize: 16, color: h ? 'var(--accent-dark)' : '#b8c0d4', transition: 'all 0.2s', transform: h ? 'translateX(4px)' : 'none' }}>→</span>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <button className="btn btn-primary btn-lg" onClick={onContact}>Solicita cotización personalizada</button>
        </div>
      </div>
    </section>
  );
};

// ── PARA ESCUELAS (B2B)
const PDEscuelas = ({ onContact }) => {
  const benefits = [
    { t: 'Cero carga operativa', d: 'Nosotros coordinamos con padres de familia, maestros y dirección. Tú solo apruebas fechas.', icon: <path d="M22 12h-4l-3 9L9 3l-3 9H2"/> },
    { t: 'Logística sin dolor', d: 'Montaje propio, respaldo eléctrico, calendarios compartidos, entregas en tiempo.', icon: <><rect x="1" y="3" width="15" height="13"/><polygon points="16,8 20,8 23,11 23,16 16,16"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></> },
    { t: 'Entrega organizada', d: 'Empacamos por grupo y alumno, con etiquetado claro para que la distribución en la escuela sea rápida y sin confusiones.', icon: <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01M10 8h.01"/></> },
    { t: 'Calidad garantizada', d: 'Equipo propio de iluminación, múltiples poses por alumno y revisión manual foto por foto. En 10 años, nivel profesional en cada entrega.', icon: <><polyline points="20,6 9,17 4,12"/></> },
    { t: 'Una sola toma, doble entrega', d: 'La misma sesión profesional se usa para el retrato y para la credencial escolar: todos los alumnos tienen foto de calidad en su ID, sin dobles citas ni costos extra.', icon: <><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M15 11h3M15 15H7"/></> },
    { t: 'Archivo digital 1:1 para la escuela', d: 'Entregamos todas las fotos a la dirección, listas para documentos oficiales, archivo institucional, diplomas o premiaciones. La escuela siempre tiene su banco de imágenes.', icon: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></> },
  ];
  return (
    <section id="escuelas" style={{ background: '#f7f9fc', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 60, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="eyebrow reveal" style={{ marginBottom: 16 }}><span className="dot"></span>PARA DIRECTORAS Y DIRECTORES</div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(36px, 4.5vw, 58px)', fontWeight: 700, color: '#0d1b3e', marginBottom: 22 }}>
              Tu escuela, sin un<br/><span style={{ color: 'var(--accent-dark)' }}>dolor de cabeza más.</span>
            </h2>
            <p className="reveal" style={{ fontSize: 17, color: '#44506a', lineHeight: 1.65, marginBottom: 28 }}>
              Sabemos que los retratos escolares son importantes, pero no deberían ocupar tu agenda. PhotoDay se encarga del 100% del proceso para que tu institución reciba el servicio, y tú solo apruebas fechas.
            </p>
            <div className="reveal" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={onContact}>Agendar demo 20 min</button>
              <a href="#cotizador" className="btn btn-ghost-dark">Solicitar propuesta</a>
            </div>
          </div>
          <div style={{ display: 'grid', gap: 14 }}>
            {benefits.map((b, i) => (
              <div key={i} className="reveal" data-delay={i * 80} style={{ background: '#fff', padding: 24, borderRadius: 14, border: '1px solid #eef1f6', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ width: 42, height: 42, borderRadius: 10, background: '#e8faf7', color: 'var(--accent-dark)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{b.icon}</svg>
                </div>
                <div>
                  <h4 className="display" style={{ fontSize: 16, fontWeight: 700, color: '#0d1b3e', marginBottom: 6 }}>{b.t}</h4>
                  <p style={{ fontSize: 14, color: '#636e87', lineHeight: 1.6 }}>{b.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ── PROCESO
const PROCESO_STEPS = [
  { n: '01', t: 'Cotización y acuerdo', d: 'Visita gratuita a tu escuela. Entendemos necesidades, entregamos propuesta en 48h.' },
  { n: '02', t: 'Calendarización', d: 'Definimos fechas, horarios y grupos. Enviamos circular para padres en tu nombre.' },
  { n: '03', t: 'Día de toma', d: 'Llegamos con estudio montado. Cada grupo toma su turno sin interrumpir clases.' },
  { n: '04', t: 'Edición profesional', d: 'Retoque, color grading y selección. Cada foto revisada a mano.' },
  { n: '05', t: 'Selección y aprobación', d: 'Compartimos avances con la escuela para validar fotos grupales, diseño de credenciales o maqueta de álbum antes de imprimir.' },
  { n: '06', t: 'Entrega', d: 'Impresiones, credenciales y/o álbumes llegan a la escuela listos para distribuir.' },
];

const PDProceso = () => (
  <section id="proceso" style={{ background: '#0a0e1f', color: '#fff', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 40% at 20% 50%, rgba(46,203,177,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(139,92,246,0.1) 0%, transparent 60%)', pointerEvents: 'none' }}></div>
    <div className="container" style={{ position: 'relative' }}>
      <div style={{ maxWidth: 720, marginBottom: 64 }}>
        <div className="eyebrow reveal" style={{ marginBottom: 16, color: 'var(--accent)' }}><span className="dot"></span>NUESTRO PROCESO</div>
        <h2 className="display reveal" style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 700, color: '#fff', marginBottom: 18 }}>
          Cómo trabajamos<br/><span style={{ background: 'linear-gradient(135deg, var(--accent), #8b5cf6)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>de principio a fin.</span>
        </h2>
        <p className="reveal" style={{ fontSize: 17, color: 'rgba(255,255,255,0.65)', maxWidth: 560 }}>
          6 pasos probados en 10 años. Coordinados por un project manager asignado a tu institución.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
        {PROCESO_STEPS.map((p, i) => (
          <div key={p.n} className="reveal" data-delay={(i % 3) * 80} style={{ padding: 28, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, position: 'relative', overflow: 'hidden' }}>
            <div style={{ fontFamily: "'GCarturm', sans-serif", fontSize: 56, fontWeight: 700, color: 'transparent', WebkitTextStroke: '1.5px rgba(46,203,177,0.4)', lineHeight: 1, marginBottom: 18, letterSpacing: '-0.03em' }}>{p.n}</div>
            <h4 className="display" style={{ fontSize: 17, fontWeight: 700, color: '#fff', marginBottom: 10 }}>{p.t}</h4>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', lineHeight: 1.6 }}>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ── BLOG PREVIEW
const BLOG_POSTS = [
  { title: 'Cómo preparar a tu escuela para el día de retratos: guía para directoras', date: '15 Abr 2026', category: 'Guías', read: '6 min', img: 'assets/photo-classroom.jpg' },
  { title: 'Credenciales escolares 2026: qué exige la SEP Baja California', date: '02 Abr 2026', category: 'Normativa', read: '4 min', img: 'assets/photo-portrait.jpg' },
  { title: 'Los 7 errores más comunes al contratar fotografía de graduación', date: '28 Mar 2026', category: 'Tips', read: '8 min', img: 'assets/photo-graduation.jpg' },
];

const PDBlog = () => (
  <section id="blog" style={{ background: '#fff' }}>
    <div className="container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
        <div style={{ maxWidth: 640 }}>
          <div className="eyebrow reveal" style={{ marginBottom: 16 }}><span className="dot"></span>RECURSOS PARA ESCUELAS</div>
          <h2 className="display reveal" style={{ fontSize: 'clamp(32px, 4.5vw, 54px)', fontWeight: 700, color: '#0d1b3e' }}>Del blog.</h2>
        </div>
        <a href="#" className="btn btn-ghost-dark reveal">Todos los artículos →</a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 24 }}>
        {BLOG_POSTS.map((p, i) => (
          <article key={i} className="reveal" data-delay={i * 100} style={{ cursor: 'pointer' }}
            onMouseEnter={(e) => { e.currentTarget.querySelector('img').style.transform = 'scale(1.05)'; e.currentTarget.querySelector('h3').style.color = 'var(--accent-dark)'; }}
            onMouseLeave={(e) => { e.currentTarget.querySelector('img').style.transform = 'scale(1)'; e.currentTarget.querySelector('h3').style.color = '#0d1b3e'; }}
          >
            <div style={{ aspectRatio: '4/3', borderRadius: 14, overflow: 'hidden', marginBottom: 20 }}>
              <img src={p.img} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.5s' }} />
            </div>
            <div style={{ display: 'flex', gap: 10, marginBottom: 12, fontSize: 11, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.1em', textTransform: 'uppercase', color: '#8d98b3' }}>
              <span style={{ color: 'var(--accent-dark)' }}>{p.category}</span>
              <span>·</span>
              <span>{p.date}</span>
              <span>·</span>
              <span>{p.read}</span>
            </div>
            <h3 className="display" style={{ fontSize: 20, fontWeight: 700, color: '#0d1b3e', lineHeight: 1.2, transition: 'color 0.2s' }}>{p.title}</h3>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ── FAQ
const FAQ_ITEMS = [
  { q: '¿Cuánto tiempo tardan en entregar las fotos?', a: 'El tiempo de entrega depende del volumen y los servicios contratados: típicamente entre 3 y 4 semanas desde el día de toma. Si tu escuela tiene una fecha urgente, podemos organizar entregas graduales por grupo o priorizar piezas clave. Lo acordamos desde la cotización.' },
  { q: '¿Atienden escuelas fuera de Baja California?', a: 'Sí. Aunque nuestra sede está en Tijuana, cubrimos todo México bajo demanda. Incluimos viáticos en la cotización y garantizamos la misma calidad que en servicios locales. Ya hemos trabajado en CDMX, Guadalajara y Monterrey.' },
  { q: '¿Cómo se maneja el cobro y la distribución?', a: 'Trabajamos directamente con la escuela: facturamos a la institución y ellos se encargan de la relación con las familias. Nosotros no cobramos a padres de familia, lo que simplifica la operación y evita conflictos. Entregamos todo el material etiquetado y organizado por grupo y alumno, listo para distribuir.' },
  { q: '¿Cómo aseguran la calidad de cada fotografía?', a: 'Usamos equipo profesional de iluminación controlada, tomamos varias poses por alumno y revisamos cada foto manualmente antes de la entrega. Solo se entregan las tomas que cumplen con nuestro estándar de calidad.' },
  { q: '¿Tienen seguro y cumplen con protección de datos de menores?', a: 'Sí. Contamos con seguro de responsabilidad civil, todos los fotógrafos tienen antecedentes no penales actualizados, y operamos bajo LFPDPPP con consentimientos firmados por padres de familia antes de cualquier toma.' },
  { q: '¿Pueden personalizar credenciales con el diseño de nuestra escuela?', a: 'Por supuesto. El diseño es 100% personalizable: colores institucionales, logo, datos del alumno, código QR, foto con o sin fondo. Enviamos muestra para aprobación antes de imprimir.' },
  { q: '¿Hacen cotizaciones sin compromiso?', a: 'Sí, completamente gratuitas. Visitamos tu escuela, entendemos necesidades, y en 48 horas recibes propuesta detallada. Si decides no contratar, no hay obligación alguna.' },
];

const PDFaq = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: '#f7f9fc' }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow reveal" style={{ marginBottom: 16, justifyContent: 'center' }}><span className="dot"></span>PREGUNTAS FRECUENTES</div>
          <h2 className="display reveal" style={{ fontSize: 'clamp(32px, 4.5vw, 54px)', fontWeight: 700, color: '#0d1b3e' }}>Lo que más nos preguntan.</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQ_ITEMS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="reveal" data-delay={i * 50} style={{ background: '#fff', borderRadius: 14, border: isOpen ? '1.5px solid var(--accent)' : '1px solid #eef1f6', overflow: 'hidden', transition: 'border-color 0.2s' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: '100%', padding: '22px 26px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18, textAlign: 'left' }}>
                  <span className="display" style={{ fontSize: 16, fontWeight: 700, color: '#0d1b3e', letterSpacing: '-0.01em', textTransform: 'none' }}>{f.q}</span>
                  <span style={{ width: 28, height: 28, borderRadius: '50%', background: isOpen ? 'var(--accent)' : '#f0f2f7', color: isOpen ? '#0d1b3e' : '#44506a', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.25s', transform: isOpen ? 'rotate(45deg)' : 'none', flexShrink: 0, fontSize: 18, lineHeight: 1 }}>+</span>
                </button>
                <div style={{ maxHeight: isOpen ? 500 : 0, overflow: 'hidden', transition: 'max-height 0.4s ease' }}>
                  <div style={{ padding: '0 26px 24px', fontSize: 15, color: '#44506a', lineHeight: 1.7 }}>{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PDStats, PDServices, PDEscuelas, PDProceso, PDBlog, PDFaq });