// Mid sections: Portfolio, Process, AI block

function Portfolio() {
  const items = [
    { kind: "ecommerce", title: "Norte Outdoor", tag: "E-commerce", desc: "Tienda con catálogo, pagos y envíos." },
    { kind: "dashboard", title: "Mendía Distribución", tag: "Dashboard", desc: "Panel de ventas en tiempo real." },
    { kind: "salon", title: "Sofía Estilismo", tag: "Reservas", desc: "Sitio + sistema de turnos online." },
    { kind: "gym", title: "RAWFIT", tag: "Landing", desc: "Captación con planes y pagos." },
  ];
  return (
    <section id="portfolio" data-screen-label="Portfolio">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span><span>Trabajos</span></span>
          <h2 className="h-section">
            Algunos ejemplos que armamos.
          </h2>
          <p className="lede">
            Casos de muestra para que veas cómo se pueden ver distintos tipos
            de negocio. Si querés algo similar para vos, lo armamos.
          </p>
        </div>
        <div className="portfolio-grid">
          {items.map((it) => (
            <div className="portfolio-card" key={it.title}>
              <div className="portfolio-preview">
                <PortfolioMock kind={it.kind} />
              </div>
              <div className="portfolio-meta">
                <div>
                  <h3>{it.title}</h3>
                  <p>{it.desc}</p>
                </div>
                <span className="portfolio-tag">{it.tag}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: "center", color: "var(--ink-3)", fontSize: 14 }}>
          Empezamos en 2026 con un cupo limitado de proyectos. Tu marca puede ser la próxima.
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "01", t: "Charlamos", d: "Por WhatsApp o formulario. Nos contás qué necesitás, te hacemos preguntas y proponemos el plan ideal.", time: "Día 1" },
    { n: "02", t: "Diseñamos", d: "Te mostramos un primer diseño con tu marca y contenido real. Iteramos hasta que te encante.", time: "Día 2–5" },
    { n: "03", t: "Construimos", d: "Programamos, conectamos integraciones y dejamos todo listo. Te mostramos avances en vivo.", time: "Día 5–14" },
    { n: "04", t: "Lanzamos", d: "Subimos el sitio o app, te capacitamos para usarlo y quedamos disponibles para ajustes.", time: "Día 15–21" },
  ];
  return (
    <section id="proceso" data-screen-label="Proceso">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span><span>Cómo trabajamos</span></span>
          <h2 className="h-section">
            Sin sorpresas. Sin reuniones eternas.
          </h2>
          <p className="lede">
            Un proceso claro de 4 pasos. Vos te enfocás en tu negocio,
            nosotros nos encargamos del resto.
          </p>
        </div>
        <div className="process-grid">
          {steps.map((s) => (
            <div className="proc" key={s.n}>
              <span className="proc-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <div className="proc-time">
                <IconClock size={13} /> {s.time}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AIBlock() {
  return (
    <section id="ia" data-screen-label="IA">
      <div className="shell">
        <div className="ai-block">
          <div>
            <span className="eyebrow" style={{ background: "rgba(57,255,20,0.08)", borderColor: "rgba(57,255,20,0.2)" }}>
              <span className="dot"></span><span>Inteligencia Artificial</span>
            </span>
            <h2 className="h-section" style={{ marginTop: 22 }}>
              Que tu negocio{" "}
              <span className="accent" style={{ fontStyle: "italic" }}>trabaje solo</span>.
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              Sumamos IA donde realmente sirve: atender clientes, procesar pedidos,
              entender tus números, automatizar tareas repetitivas. Sin moda, sin humo.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 26, flexWrap: "wrap" }}>
              <a href={window.DINI.waUrl("Hola DINI! Quiero saber cómo puedo usar IA en mi negocio.")} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                <IconWA size={16} /> Hablar de mi caso
              </a>
              <a href="#calculadora" className="btn btn-ghost">Cotizar con IA</a>
            </div>
          </div>
          <div className="ai-pillars">
            {[
              { ico: <IconChat size={18} />, t: "Chatbot 24/7", d: "Responde clientes en WhatsApp y web. Aprende de tu negocio." },
              { ico: <IconBolt size={18} />, t: "Automatizaciones", d: "Mails, recordatorios, reportes. Lo repetitivo, sin manos." },
              { ico: <IconChart size={18} />, t: "Análisis inteligente", d: "Detectamos patrones, anomalías y oportunidades en tus datos." },
              { ico: <IconSparkles size={18} />, t: "Generación de contenido", d: "Descripciones, fichas técnicas, posts. A partir de lo tuyo." },
            ].map((p, i) => (
              <div className="ai-pill" key={i}>
                <div className="ico">{p.ico}</div>
                <div>
                  <h4>{p.t}</h4>
                  <p>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio, Process, AIBlock });