// Top sections: Nav, Hero, Services

function Nav({ onToggleTheme, dark }) {
  const [open, setOpen] = React.useState(false);
  return (
    <header className="nav">
      <div className="shell nav-inner">
        <a href="#top" className="logo">
          <span className="logo-mark"></span>
          <span>DINI</span>
        </a>
        <nav className="nav-links">
          <a href="#servicios">Servicios</a>
          <a href="#planes">Planes</a>
          <a href="#calculadora">Calculadora</a>
          <a href="#portfolio">Trabajos</a>
          <a href="#proceso">Proceso</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <button
            onClick={onToggleTheme}
            aria-label={dark ? "Cambiar a modo claro" : "Cambiar a modo oscuro"}
            style={{
              width: 36, height: 36, borderRadius: 999,
              background: "var(--bg-1)", border: "1px solid var(--line)",
              display: "grid", placeItems: "center", color: "var(--ink-2)", cursor: "pointer"
            }}
          >
            {dark ? <IconSun size={16} /> : <IconMoon size={16} />}
          </button>
          <a href="#planes" className="btn btn-ghost btn-sm">Ver planes</a>
          <a
            href={window.DINI.waUrl("Hola DINI! Me gustaría cotizar mi proyecto.")}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-primary btn-sm"
          >
            Cotizar <IconArrow size={14} />
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="Hero">
      <div className="shell">
        <div className="hero-grid">
          <div>
            <span className="eyebrow reveal">
              <span className="dot"></span>
              <span>Aceptando proyectos · Mayo 2026</span>
            </span>
            <h1 className="h-display reveal delay-1" style={{ marginTop: 24 }}>
              Tu negocio merece estar{" "}
              <span className="accent-word">online</span>.<br/>
              Te ayudamos a que se note.
            </h1>
            <p className="lede reveal delay-2" style={{ marginTop: 22 }}>
              Sitios, apps y sistemas para emprendedores y pymes.
              Sin tecnicismos, sin sorpresas. Cotizá tu proyecto en
              minutos y arrancamos esta semana.
            </p>
            <div className="hero-cta reveal delay-3">
              <a href="#calculadora" className="btn btn-primary btn-lg">
                Cotizar ahora <IconArrow size={16} />
              </a>
              <a href="#portfolio" className="btn btn-ghost btn-lg">
                Ver ejemplos
              </a>
              <a
                href={window.DINI.waUrl("Hola DINI! Quiero hacer una consulta rápida.")}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-wa btn-lg"
              >
                <IconWA size={18} /> WhatsApp
              </a>
            </div>
            <div className="hero-meta reveal delay-4">
              <div className="hero-meta-item"><IconCheck size={16} /> Respuesta en menos de 4 hs</div>
              <div className="hero-meta-item"><IconCheck size={16} /> Sin costo inicial</div>
              <div className="hero-meta-item"><IconCheck size={16} /> Entrega en 7–21 días</div>
            </div>
          </div>

          <div className="reveal delay-2">
            <div className="mockup-stage">
              <div className="mockup-desktop">
                <HeroDesktopMockup />
              </div>
              <div className="mockup-mobile">
                <HeroMobileMockup />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { icon: <IconWeb size={22} />, name: "Sitios Web", desc: "Institucionales, landings y e-commerce. Carga rápida, mobile-first, listos para vender.", tag: "Web" },
    { icon: <IconApp size={22} />, name: "Apps Móviles", desc: "iOS y Android desde una sola base. Tu marca en el bolsillo de tus clientes.", tag: "Mobile" },
    { icon: <IconSystem size={22} />, name: "Sistemas a medida", desc: "Gestión interna, stock, turnos, facturación. Lo que tu negocio realmente necesita.", tag: "ERP" },
    { icon: <IconAuto size={22} />, name: "Automatización", desc: "Que el negocio funcione sin que estés mirando. WhatsApp, mails, reportes.", tag: "Auto" },
    { icon: <IconAI size={22} />, name: "IA y agentes", desc: "Chatbots que atienden 24/7, búsquedas inteligentes y análisis de datos.", tag: "AI" },
    { icon: <IconDash size={22} />, name: "Dashboards", desc: "Tus números en una pantalla. Decisiones con datos, no con intuición.", tag: "BI" },
  ];
  return (
    <section id="servicios" data-screen-label="Servicios">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span><span>Qué hacemos</span></span>
          <h2 className="h-section">
            Todo lo que necesitás para llevar tu negocio al{" "}
            <span className="mark-accent">próximo nivel</span>.
          </h2>
          <p className="lede">
            Diseño, desarrollo y automatización en un solo lugar. Sin tener que
            coordinar entre 3 proveedores distintos.
          </p>
        </div>
        <div className="svc-grid">
          {items.map((s, i) => (
            <div className="svc-card" key={i}>
              <span className="tag">{s.tag}</span>
              <span className="ico">{s.icon}</span>
              <h3>{s.name}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Services });