/* global React */
// ============================================================
// AppSection — teaser app móvil. Mockup replica staging.meefi.io.
// Logo: assets/meefi-logo.png (isotipo circular oficial).
// ============================================================
function AppSection() {
  const MIcon = () => (
    <svg viewBox="0 0 24 24" width="24" height="24">
      <circle cx="12" cy="12" r="12" fill="#0530CE"/>
      <text x="12" y="16.5" textAnchor="middle" fill="white"
        fontSize="11" fontWeight="700"
        fontFamily="Inter,system-ui,sans-serif" fontStyle="normal">m</text>
    </svg>
  );

  return (
    <section className="appx-section" data-screen-label="App" id="app">
      <div className="wrap">
        <div className="appx-grid reveal">

          {/* ── IZQUIERDA — copy ── */}
          <div className="appx-copy">
            <span className="appx-badge">
              <span className="appx-badge-dot" /> Próximamente · en desarrollo
            </span>
            <h2 className="appx-title">
              Pronto, tu tesorería<br/>
              <span className="appx-title-dim">también en tu bolsillo.</span>
            </h2>
            <p className="appx-lede">
              Estamos construyendo la app móvil de Meefi para que cierres
              operaciones en segundos desde tu celular: aprueba pagos, revisa
              saldos y mantén tu operación en movimiento, estés donde estés.
            </p>
            <p className="appx-note">
              Lanzamiento próximo. Te avisaremos cuando esté lista.
            </p>
          </div>

          {/* ── DERECHA — iPhone con UI Meefi ── */}
          <div className="appx-visual" aria-hidden="true">
            <div className="appx-phone">
              <span className="appx-btn appx-btn-action" />
              <span className="appx-btn appx-btn-volup" />
              <span className="appx-btn appx-btn-voldn" />
              <span className="appx-btn appx-btn-power" />

              <div className="appx-screen">
                <span className="appx-island" />

                {/* Status bar */}
                <div className="appx-statusbar">
                  <span className="appx-sb-time">9:41</span>
                  <span className="appx-sb-icons">
                    <svg viewBox="0 0 18 12" width="16" height="10" fill="#1B1F26">
                      <rect x="0"  y="8"   width="3" height="4"    rx="1"/>
                      <rect x="5"  y="5.5" width="3" height="6.5"  rx="1"/>
                      <rect x="10" y="3"   width="3" height="9"    rx="1"/>
                      <rect x="15" y="0.5" width="3" height="11.5" rx="1"/>
                    </svg>
                    <svg viewBox="0 0 16 12" width="14" height="10" fill="none" stroke="#1B1F26" strokeWidth="1.5" strokeLinecap="round">
                      <path d="M1 4.1a10 10 0 0 1 14 0"/>
                      <path d="M3.5 6.6a6.5 6.5 0 0 1 9 0"/>
                      <path d="M6 9.1a3 3 0 0 1 4 0"/>
                      <circle cx="8" cy="10.9" r="0.6" fill="#1B1F26" stroke="none"/>
                    </svg>
                    <span className="appx-sb-batt"><i/></span>
                  </span>
                </div>

                {/* ── Header: isotipo arriba, saludo abajo ── */}
                <div className="appx-header">
                  <div className="appx-header-row">
                    <img
                      src="assets/meefi-logo.png"
                      alt="Meefi"
                      className="appx-logo-img"
                    />
                    <div className="appx-header-actions">
                      <span className="appx-hbtn">
                        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                          <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                        </svg>
                      </span>
                      <span className="appx-avatar">R</span>
                    </div>
                  </div>
                  <div className="appx-greeting">
                    <span className="appx-greeting-hi">Buenos días,</span>
                    <span className="appx-greeting-name">Roberto</span>
                  </div>
                </div>

                {/* ── Balance card ── */}
                <div className="appx-balance-card">
                  <div className="appx-balance-meta">
                    <span className="appx-balance-label">Balance en Meefi</span>
                    <span className="appx-balance-period">Jun 2026 ▾</span>
                  </div>
                  <div className="appx-balance-amount">
                    $24,736.96
                    <span className="appx-balance-ccy">USD</span>
                  </div>
                  <div className="appx-balance-delta">
                    <span className="appx-delta appx-delta-up">
                      <svg viewBox="0 0 12 12" width="9" height="9" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                        <path d="M6 9V3M3 6l3-3 3 3"/>
                      </svg>
                      $0.00
                    </span>
                    <span className="appx-delta appx-delta-dn">
                      <svg viewBox="0 0 12 12" width="9" height="9" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                        <path d="M6 3v6M3 6l3 3 3-3"/>
                      </svg>
                      $0.04
                    </span>
                  </div>
                  <div className="appx-chart-wrap">
                    <svg viewBox="0 0 240 44" width="100%" height="44" preserveAspectRatio="none">
                      <defs>
                        <linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
                          <stop offset="0%"   stopColor="#0530CE" stopOpacity="0.16"/>
                          <stop offset="100%" stopColor="#0530CE" stopOpacity="0"/>
                        </linearGradient>
                      </defs>
                      <path d="M0 12 L44 12 L82 28 L120 32 L158 32 L182 39 L202 33 L240 34 L240 44 L0 44 Z"
                            fill="url(#cg)"/>
                      <path d="M0 12 L44 12 L82 28 L120 32 L158 32 L182 39 L202 33 L240 34"
                            fill="none" stroke="#0530CE" strokeWidth="1.6"
                            strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <div className="appx-chart-dates">
                      <span>May 27</span><span>Jun 11</span><span>Jun 21</span>
                    </div>
                  </div>
                </div>

                {/* ── Acciones rápidas ── */}
                <div className="appx-actions">
                  {[
                    {
                      label: "Enviar", primary: true,
                      icon: <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2 11 13"/><path d="M22 2 15 22 11 13 2 9l20-7z"/></svg>
                    },
                    {
                      label: "Masivo", primary: false,
                      icon: <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                    },
                    {
                      label: "Factura", primary: false,
                      icon: <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
                    },
                  ].map(a => (
                    <span key={a.label} className={"appx-action-btn" + (a.primary ? " appx-action-primary" : " appx-action-ghost")}>
                      {a.icon}{a.label}
                    </span>
                  ))}
                </div>

                {/* ── Cuentas ── */}
                <div className="appx-accounts">
                  <div className="appx-accounts-hd">
                    <span className="appx-accounts-title">Cuentas</span>
                    <span className="appx-accounts-link">
                      Ver todas
                      <svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="m9 18 6-6-6-6"/></svg>
                    </span>
                  </div>
                  {[
                    { name: "Principal",   sub: "Acct ••2000 · USD", bal: "$6,636.95" },
                    { name: "Proveedores", sub: "Acct ••4000 · USD", bal: "$3,600.01" },
                    { name: "Nómina STP",  sub: "Sin cuenta USD",    bal: "$0.00"     },
                  ].map(acc => (
                    <div className="appx-account-row" key={acc.name}>
                      <span className="appx-account-icon"><MIcon /></span>
                      <span className="appx-account-meta">
                        <span className="appx-account-name">{acc.name}</span>
                        <span className="appx-account-sub">{acc.sub}</span>
                      </span>
                      <span className="appx-account-bal">{acc.bal}</span>
                    </div>
                  ))}
                </div>

                {/* ── Bottom tabs ── */}
                <nav className="appx-tabs">
                  {[
                    { label: "Inicio",      active: true,
                      icon: <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> },
                    { label: "Cuentas",     active: false,
                      icon: <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg> },
                    { label: "Movimientos", active: false,
                      icon: <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> },
                    { label: "Más",         active: false,
                      icon: <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="5" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="19" r="1" fill="currentColor"/></svg> },
                  ].map(t => (
                    <span key={t.label} className={"appx-tab" + (t.active ? " is-active" : "")}>
                      {t.icon}
                      <span>{t.label}</span>
                    </span>
                  ))}
                </nav>

                <span className="appx-home-bar" />
              </div>
            </div>
          </div>

        </div>
      </div>
      <style>{APPX_CSS}</style>
    </section>
  );
}

const APPX_CSS = `
/* ── Sección ── */
.appx-section{ background:var(--bg-2); }
.appx-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);
  gap:64px; align-items:center;
}
.appx-copy{ max-width:520px; }

/* copy */
.appx-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:rgba(5,48,206,.08);
  padding:6px 14px 6px 12px; border-radius:9999px; margin-bottom:22px;
}
.appx-badge-dot{
  width:6px; height:6px; border-radius:9999px; background:var(--accent);
  box-shadow:0 0 0 4px rgba(5,48,206,.15);
  animation:pulse-dot var(--pulse-cycle) var(--ease-smooth) infinite;
}
.appx-title{
  margin:0 0 20px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,2.6vw + 1rem,3.1rem); line-height:1.06;
  letter-spacing:-.03em; color:var(--fg-1);
}
.appx-title-dim{ color:var(--fg-2); }
.appx-lede{ margin:0 0 14px; font-size:17px; line-height:1.6; color:var(--fg-2); }
.appx-note{ margin:0; font-size:13px; color:var(--fg-3); }

/* ── iPhone shell ── */
.appx-visual{ display:flex; justify-content:center; }
.appx-phone{
  position:relative; width:316px; aspect-ratio:316/676; padding:12px;
  border-radius:58px;
  background:linear-gradient(150deg,#484b52 0%,#26282e 17%,#191b20 50%,#26282e 83%,#484b52 100%);
  box-shadow:
    0 64px 100px -40px rgba(4,10,34,.55),
    0 28px 52px -28px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,255,255,.07);
}

/* botones laterales */
.appx-btn{ position:absolute; z-index:0; background:linear-gradient(90deg,#45484f,#2c2f35); }
.appx-btn-action{ left:-2.5px; top:100px; width:3px; height:26px; border-radius:3px 0 0 3px; }
.appx-btn-volup{  left:-2.5px; top:146px; width:3px; height:48px; border-radius:3px 0 0 3px; }
.appx-btn-voldn{  left:-2.5px; top:204px; width:3px; height:48px; border-radius:3px 0 0 3px; }
.appx-btn-power{  right:-2.5px; top:168px; width:3px; height:68px; border-radius:0 3px 3px 0;
  background:linear-gradient(270deg,#45484f,#2c2f35); }

/* pantalla */
.appx-screen{
  position:relative; height:100%; border-radius:46px;
  background:#F8FAFD; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.55);
}
.appx-island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:82px; height:24px; border-radius:9999px; background:#05070d; z-index:10;
}
.appx-home-bar{
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:108px; height:4px; border-radius:9999px;
  background:rgba(27,31,38,.20); z-index:10;
}

/* status bar */
.appx-statusbar{
  display:flex; align-items:center; justify-content:space-between;
  height:44px; padding:0 24px 0 28px; flex:0 0 auto; background:#F8FAFD;
}
.appx-sb-time{
  font-size:12.5px; font-weight:600; color:#1B1F26;
  letter-spacing:.01em; font-variant-numeric:tabular-nums;
}
.appx-sb-icons{ display:inline-flex; align-items:center; gap:5px; }
.appx-sb-batt{
  position:relative; width:19px; height:9px;
  border:1.5px solid rgba(27,31,38,.38); border-radius:2.5px;
  padding:1px; display:inline-flex;
}
.appx-sb-batt::after{
  content:''; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
  width:1.5px; height:4px; border-radius:0 1px 1px 0;
  background:rgba(27,31,38,.38);
}
.appx-sb-batt i{ display:block; width:76%; height:100%; border-radius:1px; background:#1B1F26; }

/* header */
.appx-header{
  padding:4px 14px 12px; background:#F8FAFD;
  border-bottom:1px solid rgba(17,24,39,.06); flex:0 0 auto;
}
.appx-header-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.appx-logo-img{
  height:32px; width:32px;
  object-fit:contain; object-position:center;
  border-radius:8px;
}
.appx-header-actions{ display:flex; align-items:center; gap:7px; }
.appx-hbtn{
  width:28px; height:28px; border-radius:9999px;
  background:rgba(5,48,206,.08); color:#0530CE;
  display:inline-flex; align-items:center; justify-content:center;
}
.appx-avatar{
  width:28px; height:28px; border-radius:9999px;
  background:#0530CE; color:#fff;
  font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
.appx-greeting{ display:flex; align-items:baseline; gap:4px; line-height:1.2; }
.appx-greeting-hi{
  font-size:11px; font-weight:400; color:#9CA3AF;
}
.appx-greeting-name{
  font-size:13px; font-weight:700; color:#1B1F26; letter-spacing:-.01em;
}

/* balance card */
.appx-balance-card{
  margin:10px 14px 0; flex:0 0 auto;
  background:#fff; border:1px solid rgba(17,24,39,.07);
  border-radius:16px; padding:13px 15px 9px;
  box-shadow:0 1px 4px rgba(27,31,38,.05);
}
.appx-balance-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:3px;
}
.appx-balance-label{
  font-size:8.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#9CA3AF;
}
.appx-balance-period{ font-size:8.5px; color:#6B7280; font-weight:500; }
.appx-balance-amount{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--font-display); font-size:23px; font-weight:500;
  color:#1B1F26; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-bottom:6px;
}
.appx-balance-ccy{
  font-size:9.5px; font-weight:700; color:#9CA3AF;
  letter-spacing:.07em; text-transform:uppercase;
}
.appx-balance-delta{ display:flex; gap:14px; margin-bottom:9px; }
.appx-delta{
  display:inline-flex; align-items:center; gap:3px;
  font-size:9px; font-weight:600;
}
.appx-delta-up{ color:#16A34A; }
.appx-delta-dn{ color:#DC2626; }
.appx-chart-wrap{ overflow:hidden; }
.appx-chart-dates{
  display:flex; justify-content:space-between; padding:3px 1px 0;
  font-size:7.5px; color:#C4C9D4; font-variant-numeric:tabular-nums;
}

/* acciones */
.appx-actions{
  display:flex; justify-content:center; gap:7px; padding:11px 14px 0; flex:0 0 auto;
}
.appx-action-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:0 12px; height:30px; border-radius:9999px;
  font-size:10.5px; font-weight:600; white-space:nowrap;
  font-family:var(--font-body); cursor:default;
}
.appx-action-primary{
  background:#0530CE; color:#fff;
  box-shadow:0 4px 14px -4px rgba(5,48,206,.50);
}
.appx-action-ghost{
  background:#fff; color:#1B1F26;
  border:1px solid rgba(17,24,39,.11);
}

/* cuentas */
.appx-accounts{
  margin:11px 14px 0; flex:0 0 auto;
  background:#fff; border:1px solid rgba(17,24,39,.07);
  border-radius:16px; overflow:hidden;
  box-shadow:0 1px 4px rgba(27,31,38,.05);
}
.appx-accounts-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(17,24,39,.055);
}
.appx-accounts-title{
  font-size:10.5px; font-weight:700; color:#1B1F26; letter-spacing:-.01em;
}
.appx-accounts-link{
  display:inline-flex; align-items:center; gap:2px;
  font-size:9px; font-weight:600; color:#0530CE;
}
.appx-account-row{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid rgba(17,24,39,.045);
}
.appx-account-row:last-child{ border-bottom:none; }
.appx-account-icon{
  flex:0 0 24px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
}
.appx-account-meta{
  display:flex; flex-direction:column; gap:1.5px; min-width:0; flex:1 1 auto;
}
.appx-account-name{ font-size:10.5px; font-weight:600; color:#1B1F26; }
.appx-account-sub{
  font-size:8.5px; color:#6B7280; opacity:.8;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appx-account-bal{
  font-size:10.5px; font-weight:600; color:#1B1F26;
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}

/* bottom nav */
.appx-tabs{
  margin-top:auto; display:flex;
  border-top:1px solid rgba(17,24,39,.07);
  background:#fff; flex:0 0 auto;
  padding:6px 0 20px;
}
.appx-tab{
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:4px 2px 0;
  font-size:8px; font-weight:600; color:#9CA3AF;
}
.appx-tab svg{ stroke:#9CA3AF; }
.appx-tab.is-active{ color:#0530CE; }
.appx-tab.is-active svg{ stroke:#0530CE; }

@media (max-width:900px){
  .appx-grid{ grid-template-columns:1fr; gap:44px; }
  .appx-copy{ max-width:none; text-align:center; margin:0 auto; }
  .appx-badge,
  .appx-lede{ display:inline-flex; margin-left:auto; margin-right:auto; }
}
@media (max-width:420px){
  .appx-phone{ width:284px; }
}
`;

window.AppSection = AppSection;