// Reusable product-page sections (used by Facturación, Control Horario, IA)

function ProductHero({ tag, tagColor, tagBg, title, titleAccent, desc, mockup, ctaPrimary = 'Solicita una demo', ctaSecondary = 'Empieza gratis' }) {
  return (
    <section style={{ background: 'linear-gradient(180deg, #FBFCFD 0%, var(--surface-warm) 100%)', padding: '80px 24px 64px', overflow: 'hidden' }}>
      <style>{`
        .afer-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; }
        @media (max-width: 860px) { .afer-hero-grid { grid-template-columns: 1fr !important; } .afer-hero-grid > div:last-child { display: none; } }
        .afer-tabs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
        @media (max-width: 860px) { .afer-tabs-grid { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; } }
        .afer-pillars-grid { display: grid; gap: 20px; }
        @media (max-width: 860px) { .afer-pillars-grid { grid-template-columns: 1fr !important; } }
        .afer-cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
        @media (max-width: 700px) { .afer-cta-grid { grid-template-columns: 1fr !important; } .afer-cta-grid > div:last-child { flex-direction: column; } }
      `}</style>
      <div className="afer-hero-grid">
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', background: tagBg, color: tagColor, borderRadius: 999, fontSize: 13, fontWeight: 600, marginBottom: 20 }}>
            {tag}
          </div>
          <h1 style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.025em', margin: '0 0 18px', fontWeight: 700, color: 'var(--fg-strong)' }}>
            {title} <span style={{ color: tagColor }}>{titleAccent}</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--fg-default)', maxWidth: 520, margin: '0 0 28px' }}>{desc}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" href="/sign-up/">{ctaPrimary} <Icon name="arrow" size={16} color="#fff" /></Button>
            <Button variant="secondary" size="lg" href="/sign-up/">{ctaSecondary}</Button>
          </div>
        </div>
        <div>{mockup}</div>
      </div>
    </section>);
}

function FeatureGrid({ tag, title, desc, features, accent }) {
  return (
    <Section pad="100px 0" bg="#fff">
      <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
        <Eyebrow color={accent}>{tag}</Eyebrow>
        <h2 style={{ fontSize: 40, letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 16px' }}>{title}</h2>
        {desc && <p style={{ fontSize: 17, color: 'var(--fg-muted)', lineHeight: 1.55 }}>{desc}</p>}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="afer-pillars-grid">
        {features.map((f, i) =>
        <Reveal key={f.title} delay={i * 60}>
            <div style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 14, padding: 24, height: '100%', margin: "0px" }}>
              <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--brand-primary-soft)', color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <Icon name={f.icon} size={22} color={accent} />
              </div>
              <h3 style={{ fontSize: 17, margin: '0 0 8px', letterSpacing: '-0.01em' }}>{f.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0 }}>{f.desc}</p>
            </div>
          </Reveal>
        )}
      </div>
    </Section>);

}

function AlternatingFeatures({ items, accent }) {
  return (
    <Section pad="80px 0" bg="var(--surface-warm)">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 96 }}>
        {items.map((it, i) =>
        <Reveal key={it.title}>
            <div style={{ direction: i % 2 ? 'rtl' : 'ltr' }} className="afer-tabs-grid">
              <div style={{ direction: 'ltr' }}>
                <Eyebrow color={accent}>{it.eyebrow}</Eyebrow>
                <h3 style={{ fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 14px' }}>{it.title}</h3>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--fg-default)', margin: '0 0 20px' }}>{it.desc}</p>
                <div>
                  {it.bullets.map((b) =>
                <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '6px 0', fontSize: 14, color: 'var(--fg-strong)' }}>
                      <Icon name="check" size={16} color={accent} /> {b}
                    </div>
                )}
                </div>
              </div>
              <div style={{ direction: 'ltr' }}>{it.visual}</div>
            </div>
          </Reveal>
        )}
      </div>
    </Section>);

}

function ProductCTA({ title, accent }) {
  return (
    <section style={{ padding: "96px 24px" }}>
      <div style={{ maxWidth: 1100, padding: '40px 32px', borderRadius: 20, background: '#fff', border: '1px solid var(--border-default)', margin: '0 auto' }} className="afer-cta-grid">
        <div>
          <h2 style={{ fontSize: 32, letterSpacing: '-0.02em', lineHeight: 1.15, margin: '0 0 8px' }}>{title}</h2>
          <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 16 }}>Prueba 7 días gratis. Sin tarjeta. Importamos tus datos.</p>
        </div>
        <div style={{ display: 'flex', gap: 12 }}>
          <Button variant="primary" size="lg" style={{ background: accent }} onClick={openCalendly}>Solicita una demo</Button>
          <Button variant="secondary" size="lg" href="/sign-up/">Empezar gratis</Button>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ProductHero, FeatureGrid, AlternatingFeatures, ProductCTA });