// pages/About.jsx
function AboutPage({ onNav }) {
  return (
    <>
      <section className="im-about-hero">
        <div className="im-about-hero-grid">
          <div>
            <span className="im-eyebrow">Sobre mí</span>
            <h1 className="im-about-title">Isa Muñoz.<br />Monto cosas que ahorran tiempo.</h1>
            <p className="im-lead">Llevo más de 10 años trabajando en el sector tecnológico para quitarle carga administrativa al negocio: webs, agentes, dashboards, lo que haga falta. Este blog es donde comparto lo que aprendo por el camino.</p>
            <div className="im-hero-actions">
              <button className="im-btn im-btn-primary" onClick={() => onNav('blog')}>Ver el blog →</button>
              <button className="im-btn im-btn-ghost" onClick={() => onNav('works')}>Ver trabajos</button>
            </div>
          </div>
          <div className="im-about-portrait">
            <div className="im-about-portrait-frame">
              <img
                src="assets/isa-portrait.jpg"
                alt="Isa Muñoz"
                className="im-about-portrait-img"
              />
            </div>
          </div>
        </div>
      </section>

      <section className="im-section">
        <div className="im-about-cols">
          <div>
            <h2 className="im-h2">En qué trabajo</h2>
            <ul className="im-about-list">
              <li><strong>IA aplicada</strong> — agentes a medida, aplicaciones con IA generativa, webs...</li>
              <li><strong>CRM</strong> — sobre todo Microsoft Dynamics. Integraciones, limpieza de datos, embudos.</li>
              <li><strong>Automatizaciones</strong> — n8n y Make. Workflows que conectan herramientas que el cliente ya paga.</li>
              <li><strong>Dosieres y documentos</strong> — generación automática a partir de plantillas controladas.</li>
            </ul>
          </div>
          <div>
            <h2 className="im-h2">En qué no</h2>
            <ul className="im-about-list">
              <li>No monto landing pages bonitas pero vacías.</li>
              <li>No prometo "transformación digital" en una llamada de 30 minutos.</li>
              <li>No uso IA donde no aporta — a veces un script de cuatro líneas resuelve mejor.</li>
            </ul>
          </div>
        </div>
      </section>

      <section className="im-section im-about-stack">
        <div className="im-section-head">
          <div>
            <span className="im-eyebrow">Stack habitual</span>
            <h2 className="im-h2">Las herramientas que uso</h2>
          </div>
        </div>
        <div className="im-stack-grid">
          {['n8n', 'Make', 'Gemini', 'Antigravity', 'OpenAI', 'Claude Code', 'Google AI Studio', 'Claude Design', 'Google Workspace', 'Power Apps', 'Supabase', 'GitHub'].map((t) =>
          <div key={t} className="im-stack-chip">{t}</div>
          )}
        </div>
      </section>

      <ContactForm />
    </>);

}

window.AboutPage = AboutPage;