// Pipeko website — full categorized FAQ screen. Exports window.PKFaq.
const { Badge, Button } = window.PipekoInterioresDesignSystem_5fe34e;
const { link: waLink } = window.PKWhatsApp;

function FaqAccordionItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderTop: '1px solid var(--warmgrey-200)' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', padding: '20px 0', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left' }}>
        <span style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '18px', lineHeight: 1.4 }}>{q}</span>
        <i data-lucide={open ? 'minus' : 'plus'} style={{ width: '18px', height: '18px', color: 'var(--plum-800)', flexShrink: 0 }}></i>
      </button>
      {open && <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', lineHeight: 1.7, color: 'var(--slate-800)', margin: '0 0 22px', maxWidth: '72ch' }}>{a}</p>}
    </div>
  );
}

function GuideCallout({ title, steps }) {
  return (
    <div style={{ background: 'var(--plum-100)', borderRadius: 'var(--radius-lg)', padding: '24px 28px', margin: '2px 0 28px' }}>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: '12px', letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--plum-800)', fontWeight: 600, marginBottom: '12px' }}>Guía rápida</div>
      <h3 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '20px', margin: '0 0 12px' }}>{title}</h3>
      <ul style={{ margin: 0, paddingLeft: '20px', fontFamily: 'var(--font-ui)', fontSize: '15.5px', lineHeight: 1.6, color: 'var(--slate-800)', display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {steps.map((s, i) => <li key={i}>{s}</li>)}
      </ul>
    </div>
  );
}

function FaqGroup({ group, gi, openSet, toggle }) {
  return (
    <div style={{ marginBottom: '44px' }}>
      <h2 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: '24px', letterSpacing: '-.01em', margin: '0 0 6px' }}>{group.category}</h2>
      {group.guide && <div style={{ marginTop: '18px' }}><GuideCallout title={group.guide.title} steps={group.guide.steps} /></div>}
      <div>
        {group.items.map((it, i) => {
          const key = gi + '-' + i;
          return <FaqAccordionItem key={key} q={it.q} a={it.a} open={openSet.has(key)} onToggle={() => toggle(key)} />;
        })}
      </div>
    </div>
  );
}

function FaqScreen({ go }) {
  const isMobile = window.usePKMobile();
  const [openSet, setOpenSet] = React.useState(() => new Set(['0-0']));
  const toggle = (key) => setOpenSet((prev) => { const s = new Set(prev); s.has(key) ? s.delete(key) : s.add(key); return s; });

  React.useEffect(() => {
    const flat = window.PK_FAQ_GROUPS.flatMap((g) => g.items);
    window.PKSEO.setMeta(
      'Preguntas Frecuentes sobre Persianas a la Medida | Pipeko CDMX',
      'Resolvemos tus dudas sobre persianas Blackout, Sheer Elegance y Malla Solar: materiales, instalación, precios, garantía y zonas de cobertura en Ciudad de México y Edoméx.'
    );
    window.PKSEO.setCanonical('https://www.pipekointeriores.com/preguntas-frecuentes');
    window.PKSEO.setOG({
      title: 'Preguntas Frecuentes sobre Persianas | Pipeko',
      description: 'Materiales, instalación, precios y garantía de persianas a la medida. Todo lo que necesitas saber antes de cotizar.',
      url: 'https://www.pipekointeriores.com/preguntas-frecuentes'
    });
    window.PKSEO.setJsonLd('ld-faq', { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: flat.map((f) => ({ '@type': 'Question', name: f.q, acceptedAnswer: { '@type': 'Answer', text: f.a } })) });
    window.PKSEO.setBreadcrumb('ld-breadcrumb', [{ name: 'Inicio', url: 'https://www.pipekointeriores.com/' }, { name: 'Preguntas frecuentes', url: 'https://www.pipekointeriores.com/preguntas-frecuentes' }]);
    return () => { window.PKSEO.clearJsonLd('ld-faq'); window.PKSEO.clearJsonLd('ld-breadcrumb'); };
  }, []);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <div style={{ background: 'var(--cream-100)' }}>
      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '32px 20px 8px' : '56px 32px 8px' }}>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: '13px', color: 'var(--text-faint)', marginBottom: '20px' }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>Inicio</a>
          <span> / </span><span>Preguntas frecuentes</span>
        </div>
        <Badge tone="taupe" variant="soft">Preguntas frecuentes</Badge>
        <h1 style={{ fontFamily: 'var(--font-serif)', color: 'var(--plum-800)', fontWeight: 600, fontSize: isMobile ? '28px' : '42px', letterSpacing: '-.02em', margin: '16px 0 18px' }}>Todo lo que preguntan antes de cotizar</h1>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '18px', lineHeight: 1.65, color: 'var(--slate-800)', margin: '0 0 8px' }}>
          Materiales, instalación, precios, garantía y zonas donde trabajamos. Si no encuentras tu duda aquí, escríbenos por WhatsApp.
        </p>
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '24px 20px 8px' : '32px 32px 8px' }}>
        {window.PK_FAQ_GROUPS.map((g, gi) => <FaqGroup key={gi} group={g} gi={gi} openSet={openSet} toggle={toggle} />)}
      </div>

      <div style={{ maxWidth: 'var(--container-text)', margin: '0 auto', padding: isMobile ? '16px 20px 64px' : '24px 32px 88px', textAlign: 'center' }}>
        <p style={{ fontFamily: 'var(--font-ui)', fontSize: '16px', color: 'var(--text-muted)', margin: '0 0 20px' }}>¿No encontraste tu respuesta?</p>
        <Button size="lg" variant="primary" as="a" href={waLink('Hola, tengo una pregunta sobre persianas.')} target="_blank" rel="noopener">Preguntar por WhatsApp</Button>
      </div>
    </div>
  );
}

Object.assign(window, { PKFaq: FaqScreen });