/* global React, Reveal, Btn, Arrow, Compass, Placeholder, Counter, SERVICES, METRICS, CASES, CLIENTS */

function Home({ setRoute }) {
  return (
    <main>
      {/* ========= HERO ========= */}
      <section className="hero">
        <div className="rot-orb" />
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <div className="hero-eyebrow eyebrow">
              <Compass size={14} /> &nbsp;Agencia boutique · Colombia · desde 2017
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="hero-title">
              Marketing digital<br />que <span className="accent-word">crece</span> marcas,<br />no solo tráfico.
            </h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="hero-sub">
              Somos una agencia boutique. Diseñamos estrategias digitales ajustadas a cada negocio,
              con equipo senior y capacidad de respuesta rápida.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
              <Btn onClick={() => setRoute('contact')}>Agendar consultoría</Btn>
              <Btn variant="ghost" onClick={() => setRoute('cases')} arrow={false}>Ver casos de éxito</Btn>
            </div>
          </Reveal>

          <Reveal delay={480}>
            <div className="hero-stats">
              {METRICS.map((m, i) => (
                <div key={i}>
                  <div className="metric-num">
                    <Counter to={parseInt(m.num, 10)} />{m.plus && <span className="plus">{m.plus}</span>}
                  </div>
                  <div className="metric-label">{m.label}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ========= CLIENT MARQUEE ========= */}
      <section style={{ padding: '40px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="marquee">
          <div className="marquee-track">
            {[...CLIENTS, ...CLIENTS].map((c, i) => {
              const name = typeof c === 'string' ? c : c.name;
              const logo = typeof c === 'object' && c.logo;
              return (
                <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 60 }}>
                  {logo
                    ? <img src={logo} alt={name} style={{ height: 48, width: 'auto', maxWidth: 140, objectFit: 'contain', opacity: 0.85 }} />
                    : <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--ink-mid)' }}>{name}</span>
                  }
                  <span style={{ color: 'var(--accent)' }}>◆</span>
                </span>
              );
            })}
          </div>
        </div>
      </section>

      {/* ========= DIFFERENTIATORS ========= */}
      <section>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 32 }}>02 — Qué nos diferencia</div>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="display-lg" style={{ maxWidth: '14ch' }}>
              Boutique.<br />
              <span className="serif accent">Senior.</span><br />
              Aliados de verdad.
            </h2>
          </Reveal>

          <div className="grid grid-3" style={{ marginTop: 80, gap: 24 }}>
            {[
              { n: '/A', title: 'Estrategia', body: 'Diseñamos estrategias a la medida de cada cliente. Capacidad de respuesta rápida, sin capas innecesarias.' },
              { n: '/B', title: 'Aliados', body: 'Nos sentimos socios del equipo de nuestros clientes y somos grandes admiradores de sus marcas.' },
              { n: '/C', title: 'Experiencia', body: 'Agencia boutique con músculo senior. Nos ajustamos a las necesidades específicas de cada negocio.' },
            ].map((d, i) => (
              <Reveal key={i} delay={i * 120}>
                <div className="card" style={{ padding: 40, height: '100%' }}>
                  <div className="mono" style={{ color: 'var(--accent)', fontSize: 13, letterSpacing: '0.08em' }}>{d.n}</div>
                  <h3 style={{ fontSize: 36, marginTop: 32, letterSpacing: '-0.02em' }}>{d.title}</h3>
                  <p style={{ marginTop: 16, fontSize: 16 }}>{d.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ========= SERVICES ========= */}
      <section style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 32 }}>03 — Qué ofrecemos</div>
          </Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, flexWrap: 'wrap' }}>
            <Reveal>
              <h2 className="display-lg" style={{ maxWidth: '16ch' }}>
                Seis disciplinas,<br />un solo equipo<br />
                <span className="serif accent">senior.</span>
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ maxWidth: '38ch', fontSize: 17 }}>
                Tu cuenta no se delega a juniors. Estrategia, ejecución y reporte en la misma mesa.
              </p>
            </Reveal>
          </div>

          <div className="grid grid-3" style={{ marginTop: 72 }}>
            {SERVICES.map((s, i) => (
              <Reveal key={s.num} delay={i * 80}>
                <div className="service" onClick={() => setRoute('services')}>
                  <div>
                    <div className="service-num">{s.num} / 06</div>
                    <div className="service-title">{s.title}</div>
                    <p className="service-desc">{s.desc}</p>
                  </div>
                  <ul className="service-list">
                    {s.items.map((it, j) => <li key={j}>{it}</li>)}
                  </ul>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ========= CASES CAROUSEL ========= */}
      <section>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, flexWrap: 'wrap', marginBottom: 64 }}>
            <div>
              <Reveal><div className="eyebrow" style={{ marginBottom: 24 }}>04 — Casos de éxito</div></Reveal>
              <Reveal delay={120}>
                <h2 className="display-lg" style={{ maxWidth: '14ch' }}>
                  Números que<br /><span className="serif accent">importan.</span>
                </h2>
              </Reveal>
            </div>
            <Reveal delay={200}>
              <Btn variant="ghost" onClick={() => setRoute('cases')} arrow>Ver todos los casos</Btn>
            </Reveal>
          </div>

          <Reveal>
            <div className="scroller">
              {CASES.map((c, i) => (
                <div key={c.id} className="case-card" style={{ width: 'min(480px, 85vw)' }} onClick={() => setRoute('cases')}>
                  <div className="case-media">
                    <Placeholder
                      label={`CASE / ${c.id.toUpperCase()}`}
                      tone={i % 2 === 0 ? 'navy' : 'accent'}
                    >
                      captura web · {c.client}
                    </Placeholder>
                  </div>
                  <div className="case-body">
                    <div className="mono" style={{ color: 'var(--ink-low)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                      {c.industry} · {c.year}
                    </div>
                    <div className="case-client" style={{ marginTop: 10 }}>{c.client}</div>
                    <p style={{ fontSize: 14, marginTop: 6 }}>{c.tagline}</p>
                    <div style={{ marginTop: 20, fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', color: 'var(--accent)' }}>
                      {c.metric}
                    </div>
                    <div className="case-tags">
                      {c.services.map((s, j) => <span key={j} className="tag">{s}</span>)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* ========= QUOTE STRIP ========= */}
      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <Reveal>
            <div className="card" style={{ padding: 'clamp(40px, 6vw, 80px)', background: 'var(--ink)', color: 'var(--bg)', border: 'none', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 40, right: 40, opacity: 0.15 }}>
                <Compass size={80} spin />
              </div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)' }}>Testimonio</div>
              <blockquote style={{ margin: '24px 0 0', fontFamily: 'var(--font-serif)', fontSize: 'clamp(28px, 4vw, 56px)', fontStyle: 'italic', lineHeight: 1.15, maxWidth: '22ch' }}>
                "Son más que una agencia. Son <span style={{ color: 'var(--accent)' }}>parte del equipo.</span>"
              </blockquote>
              <div style={{ marginTop: 40, display: 'flex', alignItems: 'center', gap: 16 }}>
                <div className="ph" style={{ width: 48, height: 48, borderRadius: '50%', aspectRatio: 'auto' }}>
                  <span className="ph-center" style={{ fontSize: 9 }}>avatar</span>
                </div>
                <div>
                  <div style={{ fontWeight: 500 }}>Cliente · La Farmacia Homeopática</div>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'rgba(246,243,236,0.6)', textTransform: 'uppercase' }}>Dirección de Mercadeo</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ========= INDUSTRIES ========= */}
      <section style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>05 — Industrias</div></Reveal>
          <Reveal delay={120}>
            <h2 className="display-lg" style={{ maxWidth: '14ch' }}>
              Verticales<br />donde <span className="serif accent">brillamos.</span>
            </h2>
          </Reveal>
          <div className="grid grid-3" style={{ marginTop: 72 }}>
            {[
              { n: '30+', label: 'Industria', body: 'Empresas de diferentes sectores productivos' },
              { n: '15', label: 'Turismo', body: 'Hoteles boutique y operadoras turísticas' },
              { n: '∞', label: 'Educación', body: 'Instituciones académicas y formación' },
            ].map((v, i) => (
              <Reveal key={i} delay={i * 120}>
                <div style={{ padding: '40px 0', borderTop: '1px solid var(--line)' }}>
                  <div style={{ fontSize: 80, fontWeight: 500, letterSpacing: '-0.04em', color: 'var(--accent)', lineHeight: 1 }}>{v.n}</div>
                  <div style={{ marginTop: 16, fontSize: 24, fontWeight: 500 }}>{v.label}</div>
                  <p style={{ marginTop: 8, fontSize: 15 }}>{v.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Home });