// Para familias — página dirigida a padres y madres.
// Capta al público "cómo ayudo a mi hijo/a" y transmite el método de la web.

function Familias({ onNav }) {
  const pasos = [
    {
      n: '1',
      t: 'Deja que lo intente primero',
      d: 'Que lea la explicación e intente la actividad por su cuenta. Equivocarse forma parte de aprender; no pasa nada por fallar a la primera.',
    },
    {
      n: '2',
      t: 'No necesitas saber la respuesta',
      d: 'Cada actividad se corrige al instante y explica el porqué de la solución. Tú no tienes que corregir nada ni acordarte de la materia.',
    },
    {
      n: '3',
      t: 'Repasad juntos lo que falle',
      d: 'Si algo no sale, volved a la explicación de esa parte. Está escrita para entenderse sin tecnicismos, también por quien la ve de nuevas.',
    },
    {
      n: '4',
      t: 'Poco y a menudo',
      d: 'Mejor 20 minutos al día que tres horas el domingo. La constancia tranquila gana al atracón de última hora.',
    },
  ];

  const flujo = [
    { t: 'Explicación', d: 'La teoría de cada parte, con ejemplos.' },
    { t: 'Actividad', d: 'Practica esa parte. Se corrige sola.' },
    { t: 'Resumen', d: 'Las ideas clave de toda la unidad.' },
    { t: 'Actividad final', d: 'Repaso global que mezcla todo.' },
  ];

  return (
    <main style={{ maxWidth: 'var(--w-page)', margin: '0 auto', padding: '32px var(--pad-page) 64px' }}>

      {/* INTRO */}
      <section style={{ marginBottom: 44, maxWidth: 720 }}>
        <Label>Para familias</Label>
        <h1 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-tight)', margin: '6px 0 14px' }}>
          Acompañar a tus hijos,<br/>aunque no recuerdes la materia.
        </h1>
        <p style={{ font: 'var(--type-body-lg)', color: 'var(--ink-2)', margin: 0 }}>
          Esta web nace para echar una mano a las familias. Vivimos con prisa y no siempre podemos sentarnos a explicar un tema. Por eso cada unidad está explicada paso a paso y las actividades se corrigen solas: tu hijo o hija puede avanzar por su cuenta y tú acompañar, sin tener que hacer de profe.
        </p>
      </section>

      {/* CÓMO ACOMPAÑAR */}
      <section style={{ marginBottom: 48 }}>
        <SectionHeader title="Cómo acompañar, paso a paso" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {pasos.map(p => (
            <div key={p.n} style={{
              background: 'var(--bg-surface)',
              border: '1px solid var(--line)',
              borderRadius: 'var(--r-lg)',
              padding: '20px 22px',
              display: 'flex', gap: 16, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 38, height: 38, flexShrink: 0, borderRadius: 'var(--r-md)',
                background: 'var(--forest)', color: '#FBF8F0',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                font: 'var(--fw-medium) 16px/1 var(--font-mono)',
              }}>{p.n}</div>
              <div>
                <div style={{ font: 'var(--type-h4)', color: 'var(--ink)', marginBottom: 5 }}>{p.t}</div>
                <p style={{ font: 'var(--type-body-sm)', color: 'var(--ink-2)', margin: 0 }}>{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* CÓMO FUNCIONA CADA UNIDAD */}
      <section style={{ marginBottom: 48 }}>
        <SectionHeader title="Cómo funciona cada unidad" />
        <p style={{ font: 'var(--type-body)', color: 'var(--ink-2)', margin: '0 0 18px', maxWidth: 620 }}>
          La unidad se divide en partes. En cada una, primero la explicación y luego una actividad para practicar. Al terminar todas, un resumen y una actividad de toda la unidad.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          {flujo.map((f, i) => (
            <div key={f.t} style={{ display: 'flex', alignItems: 'stretch', gap: 12, flex: '1 1 200px' }}>
              <div style={{
                flex: 1,
                background: 'var(--bg-surface)',
                border: '1px solid var(--line)',
                borderLeft: '4px solid var(--terracotta)',
                borderRadius: 'var(--r-lg)',
                padding: '16px 18px',
                display: 'flex', flexDirection: 'column', gap: 5,
              }}>
                <div style={{ font: 'var(--type-meta)', color: 'var(--ink-3)' }}>{`0${i + 1}`}</div>
                <div style={{ font: 'var(--type-h4)', color: 'var(--ink)' }}>{f.t}</div>
                <p style={{ font: 'var(--type-body-sm)', color: 'var(--ink-2)', margin: 0 }}>{f.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* TIEMPO */}
      <section style={{ marginBottom: 48 }}>
        <SectionHeader title="Cuánto tiempo dedicar" />
        <div style={{
          background: 'var(--bg-surface)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--r-lg)',
          padding: '22px 24px',
          display: 'flex', gap: 18, alignItems: 'flex-start',
        }}>
          <div style={{
            width: 44, height: 44, flexShrink: 0, borderRadius: 'var(--r-md)',
            background: 'var(--terracotta-soft)', border: '1px solid var(--terracotta)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="clock" size={22} color="var(--terracotta-deep)" strokeWidth={1.75} />
          </div>
          <div style={{ maxWidth: 620 }}>
            <p style={{ font: 'var(--type-body)', color: 'var(--ink-2)', margin: 0 }}>
              Cada parte lleva unos <strong style={{ color: 'var(--ink)' }}>20-30 minutos</strong>: leer la explicación y hacer su actividad. Una unidad completa son tres o cuatro sesiones cortas. Lo importante no es correr, sino mantener el ritmo. Sin prisa y sin agobios.
            </p>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{
        background: 'var(--forest)',
        borderRadius: 'var(--r-lg)',
        padding: '32px 34px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap',
      }}>
        <div>
          <div style={{ font: 'var(--type-h3)', color: '#FBF8F0', marginBottom: 4 }}>Empezad por un tema</div>
          <p style={{ font: 'var(--type-body)', color: 'rgba(251,248,240,0.8)', margin: 0 }}>
            Todo el material está abierto, gratis y sin registro.
          </p>
        </div>
        <button onClick={() => onNav('library')} style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'var(--terracotta)', color: '#fff',
          border: 0, borderRadius: 'var(--r-md)',
          padding: '13px 22px', cursor: 'pointer',
          font: 'var(--type-ui)', whiteSpace: 'nowrap',
          transition: 'all var(--t-fast) var(--ease)',
        }}
        onMouseEnter={e => { e.currentTarget.style.background = 'var(--terracotta-deep)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'var(--terracotta)'; }}>
          Ver la biblioteca
          <Icon name="arrow" size={15} color="#fff" />
        </button>
      </section>

    </main>
  );
}

window.Familias = Familias;