// Home / landing page

function Home({ onNav, onOpenCreator, accent }) {
  const { CREATORS, CATEGORIES } = window.CB_DATA;
  const featured = CREATORS.slice(0, 3);

  return (
    <main>
      {/* HERO */}
      <section style={{ padding: "48px 32px 32px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "8fr 4fr", gap: 48, alignItems: "end" }}>
          <div>
            <Eyebrow style={{ marginBottom: 32, paddingTop: 8, borderTop: "1px solid #000", display: "inline-block", paddingRight: 40 }}>edición 03 · primavera 2026 · vol. uno</Eyebrow>
            <h1 className="display" style={{
              fontFamily: "'TT Bells', serif",
              fontSize: "clamp(72px, 11vw, 180px)",
              lineHeight: 0.92,
              letterSpacing: "-0.05em",
              margin: 0,
              fontWeight: 400,
            }}>
              talento<br/>
              <span style={{ color: accent }}>curado</span><span style={{fontFamily:"'Montserrat',sans-serif", fontSize:"0.18em", letterSpacing:"0.18em", verticalAlign:"super", paddingLeft:18, fontWeight:600}}>—01</span><br/>
              cultura<br/>
              digital<span style={{ fontFamily: "'TT Bells', serif", fontStyle: "italic" }}>.</span>
            </h1>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>la pieza — manifiesto</Eyebrow>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 15, lineHeight: 1.6, color: "#1a1a1a", margin: 0 }}>
              cerebrum reúne <em>directores, fotógrafos, diseñadores y stylists</em> para construir una presencia <em>consciente</em> en entornos digitales. cada selección es una conversación; cada perfil, una pieza editorial.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 8 }}>
              <button onClick={() => onNav("directory")} style={{
                fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600,
                letterSpacing: "0.18em", textTransform: "uppercase",
                padding: "14px 22px", border: "1px solid #000", background: "#000", color: "#fff",
                cursor: "pointer", transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
              }}
              onMouseEnter={e => { e.currentTarget.style.background = accent; e.currentTarget.style.color = "#000"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "#000"; e.currentTarget.style.color = "#fff"; }}
              >ver el directorio →</button>
              <button onClick={() => onNav("contact")} style={{
                fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600,
                letterSpacing: "0.18em", textTransform: "uppercase",
                padding: "14px 22px", border: "1px solid #000", background: "#fff", color: "#000",
                cursor: "pointer", transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
              }}
              onMouseEnter={e => { e.currentTarget.style.background = "#000"; e.currentTarget.style.color = "#fff"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = "#000"; }}
              >aplicar al directorio</button>
            </div>
            <div style={{ marginTop: 16, fontFamily: "'Montserrat', sans-serif", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#555" }}>
              texto · estudio cerebrum / cdmx · 2026
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={["dirección visual", "talento", "edición 03", "diseño · video · styling · pr · eventos · música", "cdmx", "primavera 2026"]} />

      {/* INDEX OF CATEGORIES */}
      <section style={{ padding: "64px 32px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "3fr 9fr", gap: 32, alignItems: "start", marginBottom: 32 }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>02 · índice de prácticas</Eyebrow>
          <h2 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1, letterSpacing: "-0.03em", margin: 0, fontWeight: 400 }}>
            ocho prácticas, una conversación.
          </h2>
        </div>
        <div style={{ borderTop: "1px solid #000" }}>
          {CATEGORIES.filter(c => c.id !== "all").map((cat, i) => {
            const count = CREATORS.filter(c => c.category === cat.id).length;
            return (
              <div key={cat.id}
                onClick={() => onNav("directory", { category: cat.id })}
                style={{
                  display: "grid", gridTemplateColumns: "60px 1fr 200px 80px",
                  alignItems: "center", padding: "22px 0", borderBottom: "1px solid #000",
                  cursor: "pointer", transition: "background 220ms cubic-bezier(.2,.7,.2,1)",
                }}
                onMouseEnter={e => e.currentTarget.style.background = accent}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                <span style={{ fontFamily: "'TT Bells', serif", fontSize: 28, color: "#000" }}>0{i+1}</span>
                <span style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(36px, 4vw, 56px)", lineHeight: 1, letterSpacing: "-0.02em" }}>{cat.label}</span>
                <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "#555" }}>{count} talento{count !== 1 ? "s" : ""} activo{count !== 1 ? "s" : ""}</span>
                <span style={{ fontFamily: "'TT Bells', serif", fontSize: 36, textAlign: "right" }}>→</span>
              </div>
            );
          })}
        </div>
      </section>

      {/* FEATURED — TRES PIEZAS */}
      <section style={{ padding: "64px 32px", borderBottom: "1px solid #000", background: "#e4e4e4" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32, paddingBottom: 20, borderBottom: "1px solid #000" }}>
          <div>
            <Eyebrow>03 · selección del editor</Eyebrow>
            <h2 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(48px, 6vw, 88px)", lineHeight: 0.95, letterSpacing: "-0.03em", margin: "12px 0 0", fontWeight: 400 }}>
              tres piezas<br/>esta semana<span style={{ fontFamily: "'TT Bells', serif", fontStyle: "italic", color: accent }}>.</span>
            </h2>
          </div>
          <button onClick={() => onNav("directory")} style={{
            fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600,
            letterSpacing: "0.18em", textTransform: "uppercase",
            padding: "12px 18px", border: "1px solid #000", background: "transparent", color: "#000",
            cursor: "pointer",
          }}>ver todos →</button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }}>
          {featured.map((c, i) => (
            <FeaturedCard key={c.id} creator={c} onClick={() => onOpenCreator(c.id)} />
          ))}
        </div>
      </section>

      {/* QUOTE / EDITORIAL */}
      <section style={{ padding: "96px 32px 64px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 7fr 4fr", gap: 32, alignItems: "start" }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>04</Eyebrow>
          <blockquote style={{
            fontFamily: "'TT Bells', serif",
            fontSize: "clamp(36px, 4.4vw, 64px)",
            lineHeight: 1.05, letterSpacing: "-0.02em",
            margin: 0, fontWeight: 400,
          }}>
            <span style={{ color: accent, fontFamily: "'TT Bells', serif", fontStyle: "italic" }}>“</span>
            seleccionamos como se selecciona una pieza para una revista: por intención, por construcción, por la conversación que abre. el directorio no se hace por volumen.
            <span style={{ color: accent, fontFamily: "'TT Bells', serif", fontStyle: "italic" }}>”</span>
          </blockquote>
          <div style={{ paddingTop: 12 }}>
            <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8, marginBottom: 6 }}>dirección editorial</Eyebrow>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 13, color: "#555" }}>cerebrum / cdmx · 2026</div>
          </div>
        </div>
      </section>

      {/* APLICAR CTA */}
      <section style={{ background: "#000", color: "#fff", padding: "96px 32px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "7fr 5fr", gap: 32, alignItems: "end" }}>
          <h2 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(56px, 7vw, 120px)", lineHeight: 0.92, letterSpacing: "-0.04em", margin: 0, fontWeight: 400, color: "#fff" }}>
            aplica al<br/>directorio<span style={{ color: accent, fontStyle: "italic" }}>.</span>
          </h2>
          <div>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 15, lineHeight: 1.6, color: "#fff", margin: 0, opacity: 0.85 }}>
              abrimos selección dos veces al año. revisamos cada portafolio. respondemos a todos.
            </p>
            <button onClick={() => onNav("contact")} style={{
              marginTop: 24,
              fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600,
              letterSpacing: "0.18em", textTransform: "uppercase",
              padding: "16px 26px", border: "1px solid #fff", background: accent, color: "#000",
              cursor: "pointer", transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
            }}
            onMouseEnter={e => { e.currentTarget.style.background = "#fff"; }}
            onMouseLeave={e => { e.currentTarget.style.background = accent; }}
            >iniciar aplicación →</button>
          </div>
        </div>
      </section>
    </main>
  );
}

function FeaturedCard({ creator, onClick }) {
  return (
    <article onClick={onClick} style={{
      border: "1px solid #000", background: "#fff",
      cursor: "pointer", transition: "transform 220ms cubic-bezier(.2,.7,.2,1)",
    }}
    onMouseEnter={e => e.currentTarget.style.transform = "translate(-2px, -2px)"}
    onMouseLeave={e => e.currentTarget.style.transform = "translate(0,0)"}
    >
      <Portrait tone={creator.tone} num={creator.id} name={creator.name} ratio="4/5" />
      <div style={{ padding: "16px 18px 18px" }}>
        <Eyebrow style={{ color: "#555" }}>{creator.catLabel}</Eyebrow>
        <div style={{ fontFamily: "'TT Bells', serif", fontSize: 32, lineHeight: 1, letterSpacing: "-0.02em", margin: "8px 0" }}>{creator.name}</div>
        <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 13, lineHeight: 1.55, color: "#1a1a1a", margin: "8px 0 12px" }}>{creator.blurb}</p>
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 10, borderTop: "1px solid #000", fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "#000" }}>
          <span>{creator.city}</span>
          <span>{creator.rate}</span>
          <span>ver perfil →</span>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Home });