// About + Contact pages

function About({ accent }) {
  return (
    <main>
      {/* Hero */}
      <section style={{ padding: "48px 32px 64px", borderBottom: "1px solid #000" }}>
        <Eyebrow style={{ marginBottom: 32, paddingTop: 8, borderTop: "1px solid #000", display: "inline-block", paddingRight: 60 }}>estudio · manifiesto · vol. 03</Eyebrow>
        <h1 style={{
          fontFamily: "'TT Bells', serif",
          fontSize: "clamp(72px, 12vw, 200px)",
          lineHeight: 0.92, letterSpacing: "-0.05em",
          margin: 0, fontWeight: 400,
          maxWidth: "16ch",
        }}>
          construimos<br/>
          <span style={{ color: accent, fontStyle: "italic" }}>presencia</span><br/>
          consciente.
        </h1>
      </section>

      {/* Two-up: lede + photo block */}
      <section style={{ display: "grid", gridTemplateColumns: "5fr 7fr", borderBottom: "1px solid #000" }}>
        <div style={{ padding: "64px 32px 64px 40px", borderRight: "1px solid #000" }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8, marginBottom: 24 }}>01 · qué hacemos</Eyebrow>
          <p style={{ fontFamily: "'TT Bells', serif", fontSize: 36, lineHeight: 1.15, letterSpacing: "-0.02em", margin: 0, fontWeight: 400 }}>
            cerebrum es <em style={{ color: accent }}>directorio</em> y <em style={{ color: accent }}>estudio</em>. conectamos talento creativo con proyectos, mientras dirigimos identidades visuales y contenido estratégico.
          </p>
          <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 14, lineHeight: 1.7, color: "#1a1a1a", marginTop: 32 }}>
            no somos agencia ni plataforma de match. somos una mesa editorial. revisamos cada portafolio que entra al directorio. cada conexión entre talento y cliente pasa por una conversación.
          </p>
        </div>
        <div style={{
          background: accent, padding: "64px 40px",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          minHeight: 480, position: "relative", overflow: "hidden",
        }}>
          <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.35 }}>
            <circle cx="100" cy="100" r="80" fill="none" stroke="#000" strokeWidth="0.6" />
            <circle cx="100" cy="100" r="60" fill="none" stroke="#000" strokeWidth="0.6" />
            <circle cx="100" cy="100" r="40" fill="none" stroke="#000" strokeWidth="0.6" />
            <circle cx="100" cy="100" r="20" fill="none" stroke="#000" strokeWidth="0.6" />
            <line x1="0" y1="100" x2="200" y2="100" stroke="#000" strokeWidth="0.4" />
            <line x1="100" y1="0" x2="100" y2="200" stroke="#000" strokeWidth="0.4" />
          </svg>
          <div style={{ position: "relative" }}>
            <Eyebrow>02 · método</Eyebrow>
          </div>
          <div style={{ position: "relative" }}>
            <div style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(56px, 7vw, 120px)", lineHeight: 0.9, letterSpacing: "-0.04em", color: "#000" }}>
              selección<br/>
              <span style={{ fontStyle: "italic" }}>antes que</span><br/>
              algoritmo.
            </div>
          </div>
        </div>
      </section>

      {/* Process — numbered */}
      <section style={{ padding: "96px 32px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "3fr 9fr", gap: 32, marginBottom: 48 }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>03 · proceso</Eyebrow>
          <h2 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(48px, 6vw, 88px)", lineHeight: 0.95, letterSpacing: "-0.03em", margin: 0, fontWeight: 400 }}>
            cuatro pasos. ningún atajo.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 0, borderTop: "1px solid #000" }}>
          {[
            { n: "01", t: "brief", d: "describes el proyecto en una conversación. nada de formularios largos. quince minutos por video." },
            { n: "02", t: "selección", d: "te proponemos tres a cinco perfiles del directorio. justificamos cada uno." },
            { n: "03", t: "introducción", d: "presentamos directamente. nada de intermediarios opacos. tarifas claras desde el inicio." },
            { n: "04", t: "seguimiento", d: "acompañamos hasta entrega. opcional: dirección creativa por parte del estudio." },
          ].map((s, i) => (
            <div key={s.n} style={{
              padding: "28px 24px", borderRight: i < 3 ? "1px solid #000" : "none", borderBottom: "1px solid #000",
              display: "flex", flexDirection: "column", gap: 14, minHeight: 280,
            }}>
              <div style={{ fontFamily: "'TT Bells', serif", fontSize: 64, lineHeight: 1, letterSpacing: "-0.04em", color: accent }}>{s.n}</div>
              <div style={{ fontFamily: "'TT Bells', serif", fontSize: 32, lineHeight: 1, letterSpacing: "-0.02em" }}>{s.t}</div>
              <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 13, lineHeight: 1.6, color: "#1a1a1a", margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Numbers */}
      <section style={{ padding: "96px 32px", background: "#000", color: "#fff", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "3fr 9fr", gap: 32, marginBottom: 64 }}>
          <Eyebrow style={{ borderTop: "1px solid #fff", paddingTop: 8, color: "#fff" }}>04 · estado</Eyebrow>
          <h2 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(56px, 7vw, 120px)", lineHeight: 0.92, letterSpacing: "-0.04em", margin: 0, fontWeight: 400, color: "#fff" }}>
            edición 03<span style={{ color: accent, fontStyle: "italic" }}>.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 0, borderTop: "1px solid #fff" }}>
          {[
            { n: "16", t: "talentos curados" },
            { n: "08", t: "prácticas activas" },
            { n: "47", t: "proyectos cerrados" },
            { n: "02", t: "ediciones por año" },
          ].map((s, i) => (
            <div key={i} style={{ padding: "32px 24px", borderRight: i < 3 ? "1px solid #fff" : "none", borderBottom: "1px solid #fff" }}>
              <div style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(72px, 9vw, 144px)", lineHeight: 0.9, letterSpacing: "-0.05em", color: "#fff" }}>{s.n}</div>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", marginTop: 12, color: accent }}>{s.t}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Studio team / quote */}
      <section style={{ padding: "96px 32px", borderBottom: "1px solid #000" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 7fr 4fr", gap: 32 }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>05 · estudio</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, fontStyle: "italic" }}>“</span>
            cerebrum se piensa como una revista que también produce. cada talento del directorio podría ser editor invitado de una pieza nuestra<span style={{ color: accent, fontStyle: "italic" }}>.”</span>
          </blockquote>
          <div style={{ paddingTop: 12 }}>
            <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8, marginBottom: 6 }}>dirección — estudio</Eyebrow>
            <div style={{ fontFamily: "'TT Bells', serif", fontSize: 24, letterSpacing: "-0.01em" }}>m. álvarez · t. herrera</div>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, color: "#555", marginTop: 4 }}>cdmx · 2024–presente</div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- Contact / Apply ----------
function Contact({ accent }) {
  const [step, setStep] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    type: "talent",
    name: "",
    email: "",
    practice: "",
    city: "",
    portfolio: "",
    instagram: "",
    note: "",
  });

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    if (e) e.preventDefault();
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <main>
        <section style={{ minHeight: "70vh", display: "flex", flexDirection: "column", justifyContent: "center", padding: "96px 32px", borderBottom: "1px solid #000" }}>
          <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8, display: "inline-block", paddingRight: 60, marginBottom: 32 }}>aplicación recibida · {new Date().getFullYear()}</Eyebrow>
          <h1 style={{ fontFamily: "'TT Bells', serif", fontSize: "clamp(64px, 10vw, 160px)", lineHeight: 0.92, letterSpacing: "-0.05em", margin: 0, fontWeight: 400, maxWidth: "14ch" }}>
            gracias,<br/><span style={{ color: accent, fontStyle: "italic" }}>{form.name.split(" ")[0] || "creador"}</span>.
          </h1>
          <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 16, lineHeight: 1.6, color: "#1a1a1a", maxWidth: 560, marginTop: 32 }}>
            recibimos tu aplicación. revisamos en orden, manualmente. respondemos a todos en máximo dos semanas.
          </p>
          <button onClick={() => { setSubmitted(false); setStep(0); setForm({ type:"talent", name:"", email:"", practice:"", city:"", portfolio:"", instagram:"", note:"" }); }} style={{
            marginTop: 32, alignSelf: "flex-start",
            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",
          }}>otra aplicación →</button>
        </section>
      </main>
    );
  }

  return (
    <main>
      {/* Hero */}
      <section style={{ padding: "48px 32px 32px", borderBottom: "1px solid #000" }}>
        <Eyebrow style={{ marginBottom: 32, paddingTop: 8, borderTop: "1px solid #000", display: "inline-block", paddingRight: 60 }}>aplicar · directorio vol. 04 · invierno 2026</Eyebrow>
        <h1 style={{
          fontFamily: "'TT Bells', serif",
          fontSize: "clamp(72px, 11vw, 180px)",
          lineHeight: 0.92, letterSpacing: "-0.05em",
          margin: 0, fontWeight: 400,
          maxWidth: "12ch",
        }}>
          aplica<span style={{ color: accent, fontStyle: "italic" }}>.</span>
        </h1>
      </section>

      {/* Type selector */}
      <section style={{ padding: "32px 32px", borderBottom: "1px solid #000" }}>
        <Eyebrow style={{ marginBottom: 16 }}>aplico como</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid #000" }}>
          {[
            { id: "talent", t: "talento", d: "quiero entrar al directorio." },
            { id: "client", t: "cliente", d: "busco talento para un proyecto." },
          ].map((opt, i) => (
            <button key={opt.id} onClick={() => update("type", opt.id)} style={{
              padding: "32px 28px",
              background: form.type === opt.id ? accent : "#fff",
              border: "none",
              borderRight: i === 0 ? "1px solid #000" : "none",
              cursor: "pointer", textAlign: "left",
              transition: "background 220ms cubic-bezier(.2,.7,.2,1)",
            }}>
              <div style={{ fontFamily: "'TT Bells', serif", fontSize: 56, lineHeight: 1, letterSpacing: "-0.03em", marginBottom: 8 }}>
                {opt.t}<span style={{ fontStyle: "italic", color: form.type === opt.id ? "#000" : accent }}>.</span>
              </div>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 13, color: "#1a1a1a" }}>{opt.d}</div>
            </button>
          ))}
        </div>
      </section>

      {/* Form */}
      <section style={{ padding: "48px 32px", borderBottom: "1px solid #000" }}>
        <form onSubmit={submit} style={{ display: "grid", gridTemplateColumns: "3fr 9fr", gap: 32 }}>
          <div>
            <Eyebrow style={{ borderTop: "1px solid #000", paddingTop: 8 }}>brief</Eyebrow>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 13, lineHeight: 1.6, color: "#555", marginTop: 12 }}>
              completa lo que aplique. todos los campos son revisados manualmente.
            </p>
          </div>
          <div style={{ display: "grid", gap: 0 }}>
            <Field label="nombre" value={form.name} onChange={v => update("name", v)} placeholder="nombre y apellido" />
            <Field label="email" value={form.email} onChange={v => update("email", v)} placeholder="hola@ejemplo.com" type="email" />
            {form.type === "talent" ? (
              <>
                <FieldSelect label="práctica" value={form.practice} onChange={v => update("practice", v)} options={[
                  "diseño gráfico", "videografía", "fotografía", "styling", "pr", "event planning", "music · sound", "dirección creativa", "otra"
                ]} />
                <Field label="ciudad" value={form.city} onChange={v => update("city", v)} placeholder="cdmx · gdl · monterrey…" />
                <Field label="portafolio" value={form.portfolio} onChange={v => update("portfolio", v)} placeholder="url de tu sitio o pdf" />
                <Field label="instagram" value={form.instagram} onChange={v => update("instagram", v)} placeholder="@handle" />
              </>
            ) : (
              <>
                <FieldSelect label="práctica buscada" value={form.practice} onChange={v => update("practice", v)} options={[
                  "diseño gráfico", "videografía", "fotografía", "styling", "pr", "event planning", "music · sound", "dirección creativa", "varias / no sé"
                ]} />
                <Field label="empresa / proyecto" value={form.city} onChange={v => update("city", v)} placeholder="nombre del proyecto" />
                <Field label="presupuesto aprox." value={form.portfolio} onChange={v => update("portfolio", v)} placeholder="$ · $$ · $$$ · a definir" />
              </>
            )}
            <FieldArea label="nota editorial" value={form.note} onChange={v => update("note", v)} placeholder="cuéntanos en una conversación corta. dos o tres párrafos máximo." />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, borderTop: "1px solid #000" }}>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", color: "#555" }}>
                respuesta en máximo 2 semanas · revisamos manualmente
              </div>
              <button type="submit" style={{
                fontFamily: "'Montserrat', sans-serif", fontSize: 11, fontWeight: 600,
                letterSpacing: "0.18em", textTransform: "uppercase",
                padding: "16px 26px", 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"; }}
              >enviar aplicación →</button>
            </div>
          </div>
        </form>
      </section>
    </main>
  );
}

function Field({ label, value, onChange, placeholder, type = "text" }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: "grid", gridTemplateColumns: "1fr 4fr", alignItems: "center", padding: "16px 0", borderBottom: "1px solid #000", gap: 24 }}>
      <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase" }}>{label}</span>
      <input
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        placeholder={placeholder}
        style={{
          fontFamily: "'TT Bells', serif",
          fontSize: 28, letterSpacing: "-0.01em",
          background: "transparent", border: "none", outline: "none",
          padding: 0, color: "#000",
          borderBottom: focus ? "2px solid #000" : "2px solid transparent",
          transition: "border-color 220ms cubic-bezier(.2,.7,.2,1)",
        }}
      />
    </label>
  );
}

function FieldSelect({ label, value, onChange, options }) {
  return (
    <label style={{ display: "grid", gridTemplateColumns: "1fr 4fr", alignItems: "center", padding: "16px 0", borderBottom: "1px solid #000", gap: 24 }}>
      <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase" }}>{label}</span>
      <select value={value} onChange={e => onChange(e.target.value)} style={{
        fontFamily: "'TT Bells', serif", fontSize: 28, letterSpacing: "-0.01em",
        background: "transparent", border: "none", outline: "none", padding: 0,
        color: value ? "#000" : "#8a8a8a",
        appearance: "none", cursor: "pointer",
      }}>
        <option value="">seleccionar...</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

function FieldArea({ label, value, onChange, placeholder }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: "grid", gridTemplateColumns: "1fr 4fr", alignItems: "start", padding: "16px 0", borderBottom: "1px solid #000", gap: 24 }}>
      <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 10, fontWeight: 600, letterSpacing: "0.22em", textTransform: "uppercase", paddingTop: 8 }}>{label}</span>
      <textarea
        value={value}
        onChange={e => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        placeholder={placeholder}
        rows={4}
        style={{
          fontFamily: "'Montserrat', sans-serif",
          fontSize: 14, lineHeight: 1.6,
          background: "transparent", border: "none", outline: "none",
          padding: 0, color: "#000", resize: "vertical",
          borderLeft: focus ? "2px solid #000" : "2px solid transparent",
          paddingLeft: focus ? 12 : 0,
          transition: "all 220ms cubic-bezier(.2,.7,.2,1)",
        }}
      />
    </label>
  );
}

Object.assign(window, { About, Contact });