/* global React, Reveal, SectionHead, PalmMark, Hero, InteractivePhone */
// ====================================================================
// Page — the entire site is one continuous scroll now. No tabs.
// ====================================================================

const MARQUEE = ["Android", "Kotlin", "Jetpack Compose", "Node.js", "APIs en tiempo real", "Web Scraping", "Firebase", "UX que enamora"];

const STATS = [
  { n: "30+", l: "Tiendas compatibles" },
  { n: "∞", l: "Listas y productos" },
  { n: "100%", l: "Gratis para empezar" },
  { n: "MX", l: "Hecho en Mexicali" },
];

const FEATURES = [
  { t: "Todo en un solo lugar", d: "Pega el link de cualquier producto y CartAnywhere extrae nombre, precio, imagen y disponibilidad al instante." },
  { t: "Listas compartidas", d: "Invita por link o código QR. Todos agregan, nadie duplica, y te enteras al momento cuando algo se compra." },
  { t: "Meses sin intereses", d: "Registra tus tarjetas y tus compras a MSI — calendario de pagos y recordatorios, sin sorpresas." },
  { t: "Bajadas de precio", d: "Premium revisa tus productos guardados todos los días y te avisa apenas algo baja de precio." },
];

function StatRow() {
  return (
    <Reveal className="stat-row wrap" delay={80}>
      {STATS.map((s) => (
        <div className="stat-chip" key={s.l}>
          <strong>{s.n}</strong>
          <span>{s.l}</span>
        </div>
      ))}
    </Reveal>
  );
}

function Statement() {
  return (
    <section className="statement">
      <div className="statement-motes" aria-hidden="true">
        {Array.from({ length: 18 }).map((_, i) => (
          <span
            key={i}
            className="statement-mote"
            style={{
              left: `${(i * 29 + 7) % 100}%`,
              top: `${(i * 17 + 11) % 90}%`,
              animationDelay: `${(i % 6) * 0.8}s`,
              animationDuration: `${5 + (i % 4)}s`,
            }}
          />
        ))}
      </div>
      <PalmMark size={64} color="var(--gold)" trunk="var(--sunset)" animated style={{ marginBottom: 28 }} />
      <Reveal as="h2" className="statement-title">
        Deja de perder<br />tus compras <span className="serif-em">de vista</span>.
      </Reveal>
      <Reveal as="p" className="statement-sub" delay={120}>
        Un lugar. Todas tus tiendas. Tu gente.
      </Reveal>
    </section>
  );
}

function ProductSection() {
  return (
    <section id="producto" className="section wrap product-section">
      <SectionHead
        eyebrow="Producto"
        title={<>La app, <span className="serif-em">tal cual</span> la vas a usar.</>}
        sub="Toca las pestañas — así se ve CartAnywhere de verdad."
        align="center"
      />
      <Reveal className="phone-stage" delay={100}>
        <div className="feat-phone-glow" />
        <InteractivePhone />
      </Reveal>
    </section>
  );
}

function Features() {
  return (
    <section className="section-tight wrap">
      <SectionHead
        eyebrow="Por qué CartAnywhere"
        title={<>Hecho para cómo <span className="serif-em">compras</span> de verdad.</>}
      />
      <div className="feat-cards feat-cards-4">
        {FEATURES.map((f, i) => (
          <Reveal key={f.t} delay={(i % 2) * 90} className="feat-mini card">
            <span className="feat-mini-glyph" />
            <h3>{f.t}</h3>
            <p>{f.d}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="nosotros" className="wrap">
      <Reveal className="locale">
        <div className="locale-art">
          <div className="locale-sun" />
          <PalmMark size={150} color="var(--palm-deep)" trunk="var(--sunset-deep)" animated />
          <div className="locale-dune" />
        </div>
        <div className="locale-copy">
          <span className="eyebrow">Oasis Dev Labs</span>
          <h2>Un estudio chico,<br /><span className="serif-em">obsesivo</span> con el detalle.</h2>
          <p>Fundados en 2026 en Mexicali, Baja California. Creemos que la tecnología debe empoderar a las personas, no complicarles la vida — CartAnywhere es la primera prueba de eso.</p>
        </div>
      </Reveal>
    </section>
  );
}

function DownloadCTA() {
  return (
    <section id="contacto" className="wrap">
      <Reveal className="cta-band">
        <div className="cta-band-bg" />
        <div className="cta-band-content">
          <PalmMark size={56} color="#fff" trunk="var(--gold)" animated />
          <h2>Gratis en Google Play.</h2>
          <p>Organiza, comparte y controla tus gastos desde hoy.</p>
          <a
            className="btn btn-sun"
            href="https://play.google.com/store/apps/details?id=com.app.cartanywhere"
            target="_blank"
            rel="noopener"
          >
            Descargar CartAnywhere <span className="arrow">→</span>
          </a>
        </div>
      </Reveal>
    </section>
  );
}

function Page() {
  return (
    <>
      <Hero />
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {[...MARQUEE, ...MARQUEE].map((m, i) => (
            <span className="marquee-item" key={i}>
              {m} <span className="marquee-sep">✺</span>
            </span>
          ))}
        </div>
      </div>
      <StatRow />
      <Statement />
      <ProductSection />
      <Features />
      <About />
      <DownloadCTA />
    </>
  );
}

window.Page = Page;