// ============================================================
// GARABATO · Home Page (sitio real)
// Hero + logos + manifiesto + trabajo + cifras + servicios
// + testimonios + diario + contacto. Datos: window.CONTENT.
// ============================================================

const C = window.CONTENT;

// ──────────────── HERO ────────────────
const Hero = () => (
  <section className="hp-hero">
    <SquiggleScatter items={[
      { variant: 'ring', color: 'magenta', size: 'lg',  top: '8%',  right: '8%',  rotate: 10,  float: true },
      { variant: 'curl', color: 'yellow',  size: 'lg',  top: '48%', right: '5%',  rotate: -6,  parallax: 1.2 },
      { variant: 'hook', color: 'violet',  size: 'md',  bottom: '14%', right: '16%', rotate: 6, parallax: 2 },
      { variant: 'dash', color: 'orange',  size: 'sm',  top: '32%', right: '34%', rotate: -12, parallax: 2.4 },
      { variant: 'ring', color: 'magenta', size: 'xl',  top: '22%', left: '0%',   rotate: -14, opacity: 0.16, parallax: 1.2 },
      { variant: 'curl', color: 'yellow',  size: 'xxl', bottom: '2%', left: '3%', rotate: 8,  opacity: 0.14, parallax: 0.7 },
      { variant: 'dash', color: 'orange',  size: 'xs',  top: '6%',  left: '40%',  rotate: 16,  float: true },
    ]}/>
    <div className="hp-hero__inner">
      <div className="hp-hero__tag">
        <span className="hp-hero__pulse" aria-hidden="true"/>
        <span>{C.SITE.availability}</span>
      </div>
      <h1 className="hp-hero__title">
        Diseño que<br/>
        <em className="hp-hero__em" style={{ color: 'var(--brand-magenta)' }}>no se parece</em><br/>
        a nada más.
      </h1>
      <p className="hp-hero__sub">
        Somos un estudio de diseño independiente en {C.SITE.city}, {C.SITE.country}. Construimos marcas, productos
        y narrativas con un trazo propio, para equipos que ya tienen algo para decir.
      </p>
      <div className="hp-hero__ctas">
        <a href="#contact" className="btn btn--xl btn--primary">Hablemos <Icon name="arrow-right" size={18}/></a>
        <a href="#work" className="btn btn--xl btn--secondary">Ver el trabajo</a>
      </div>
      <a href="#work" className="hp-hero__scroll">
        <Icon name="arrow-down" size={14}/>
        <span>Conocé el estudio</span>
      </a>
    </div>
  </section>
);

// ──────────────── LOGOS ────────────────
const Logos = () => (
  <section className="hp-logos" aria-label="Clientes">
    <div className="hp-logos__inner">
      <div className="t-eyebrow" style={{ color: 'var(--fg-muted)', textAlign: 'center' }}>
        Trabajamos con marcas que ya decidieron ser memorables
      </div>
      <ul className="hp-logos__row">
        {C.CLIENTS.map((n) => (<li key={n} className="hp-logos__item">{n}</li>))}
      </ul>
    </div>
  </section>
);

// ──────────────── BAND DIVIDER (animado) ────────────────
const BandDivider = ({ bg = 'yellow', variant = 'horizon', height = 180 }) => (
  <GarabatoBand bg={bg} variant={variant} height={height}/>
);

// ──────────────── MANIFIESTO ────────────────
const Manifesto = () => (
  <section className="hp-manifesto">
    <GarabatoAmbient palette="auto" mode="arc" density="low" opacity={0.5}/>
    <SquiggleScatter draw items={[
      { variant: 'hook', color: 'violet',  size: 'lg', top: '10%', right: '8%', rotate: 0 },
      { variant: 'ring', color: 'magenta', size: 'xl', bottom: '10%', left: '5%', rotate: 12 },
    ]}/>
    <div className="hp-manifesto__inner">
      <div className="t-eyebrow" style={{ color: 'var(--brand-magenta)' }}>Manifiesto</div>
      <p className="hp-manifesto__text">
        Creemos que el diseño pulido<br/>
        muchas veces es <em style={{ fontStyle: 'normal', color: 'var(--brand-magenta)' }}>diseño cobarde</em>.<br/>
        Preferimos un trazo con carácter<br/>
        a una geometría perfecta.
      </p>
      <div className="hp-manifesto__sig">
        <div className="t-caption" style={{ color: 'var(--fg-muted)' }}>Firmado por el equipo · {C.SITE.founded}</div>
      </div>
    </div>
  </section>
);

// ──────────────── TRABAJO ────────────────
const Work = () => {
  const projects = C.PROJECTS.filter(p => p.home);
  const darkText = p => p.darkText;
  return (
    <section className="hp-work" id="work">
      <GarabatoAmbient palette="auto" mode="corner" density="low" opacity={0.4}/>
      <div className="hp-work__header">
        <div>
          <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Trabajo reciente</div>
          <h2 className="t-display-lg" style={{ marginTop: 16 }}>
            Seis historias<br/>
            de los <em style={{ fontStyle: 'normal', color: 'var(--brand-magenta)' }}>últimos {C.PROJECTS.length}</em>.
          </h2>
        </div>
        <div className="hp-work__header-right">
          <p className="t-body-lg" style={{ color: 'var(--fg-muted)', maxWidth: 420 }}>
            Sitios reales, en línea hoy. Cada uno se entrega con capacitación,
            documentación y 30 días de soporte. Siempre.
          </p>
          <a href="portfolio.html" className="btn btn--lg btn--secondary" style={{ marginTop: 24 }}>
            Ver todos los proyectos <Icon name="arrow-right" size={14}/>
          </a>
        </div>
      </div>

      <div className="hp-work__grid">
        {projects.map((p, i) => (
          <a key={p.slug} className={`hp-work-card hp-work-card--${p.home}`} href={C.projectUrl(p)} style={{ background: p.color }} aria-label={`${p.t}: ${p.tags}`}>
            <div className="hp-work-card__art">
              <SquiggleScatter draw items={[
                { variant: p.variant, color: darkText(p) ? 'ink' : 'yellow', size: p.home === 'large' ? 'xxl' : 'xl', top: '18%', left: '20%', rotate: i * 10 },
                { variant: 'dash', color: darkText(p) ? 'ink' : 'magenta', size: 'sm', bottom: '15%', right: '12%', rotate: -10 },
                ...(p.home === 'large' ? [{ variant: 'hook', color: darkText(p) ? 'violet' : 'yellow', size: 'lg', top: '55%', right: '15%', rotate: 20 }] : []),
              ]}/>
            </div>
            <div className="hp-work-card__meta" style={{ color: darkText(p) ? '#0A0A0F' : '#fff' }}>
              <div>
                <div className="t-caption" style={{ opacity: 0.8, color: 'inherit' }}>{p.tags}{p.year ? ` · ${p.year}` : ''}</div>
                <div className={p.home === 'large' ? 't-display-sm' : 't-h2'} style={{ marginTop: 4 }}>{p.t}</div>
              </div>
              <Icon name="arrow-up-right" size={p.home === 'large' ? 32 : 24}/>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

// ──────────────── NÚMEROS ────────────────
const Numbers = () => (
  <section className="hp-numbers" style={{ background: 'var(--ink-900)' }}>
    <GarabatoAmbient palette="ink" mode="cross" density="low" opacity={0.55}/>
    <SquiggleScatter items={[
      { variant: 'ring', color: 'magenta', size: 'xl', top: '15%', right: '8%', rotate: -10 },
      { variant: 'curl', color: 'yellow', size: 'xxl', bottom: '-15%', left: '-5%', rotate: 10 },
    ]}/>
    <div className="hp-numbers__inner">
      <div className="t-eyebrow" style={{ color: 'var(--brand-yellow)' }}>{C.SITE.yearsLabel[0].toUpperCase() + C.SITE.yearsLabel.slice(1)} años de estudio</div>
      <dl className="hp-numbers__grid">
        {C.NUMBERS.map((x) => (
          <div key={x.label} className="hp-number">
            <dt className="hp-number__label" style={{ order: 2 }}>{x.label}</dt>
            <dd className="hp-number__n" style={{ color: x.c, margin: 0 }}>{x.n}</dd>
          </div>
        ))}
      </dl>
    </div>
  </section>
);

// ──────────────── SERVICIOS ────────────────
const Services = () => (
  <section className="hp-services" id="services">
    <GarabatoAmbient palette="auto" mode="cross" density="low" opacity={0.55}/>
    <div className="hp-services__inner">
      <div className="hp-services__header">
        <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Qué hacemos</div>
        <h2 className="t-display-lg" style={{ marginTop: 16 }}>
          Cuatro disciplinas.<br/>
          Un solo trazo.
        </h2>
      </div>
      <div className="hp-services__grid">
        {C.SERVICES.map((s) => (
          <div key={s.n} className="hp-service">
            <div className="hp-service__left">
              <div className="hp-service__n" style={{ color: s.c }}>{s.n}</div>
              <h3 className="t-display-sm" style={{ marginTop: 4 }}>
                <a href={`services.html#svc-${s.n}`} className="hp-service__link">{s.title}</a>
              </h3>
            </div>
            <div className="hp-service__right">
              <p className="t-body-lg" style={{ color: 'var(--fg-muted)' }}>{s.short}</p>
              <ul className="hp-service__items">
                {s.items.slice(0, 4).map(it => (
                  <li key={it}><Icon name="check" size={16} color={s.c}/> {it}</li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────── PROCESO ────────────────
const Process = () => (
  <section className="hp-process" style={{ background: 'var(--brand-yellow)' }}>
    <SquiggleScatter items={[
      { variant: 'ring', color: 'violet',  size: 'xl', top: '15%', right: '10%', rotate: 20 },
      { variant: 'curl', color: 'magenta', size: 'xl', bottom: '15%', left: '5%', rotate: -8 },
      { variant: 'hook', color: 'ink',     size: 'md', top: '50%', left: '45%', rotate: 0 },
    ]}/>
    <div className="hp-process__inner">
      <div className="t-eyebrow">Cómo trabajamos</div>
      <h2 className="t-display-lg" style={{ marginTop: 16, maxWidth: 900 }}>
        Un proceso simple.<br/>Con tiempo para pensar.
      </h2>
      <ol className="hp-process__steps">
        {C.PROCESS.map(s => (
          <li key={s.n} className="hp-process-step">
            <div className="hp-process-step__n" aria-hidden="true">{s.n}</div>
            <div className="t-h2" style={{ marginTop: 12 }}>{s.t}</div>
            <p className="t-body-lg" style={{ marginTop: 12, color: 'var(--ink-700)', maxWidth: 320 }}>{s.d}</p>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

// ──────────────── TESTIMONIOS ────────────────
const Testimonials = () => C.TESTIMONIALS.length === 0 ? null : (
  <section className="hp-testimonials">
    <GarabatoAmbient palette="auto" mode="arc" density="low" opacity={0.45}/>
    <div className="hp-testimonials__inner">
      <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Lo que dicen</div>
      <div className="hp-testimonials__grid">
        {C.TESTIMONIALS.map((t) => (
          <figure key={t.n} className="hp-testimonial">
            <div className="hp-testimonial__mark" style={{ color: t.c }} aria-hidden="true">"</div>
            <blockquote className="t-h3" style={{ fontWeight: 500 }}>{t.q}</blockquote>
            <figcaption className="hp-testimonial__cite">
              <div className="hp-testimonial__avatar" style={{ background: t.c }} aria-hidden="true">{C.initials(t.n)}</div>
              <div>
                <div className="t-label">{t.n}</div>
                <div className="t-caption">{t.r}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────── ESTUDIO / EQUIPO ────────────────
const Studio = () => (
  <section className="hp-studio" id="studio">
    <div className="hp-studio__inner">
      <div className="hp-studio__text">
        <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Estudio</div>
        <h2 className="t-display-lg" style={{ marginTop: 16 }}>
          Somos ocho.<br/>Y un gato.
        </h2>
        <p className="t-body-lg" style={{ color: 'var(--fg-muted)', marginTop: 24 }}>
          Equipo chico, en un mismo estudio de {C.SITE.neighborhood}, {C.SITE.city}, con la calma de
          poder decir que no. Tomamos cinco proyectos por trimestre. Nunca más.
        </p>
        <p className="t-body" style={{ color: 'var(--fg-muted)', marginTop: 20 }}>
          Nos importa que lo que hacemos deje algo atrás: manuales vivos, equipos
          que entienden qué se está construyendo, marcas que pueden seguir
          creciendo sin nosotros.
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="studio.html#team" className="btn btn--lg btn--primary">Conocé al equipo <Icon name="arrow-right" size={14}/></a>
          <a href="services.html#process" className="btn btn--lg btn--ghost">Cómo trabajamos</a>
        </div>
      </div>
      <ul className="hp-studio__team">
        {C.TEAM.map((p) => (
          <li key={p.n} className="hp-studio-member">
            <div className="hp-studio-member__avatar" style={{ background: p.c }} aria-hidden="true">
              {p.pet ? <Icon name="smile" size={22} color="#FFD000"/> : C.initials(p.n)}
            </div>
            <div className="t-label">{p.n}</div>
            <div className="t-caption">{p.r}</div>
          </li>
        ))}
      </ul>
    </div>
  </section>
);

// ──────────────── DIARIO ────────────────
const Journal = () => (
  <section className="hp-journal" id="journal">
    <div className="hp-journal__inner">
      <div className="hp-journal__header">
        <div>
          <div className="t-eyebrow" style={{ color: 'var(--fg-muted)' }}>Diario</div>
          <h2 className="t-display-lg" style={{ marginTop: 16 }}>Algo de lo que pensamos.</h2>
        </div>
        <a href="journal.html" className="btn btn--lg btn--secondary">Ver el diario <Icon name="arrow-right" size={14}/></a>
      </div>
      <div className="hp-journal__grid">
        {C.ARTICLES.filter(a => a.home).map((a, i) => (
          <a key={a.slug} href={C.articleUrl(a)} className="hp-journal-card">
            <div className="hp-journal-card__cover" style={{ background: a.color }}>
              <SquiggleScatter draw items={[
                { variant: a.variant, color: a.color === '#FFD000' || a.color === '#FF9800' ? 'ink' : 'yellow', size: 'xl', top: '18%', left: '25%', rotate: i * 15 },
                { variant: 'dash', color: 'ink', size: 'sm', bottom: '15%', right: '15%' },
              ]}/>
            </div>
            <div className="hp-journal-card__body">
              <div className="t-caption">{a.cat} · {a.au} · {a.time}</div>
              <h3 className="t-h3" style={{ marginTop: 10 }}>{a.full || a.t}</h3>
              <div className="hp-journal-card__more">Leer <Icon name="arrow-right" size={12}/></div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────── CONTACTO ────────────────
const Contact = () => (
  <section className="hp-contact" id="contact">
    <SquiggleScatter draw items={[
      { variant: 'ring', color: 'yellow', size: 'xxl', top: '5%', right: '2%', rotate: 10 },
      { variant: 'curl', color: 'violet', size: 'xxl', bottom: '-15%', left: '-5%', rotate: -12 },
      { variant: 'dash', color: 'yellow', size: 'md', top: '55%', left: '42%', rotate: -8 },
    ]}/>
    <div className="hp-contact__inner">
      <div className="hp-contact__text">
        <div className="t-eyebrow" style={{ color: 'var(--brand-yellow)' }}>¿Empezamos?</div>
        <h2 className="t-display-lg" style={{ marginTop: 16, color: '#fff' }}>
          Contanos qué<br/>querés construir.
        </h2>
        <p className="t-body-lg" style={{ color: 'rgba(255,255,255,0.84)', marginTop: 24 }}>
          Respondemos en 24 horas hábiles. Si no es una buena idea para nosotros,
          te decimos por qué, y a veces te recomendamos colegas.
        </p>
        <div className="hp-contact__quick">
          <a href={`mailto:${C.SITE.email}`} className="hp-contact__quick-item">
            <Icon name="mail" size={20} color="var(--brand-yellow)"/>
            <div>
              <div className="t-caption" style={{ color: 'rgba(255,255,255,0.8)' }}>Email directo</div>
              <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>{C.SITE.email}</div>
            </div>
          </a>
          <a href={C.SITE.whatsapp} className="hp-contact__quick-item" target="_blank" rel="noopener noreferrer">
            <Icon name="phone" size={20} color="var(--brand-yellow)"/>
            <div>
              <div className="t-caption" style={{ color: 'rgba(255,255,255,0.8)' }}>WhatsApp</div>
              <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>{C.SITE.phone}</div>
            </div>
          </a>
          <div className="hp-contact__quick-item">
            <Icon name="home" size={20} color="var(--brand-yellow)"/>
            <div>
              <div className="t-caption" style={{ color: 'rgba(255,255,255,0.8)' }}>Estudio</div>
              <div className="t-h4" style={{ color: '#fff', marginTop: 2 }}>{C.SITE.address}, {C.SITE.neighborhood}, {C.SITE.city}</div>
            </div>
          </div>
        </div>
      </div>
      <ContactForm/>
    </div>
  </section>
);

Object.assign(window, { Hero, Logos, Manifesto, Work, Numbers, Services, Process, Testimonials, Studio, Journal, Contact, BandDivider });