// platform.jsx — Demo / screenshots de la plataforma

function Platform() {
  const [tab, setTab] = React.useState('dashboard');
  const screens = {
    dashboard: { src: 'assets/platform-dashboard-new.png', url: 'app.wpguardian.com/security', title: 'Dashboard de seguridad' },
    diagnostics: { src: 'assets/platform-diagnostics.png', url: 'app.wpguardian.com/site/goldstarroofingla.com', title: 'Diagnóstico del sitio' },
    actionplan: { src: 'assets/platform-action-plan.png', url: 'app.wpguardian.com/site/goldstarroofingla.com/plan', title: 'Plan de acción' },
  };
  const cur = screens[tab];

  return (
    <section className="section" id="plataforma">
      <div className="sec-head">
        <span className="eyebrow">La plataforma</span>
        <h2 className="display h2">
          Todo el estado de tu web,<br/>
          <span style={{ color: 'var(--primary)' }}>en una sola consola.</span>
        </h2>
        <p className="lead">
          Sistema, seguridad, urgencia, plugins, backups, plan de acción. Lo que un buen administrador miraría todos los días — automatizado y centralizado.
        </p>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 22, flexWrap: 'wrap' }}>
        {Object.entries(screens).map(([k, s]) => (
          <button
            key={k}
            onClick={() => setTab(k)}
            className="pill"
            style={{
              cursor: 'pointer',
              height: 36, padding: '0 18px',
              fontSize: 12,
              background: tab === k ? 'var(--primary)' : 'rgba(20,37,69,0.6)',
              borderColor: tab === k ? 'var(--primary)' : 'var(--border)',
              color: tab === k ? '#fff' : 'var(--text-muted)',
              boxShadow: tab === k ? '0 0 24px rgba(30,156,255,0.4)' : 'none'
            }}
          >
            {s.title}
          </button>
        ))}
      </div>

      <div className="frame">
        <div className="frame-bar">
          <div className="frame-dots">
            <div className="frame-dot r" /><div className="frame-dot y" /><div className="frame-dot g" />
          </div>
          <div style={{ flex: 1, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            {cur.title}
          </div>
          <span className="pill live" style={{ height: 22, fontSize: 10 }}><span className="dot pulse" />LIVE</span>
        </div>
        <div className="frame-body">
          <img src={cur.src} alt={cur.title} />
        </div>
      </div>

      <div className="grid-3" style={{ marginTop: 32 }}>
        <FeatBullet title="Diagnóstico instantáneo" body="Versiones, hosting, urgencia, plugins con updates pendientes. Todo en una vista." />
        <FeatBullet title="Plan de acción registrado" body="Cada paso ejecutado queda con timestamp, tipo (auto / manual) y resultado." />
        <FeatBullet title="Backups verificados" body="No solo se hacen — se prueban. Pre-update y post-update, siempre." />
      </div>
    </section>
  );
}

function FeatBullet({ title, body }) {
  return (
    <div style={{ borderLeft: '2px solid var(--primary)', paddingLeft: 18 }}>
      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text)', marginBottom: 6 }}>{title}</div>
      <div style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.5 }}>{body}</div>
    </div>
  );
}

Object.assign(window, { Platform });