/* global React, Reveal, SectionHead, PalmMark */
// ====================================================================
// PhoneMock — a tasteful representative mock of the CartAnywhere app.
// (Placeholder UI until real screenshots are supplied.)
// ====================================================================

function PhoneMock({ float = true }) {
  const items = [
    { name: "Ray-Ban Meta Wayfarer (Gen 1)", price: "MXN 5,301.72", old: "MXN 7,069.00", disc: "-25%", store: "Amazon" },
    { name: "SOJOS Lentes de Sol Hexagonal Metal", price: "MXN 339.99", store: "Amazon" },
    { name: "MARBERO Generador portátil 88.8 Wh", price: "MXN 1,988.99", store: "Amazon" },
    { name: "Samsung Galaxy Buds Core", price: "MXN 699.00", old: "MXN 999.00", disc: "-30%", store: "eBay" },
  ];
  return (
    <div className={"phone" + (float ? " phone-float" : "")}>
      <div className="phone-notch" />
      <div className="phone-screen ca-screen">
        <div className="ca-status"><span>23:42</span><span className="ca-sig" /></div>
        <div className="ca-head">
          <span className="ca-title">Mis Productos</span>
          <span className="ca-head-ic"><i className="ca-i-check" /><i className="ca-i-filter" /></span>
        </div>
        <div className="ca-list">
          {items.map((it, i) => (
            <div className="ca-card" key={i}>
              <div className="ca-thumb" />
              <div className="ca-info">
                <span className="ca-name">{it.name}</span>
                <div className="ca-prices">
                  <span className="ca-price">{it.price}</span>
                  {it.old && <span className="ca-old">{it.old}</span>}
                  {it.disc && <span className="ca-disc">{it.disc}</span>}
                </div>
                <span className="ca-store">{it.store}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="ca-pending">
          <span>Total pendiente · 16 productos</span>
          <strong>MXN 66,300.31</strong>
        </div>
        <div className="ca-nav">
          <span className="active"><i className="ca-nv ca-nv-home" />Inicio</span>
          <span><i className="ca-nv ca-nv-list" />Listas</span>
          <span><i className="ca-nv ca-nv-share" />Compartidas</span>
          <span><i className="ca-nv ca-nv-cog" />Ajustes</span>
        </div>
        <div className="ca-fab">+</div>
      </div>
    </div>
  );
}

// ====================================================================
// HomeBody — everything on the Inicio tab below the hero.
// ====================================================================

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

const PILLARS = [
  { n: "01", t: "Diseño primero", d: "Cada pantalla empieza como una idea de experiencia, no como una lista de funciones. La forma sigue al usuario." },
  { n: "02", t: "Nativo en ambas", d: "Construimos para iOS y Android con herramientas modernas — rendimiento real y detalles que se sienten en casa en cada plataforma." },
  { n: "03", t: "De idea a tienda", d: "Concepto, prototipo, backend, publicación y mantenimiento. Acompañamos todo el camino hasta el App Store y Play Store." },
];

function HomeBody({ go }) {
  return (
    <div className="home-body">
      {/* marquee */}
      <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>

      {/* pillars */}
      <section className="section wrap">
        <SectionHead
          eyebrow="Cómo trabajamos"
          title={<>Software con <span className="serif-em">intención</span>, no plantillas.</>}
          sub="Somos un estudio pequeño y obsesivo. Eso significa que cada detalle pasa por manos que les importa."
        />
        <div className="pillars">
          {PILLARS.map((p, i) => (
            <Reveal key={p.n} delay={i * 110} className="pillar card">
              <span className="pillar-n">{p.n}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* featured product */}
      <section className="section feat">
        <div className="wrap feat-inner">
          <div className="feat-copy">
            <Reveal as="span" className="eyebrow">Producto destacado</Reveal>
            <Reveal as="h2" className="feat-title" delay={80}>CartAnywhere</Reveal>
            <Reveal as="p" className="feat-lead" delay={140}>
              Guarda los productos que te interesan de cualquier tienda en línea
              y tenlos todos en un solo lugar. Controla tus gastos y tus pagos a
              meses sin intereses sin perder de vista una oferta.
            </Reveal>
            <Reveal className="feat-points" delay={200}>
              {["Todos tus productos en un solo lugar", "Visualiza cuánto gastas cada mes", "Controla tus pagos a meses sin intereses"].map((f) => (
                <span className="feat-point" key={f}><span className="feat-tick" />{f}</span>
              ))}
            </Reveal>
            <Reveal delay={260}>
              <button className="btn btn-primary" onClick={() => go("productos")}>
                Conoce CartAnywhere <span className="arrow">→</span>
              </button>
            </Reveal>
          </div>
          <Reveal className="feat-phone" delay={120}>
            <div className="feat-phone-glow" />
            <PhoneMock />
          </Reveal>
        </div>
      </section>

      {/* CTA band */}
      <section 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>¿Tienes una idea? Hagámosla una app.</h2>
            <p>Desde el primer boceto hasta el lanzamiento, construimos contigo.</p>
            <button className="btn btn-sun" onClick={() => go("contacto")}>
              Iniciar un proyecto <span className="arrow">→</span>
            </button>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

window.PhoneMock = PhoneMock;
window.HomeBody = HomeBody;