/* Landing page sections */

const Hero = () => {
  return (
    <section className="hero" id="inicio">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">
              <span className="dot"></span>
              Plataforma de Bristol Academy
            </div>
            <h1 className="h-display" style={{ marginTop: 18 }}>
              Practica Aptis General <em>online</em> con simulacros completos creados por Bristol Academy.
            </h1>
            <p className="lead">
              Accede a exámenes organizados por destrezas — Grammar &amp; Vocabulary, Reading,
              Listening, Writing y Speaking — y prepara tu Aptis General con una plataforma
              clara, flexible y profesional.
            </p>
            <div className="hero-cta">
              <a className="btn btn-primary btn-lg" href="#/exam/1">
                Empezar con el examen gratuito
                <Icon name="arrow" size={16} />
              </a>
              <a className="btn btn-outline btn-lg" href="#planes">
                Ver planes de acceso
              </a>
            </div>
            <div className="hero-side-cta">
              ¿Prefieres preparar Aptis con clases?{' '}
              <a href="https://bristolprivatelessons.es/aptis-cursos-en-granada-ingles/" target="_blank" rel="noopener">
                Quiero preparar Aptis con clases ↗
              </a>
            </div>
            <div className="trust-row">
              <div className="trust-chip"><Icon name="unlock" size={15} /> Examen 1 gratuito y sin caducidad</div>
              <div className="trust-chip"><Icon name="clock" size={15} /> Resto: 90 días desde la compra</div>
              <div className="trust-chip"><Icon name="badge" size={15} /> 10 simulacros</div>
              <div className="trust-chip"><Icon name="target" size={15} /> Nivel CEFR A1–C1</div>
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            <div className="hero-card" style={{ padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                marginBottom: 22 }}>
                <div className="trust-chip" style={{ fontSize: 12, color: 'var(--accent-strong)', fontWeight: 700,
                  background: 'var(--accent-soft)', padding: '6px 12px', borderRadius: 999 }}>
                  <Icon name="sparkle" size={14} /> Bristol Academy · Granada
                </div>
                <div style={{ display: 'flex', gap: 4 }}>
                  {[1,2,3,4,5].map(i => (
                    <Icon key={i} name="star" size={14} style={{ color: '#e8b923' }} />
                  ))}
                </div>
              </div>

              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 42, lineHeight: 1.1,
                color: 'var(--navy-900)', letterSpacing: '-0.02em', marginBottom: 16 }}>
                "Pasé mi Aptis con un C en mi <em style={{ color: 'var(--accent)' }}>primer intento</em>."
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
                <div style={{ width: 38, height: 38, borderRadius: '50%',
                  background: 'var(--navy-800)', color: '#fff',
                  display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 15,
                  fontFamily: 'var(--font-serif)' }}>L</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>Lucía M.</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-muted)' }}>Alumna de Bristol Academy · Granada</div>
                </div>
              </div>

              <div style={{ borderTop: '1px solid var(--line)', paddingTop: 20,
                display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 30, color: 'var(--navy-900)',
                    lineHeight: 1 }}>10</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', marginTop: 4 }}>simulacros<br/>completos</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 30, color: 'var(--accent)',
                    lineHeight: 1 }}>+500</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', marginTop: 4 }}>alumnos<br/>aprobados</div>
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 30, color: 'var(--success)',
                    lineHeight: 1 }}>24h</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', marginTop: 4 }}>corrección<br/>de Writing</div>
                </div>
              </div>
            </div>

            <div className="hero-float hero-float-1">
              <div className="hero-float-ic success"><Icon name="check" size={16} /></div>
              <div>
                <div style={{ fontWeight: 700 }}>Examen gratuito</div>
                <div style={{ color: 'var(--ink-muted)', fontSize: 12 }}>Sin caducidad · sin tarjeta</div>
              </div>
            </div>
            <div className="hero-float hero-float-2">
              <div className="hero-float-ic"><Icon name="star" size={16} /></div>
              <div>
                <div style={{ fontWeight: 700 }}>4,9 / 5</div>
                <div style={{ color: 'var(--ink-muted)', fontSize: 12 }}>valoración media</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const TrustStrip = () => {
  const items = [
    { num: '10', lbl: 'simulacros completos' },
    { num: '5',  lbl: 'destrezas por examen' },
    { num: '90', lbl: 'días de acceso' },
    { num: 'A1–C1', lbl: 'niveles MCER' },
    { num: '24h', lbl: 'corrección de Writing' },
  ];
  return (
    <div className="logo-strip">
      <div className="container">
        <div className="logo-strip-grid">
          <div className="label">La plataforma de práctica oficial de Bristol Academy</div>
          {items.map((it, i) => (
            <div key={i} className="stat">
              <span className="num">{it.num}</span>
              <span className="lbl">{it.lbl}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const Benefits = () => {
  const cards = [
    { ic: 'clipboard', t: 'Simulacros completos',
      d: 'Diez exámenes Aptis General con las 5 destrezas. Mismo formato, tiempos y dificultad que la prueba real.' },
    { ic: 'target',    t: 'Práctica por destrezas',
      d: 'Entra a Grammar, Reading, Listening, Writing o Speaking por separado. Trabaja lo que más te cuesta.' },
    { ic: 'bolt',      t: 'Acceso inmediato',
      d: 'Compra, recibe el email y empieza a practicar. Acceso durante 90 días desde cualquier dispositivo.' },
    { ic: 'chart',     t: 'Corrección y seguimiento',
      d: 'Tests autocorregidos al instante. Writing y Speaking revisados por nuestros profesores con feedback.' },
  ];
  return (
    <section className="benefits">
      <div className="container">
        <div className="benefits-head">
          <div>
            <div className="eyebrow"><span className="dot"></span>Por qué nuestra plataforma</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Una preparación <em>ordenada</em>, no un PDF más en tu carpeta.
            </h2>
          </div>
          <p className="lead">
            Practica cada parte del examen de forma ordenada, revisa tus resultados y mejora antes
            de presentarte al Aptis General — con la metodología que usamos en nuestras clases
            presenciales de Granada.
          </p>
        </div>
        <div className="benefits-grid">
          {cards.map((c, i) => (
            <div key={i} className="b-card">
              <div className="ic"><Icon name={c.ic} size={22} /></div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ExamTable = ({ unlockedExams = [1] }) => {
  const isFree = (n) => (window.FULLY_FREE_EXAMS || new Set([1])).has(n);
  const examHasPaidAccess = (n) => unlockedExams.includes(n);
  // Per-skill lock: paid skills (wr, sp) require the plan; free skills (gv, rd, ls) only require Exam ≠ paid scenario.
  const skillUnlocked = (n, key) => window.isSkillUnlocked(n, key, examHasPaidAccess(n));
  // "Row unlocked" = at least the free skills are open (always true for any exam in this model)
  const rowHasAnyAccess = () => true;

  return (
    <section className="exams" id="examenes">
      <div className="container">
        <div className="exams-head">
          <div className="left">
            <div className="eyebrow"><span className="dot"></span>Tabla de exámenes</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              10 simulacros completos, <em>organizados</em> por destrezas.
            </h2>
            <p className="lead">
              Cada fila es un examen Aptis General. <strong>Todos los exámenes son totalmente gratuitos</strong> — incluidas Writing y Speaking con corrección humana por nuestros profesores.
            </p>
          </div>
          <div className="legend">
            <span className="legend-item"><span className="legend-dot unlocked"></span> Gratuito</span>
            <span className="legend-item"><span className="legend-dot locked"></span> Requiere plan</span>
          </div>
        </div>

        <div className="exam-table-wrap">
          {/* Desktop table */}
          <table className="exam-table">
            <thead>
              <tr>
                <th>Examen</th>
                {BA.SKILLS.map(s => <th key={s.key}>{s.short}</th>)}
                <th>Acceso / Plan</th>
              </tr>
            </thead>
            <tbody>
              {BA.EXAMS.map(ex => {
                const free = isFree(ex.num);
                const hasPaid = examHasPaidAccess(ex.num);
                return (
                  <tr key={ex.num}>
                    <td>
                      <a href={`exam-1.html?n=${ex.num}`} style={{ display:'block' }}>
                        <div className="exam-cell">
                          <span className={`exam-num ${free ? 'free' : ''}`}>{ex.num}</span>
                          <div>
                            <div className="exam-name">{ex.name}</div>
                            {free && <span className="exam-free-tag">Gratuito</span>}
                          </div>
                        </div>
                      </a>
                    </td>
                    {BA.SKILLS.map(s => {
                      const unlocked = skillUnlocked(ex.num, s.key);
                      return (
                        <td key={s.key}>
                          {unlocked ? (
                            <a className="skill-btn" href={`test.html?n=${ex.num}#${s.key}`}>
                              <Icon name="play" size={11} /> Hacer test
                            </a>
                          ) : (
                            <a className="skill-btn premium" href="#planes">
                              <Icon name="star" size={11} /> Premium
                            </a>
                          )}
                        </td>
                      );
                    })}
                    <td>
                      {free ? (
                        <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--success)',
                          padding: '4px 10px', borderRadius: 6, background: 'var(--success-soft)',
                          letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                          Gratuito
                        </span>
                      ) : hasPaid ? (
                        <a className="access-btn free" href={`exam-1.html?n=${ex.num}`}>
                          <Icon name="unlock" size={12} /> Acceder
                        </a>
                      ) : (
                        <a className="access-btn upgrade" href="#planes">
                          Ver planes <Icon name="arrow" size={12} />
                        </a>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>

          {/* Mobile cards */}
          <div className="exam-cards">
            {BA.EXAMS.map(ex => {
              const free = isFree(ex.num);
              const hasPaid = examHasPaidAccess(ex.num);
              return (
                <div key={ex.num} className={`exam-card ${free ? 'free' : ''}`}>
                  <div className="exam-card-top">
                    <div className="exam-card-name">
                      <span className={`exam-num ${free ? 'free' : ''}`}>{ex.num}</span>
                      <div>
                        <div>{ex.name}</div>
                        {free && <span className="exam-free-tag">Gratuito</span>}
                        {!free && !hasPaid && (
                          <span style={{ fontSize: 12, color: 'var(--ink-muted)' }}>
                            Writing y Speaking requieren plan
                          </span>
                        )}
                      </div>
                    </div>
                    {(free || hasPaid) ? (
                      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--success)',
                        padding: '4px 8px', borderRadius: 6, background: 'var(--success-soft)',
                        letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                        Gratuito
                      </span>
                    ) : (
                      <a className="access-btn upgrade" href="#planes">Ver planes</a>
                    )}
                  </div>
                  <div className="exam-card-skills">
                    {BA.SKILLS.map(s => {
                      const unlocked = skillUnlocked(ex.num, s.key);
                      return unlocked ? (
                        <a key={s.key} className="skill-btn" href={`test.html?n=${ex.num}#${s.key}`}>
                          {s.short}
                        </a>
                      ) : (
                        <a key={s.key} className="skill-btn premium" href="#planes">
                          <Icon name="star" size={11} /> {s.short} · Premium
                        </a>
                      );
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};
const Plans = () => {
  return (
    <section className="plans" id="planes">
      <div className="container">
        <div className="plans-head">
          <div className="eyebrow" style={{ margin: '0 auto' }}><span className="dot"></span>Planes de acceso</div>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Elige el plan que <em>encaja</em> con tu preparación.
          </h2>
          <p className="lead">
            El <strong>Exam 1 es gratuito y sin caducidad</strong>. Los planes desbloquean el resto de
            simulacros durante 90 días desde la compra, con corrección instantánea de Grammar, Reading
            y Listening, y revisión humana de Writing y Speaking.
          </p>
        </div>
        <div className="plans-grid plans-3">
          {BA.PLANS.map(p => (
            <div key={p.id} className={`plan ${p.featured ? 'featured' : ''}`}>
              {p.featured && <span className="plan-tag">{p.featuredLabel}</span>}
              {p.saveLabel && !p.featured && <span className="plan-save">{p.saveLabel}</span>}
              <h3 className="plan-name">{p.name}</h3>
              <p className="plan-desc">{p.tagline}</p>
              <div className="plan-price">
                {p.originalPrice && (
                  <span className="plan-was">
                    <span style={{ textDecoration: 'line-through' }}>{p.originalPrice}€</span>
                  </span>
                )}
                <span className="cur">€</span>
                <span className="num">{p.price}</span>
                <span className="per">/ pago único</span>
              </div>
              {p.featured && p.saveLabel && (
                <div style={{ marginTop: -10, marginBottom: 16, fontSize: 13, fontWeight: 700,
                  color: 'var(--accent)' }}>
                  ✓ {p.saveLabel} con este plan
                </div>
              )}
              <div className="plan-includes">Incluye</div>
              <ul className="plan-list">
                <li><Icon name="check" size={14} />
                  <span><strong>Exámenes {p.exams[0]}–{p.exams[p.exams.length - 1]}</strong>
                  {' '}<span style={{ color: 'var(--ink-muted)', fontWeight: 500 }}>· {p.exams.length} simulacros completos</span></span>
                </li>
                <li><Icon name="check" size={14} /> Las 5 destrezas en cada examen</li>
                <li><Icon name="check" size={14} /> 90 días de acceso desde la compra</li>
                <li><Icon name="check" size={14} /> Corrección humana de Writing &amp; Speaking</li>
                <li><Icon name="check" size={14} /> Resultados detallados con nivel MCER (A1–C1)</li>
              </ul>
              <div className="plan-cta">
                <button className="btn btn-dark btn-block">Comprar plan</button>
                <div className="plan-foot">Pago seguro · Acceso inmediato</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 56, padding: 24, background: 'var(--bg-warm)',
          border: '1px solid var(--line)', borderRadius: 16,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap'
        }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 4 }}>¿Prefieres preparar Aptis con clases?</div>
            <div style={{ fontSize: 14, color: 'var(--ink-soft)' }}>
              Nuestros cursos presenciales y online en Granada combinan clases con esta plataforma.
            </div>
          </div>
          <a className="btn btn-outline" href="https://bristolprivatelessons.es/aptis-cursos-en-granada-ingles/" target="_blank" rel="noopener">
            Quiero preparar Aptis con clases <Icon name="arrow" size={14} />
          </a>
        </div>
      </div>
    </section>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: '¿Estos simulacros son los del British Council?',
      a: 'No. Bristol Academy Aptis Exam Trainer es una plataforma independiente de práctica creada por nuestro equipo docente. Aptis es una marca de sus respectivos titulares; esta plataforma no está afiliada oficialmente ni avalada por British Council. Reproducimos el formato, tiempos y nivel de dificultad para que practiques en condiciones realistas.' },
    { q: '¿Hay que pagar algo?',
      a: 'No. La plataforma es totalmente gratuita: los 10 simulacros, las 5 destrezas y la corrección humana de Writing y Speaking por nuestros profesores no tienen ningún coste.' },
    { q: '¿Cómo se corrigen Writing y Speaking?',
      a: 'Grammar, Vocabulary, Reading y Listening son autocorregidos y muestran tu puntuación al instante. Writing y Speaking se envían a nuestros profesores de Bristol Academy, que los corrigen con feedback orientativo en un plazo máximo de 24 horas hábiles.' },
    { q: '¿Necesito un nivel mínimo para empezar?',
      a: 'Aptis General está diseñado para niveles A2–C, así que la plataforma es útil desde B1 en adelante. Te recomendamos empezar por el Exam 1 gratuito para autoevaluarte.' },
    { q: '¿Puedo combinar la plataforma con clases?',
      a: 'Sí — de hecho lo recomendamos. Nuestros cursos Aptis en Granada usan esta plataforma como práctica entre clases. Puedes ver detalles en bristolprivatelessons.es/aptis-cursos.' },
  ];
  return (
    <section className="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>Preguntas frecuentes</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Antes de <em>empezar</em>.
            </h2>
            <p className="lead">
              Si tienes más dudas, escríbenos desde el formulario o por email a
              {' '}<a style={{ color: 'var(--navy-700)', textDecoration: 'underline' }}
                href="mailto:hola@bristolprivatelessons.es">hola@bristolprivatelessons.es</a>.
            </p>
          </div>
          <div className="faq-list">
            {qs.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <Icon name="plus" size={18} className="ic" />
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;
window.TrustStrip = TrustStrip;
window.Benefits = Benefits;
window.ExamTable = ExamTable;
window.Plans = Plans;
window.FAQ = FAQ;