/* Crax Media — section components */

const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Decorative arch + sunset (animated SVG) ---------- */
function ArchSunset({ variant = "arch-sunset", className = "" }) {
  // animated gradient sky inside arch silhouette
  const archPath = "M 0 600 L 0 240 A 200 200 0 0 1 400 240 L 400 600 Z";
  if (variant === "stripes") {
    return (
      <svg viewBox="0 0 400 600" className={className} preserveAspectRatio="xMidYMid slice">
        <defs>
          <clipPath id="arch-clip"><path d={archPath} /></clipPath>
        </defs>
        <rect width="400" height="600" fill="var(--cream-2)" />
        <g clipPath="url(#arch-clip)">
          {Array.from({ length: 14 }).map((_, i) =>
          <rect key={i} x="0" y={i * 42 + 80} width="400" height="6" fill="var(--orange)" opacity={0.15 + i / 28} />
          )}
        </g>
      </svg>);

  }
  if (variant === "studio") {
    return (
      <svg viewBox="0 0 400 600" className={className} preserveAspectRatio="xMidYMid slice">
        <defs>
          <clipPath id="arch-clip2"><path d={archPath} /></clipPath>
          <radialGradient id="studio-glow" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#ffb877" />
            <stop offset="100%" stopColor="#1a0f08" />
          </radialGradient>
        </defs>
        <rect width="400" height="600" fill="var(--cream-2)" />
        <g clipPath="url(#arch-clip2)">
          <rect width="400" height="600" fill="url(#studio-glow)" />
        </g>
      </svg>);

  }
  // default: arch-sunset
  return (
    <svg viewBox="0 0 400 600" className={className} preserveAspectRatio="xMidYMid slice">
      <defs>
        <clipPath id="arch-clip3"><path d={archPath} /></clipPath>
        <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#3b1d2a" />
          <stop offset="35%" stopColor="#9c3a1a" />
          <stop offset="65%" stopColor="#ee8021" />
          <stop offset="88%" stopColor="#f8c574" />
          <stop offset="100%" stopColor="#f4ede0" />
          <animate attributeName="y2" values="1;1.05;1" dur="9s" repeatCount="indefinite" />
        </linearGradient>
        <radialGradient id="sun" cx="50%" cy="60%" r="14%">
          <stop offset="0%" stopColor="#fff7d6" />
          <stop offset="60%" stopColor="#ffd084" />
          <stop offset="100%" stopColor="#ee8021" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="400" height="600" fill="var(--cream-2)" />
      <g clipPath="url(#arch-clip3)">
        <rect width="400" height="600" fill="url(#sky)" />
        <circle cx="200" cy="380" r="80" fill="url(#sun)">
          <animate attributeName="cy" values="380;360;380" dur="11s" repeatCount="indefinite" />
        </circle>
        {/* mountains */}
        <path d="M 0 480 L 60 440 L 130 470 L 200 430 L 280 460 L 340 440 L 400 470 L 400 600 L 0 600 Z" fill="#2a160f" opacity="0.55" />
        <path d="M 0 520 L 80 490 L 170 510 L 260 485 L 360 505 L 400 495 L 400 600 L 0 600 Z" fill="#1a0d08" opacity="0.85" />
        {/* grass foreground */}
        <rect x="0" y="555" width="400" height="45" fill="#0e0805" />
      </g>
      {/* subtle arch outline highlight */}
      <path d={archPath} fill="none" stroke="rgba(255,200,140,0.35)" strokeWidth="1.5" />
    </svg>);

}

/* ---------- Concentric rings (from posts) ---------- */
function Rings({ count = 14, className = "" }) {
  return (
    <svg viewBox="0 0 200 200" className={className}>
      {Array.from({ length: count }).map((_, i) =>
      <circle key={i} cx="100" cy="100" r={6 + i * 6.5} fill="none" stroke="currentColor" strokeWidth="0.7" opacity={0.55 - i * 0.03} />
      )}
    </svg>);

}

/* ---------- Sparkle icon ---------- */
function Sparkle({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 0 L13.4 9 L22 12 L13.4 15 L12 24 L10.6 15 L2 12 L10.6 9 Z M12 4 L20 12 L12 20 L4 12 Z" fill={color} fillRule="evenodd" />
    </svg>);

}

/* ---------- NAV ---------- */
function Nav({ onContact }) {
  const [open, setOpen] = useState(false);
  const links = [
  ["servicios", "Servicios"],
  ["portafolio", "Portafolio"],
  ["nosotros", "Nosotros"],
  ["contacto", "Contacto"]];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      backdropFilter: "blur(14px)",
      background: "color-mix(in oklab, var(--bg) 72%, transparent)",
      borderBottom: "1px solid var(--rule)"
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 0" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src="assets/crax-mark.png" alt="Crax" style={{ height: 64, width: "64px" }} />
          <span style={{ fontFamily: "'Archivo Black'", fontSize: 18, letterSpacing: "-0.02em" }}>
            <span style={{ color: "var(--orange)" }}></span><span></span>
          </span>
        </a>
        <nav style={{ display: "flex", gap: 28, alignItems: "center" }} className="desk-nav">
          {links.map(([id, label]) =>
          <a key={id} href={`#${id}`} className="mono" style={{ color: "var(--ink-soft)", fontSize: 12 }}>{label}</a>
          )}
          <button onClick={onContact} style={{
            background: "var(--ink)", color: "var(--cream)",
            border: "none", padding: "10px 18px", borderRadius: 999,
            fontWeight: 700, fontSize: 13, letterSpacing: ".02em"
          }}>Cotizar →</button>
        </nav>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .desk-nav a { display: none; }
        }
      `}</style>
    </header>);

}

/* ---------- HERO ---------- */
function Hero({ photoStyle }) {
  return (
    <section id="top" style={{ position: "relative", padding: "var(--pad) 0 80px", overflow: "hidden" }}>
      {/* corner rings echo brand pattern */}
      <div style={{ position: "absolute", top: -60, right: -60, width: 360, height: 360, color: "var(--ink)", opacity: .35, pointerEvents: "none" }}>
        <Rings count={16} className="" />
      </div>

      <div className="container" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "center", minHeight: "78vh" }}>
        <div>
          <div className="mono" style={{ color: "var(--orange)", marginBottom: 22, display: "flex", alignItems: "center", gap: 10, fontSize: "1px" }}>
            <span style={{ width: 28, height: 1, background: "var(--orange)" }}></span>
            Agencia creativa · Bogotá / Remoto
          </div>
          <h1 className="display" style={{ fontSize: "clamp(56px, 9vw, 132px)", margin: 0 }}>
            Hacemos<br />crecer<br />
            <span style={{ position: "relative", display: "inline-block" }}>
              <span style={{ color: "var(--orange)" }}>tu marca</span>
              <svg viewBox="0 0 300 20" style={{ position: "absolute", left: 0, bottom: -6, width: "100%", height: 16 }}>
                <path d="M 5 14 Q 80 2, 150 10 T 295 8" stroke="var(--orange)" strokeWidth="3" fill="none" strokeLinecap="round" />
              </svg>
            </span>
          </h1>
          <p style={{ fontSize: "clamp(17px,1.6vw,22px)", marginTop: 36, maxWidth: 520, color: "var(--ink-soft)", lineHeight: 1.45 }}>
            Estrategia, contenido y creatividad con propósito.
            Soluciones <strong style={{ color: "var(--ink)" }}>estratégicas</strong> para marcas
            que quieren destacar y conectar de verdad.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 38, flexWrap: "wrap" }}>
            <a href="#contacto" style={{
              background: "var(--ink)", color: "var(--cream)",
              padding: "16px 28px", borderRadius: 999, fontWeight: 700, fontSize: 15,
              display: "inline-flex", alignItems: "center", gap: 10
            }}>
              Cotizar mi proyecto <span style={{ fontSize: 18 }}>→</span>
            </a>
            <a href="#portafolio" style={{
              background: "transparent", color: "var(--ink)",
              padding: "16px 28px", borderRadius: 999, fontWeight: 600, fontSize: 15,
              border: "1.5px solid var(--ink)"
            }}>
              Ver portafolio
            </a>
          </div>

          {/* metrics row */}
          <div style={{ display: "flex", gap: 36, marginTop: 56, flexWrap: "wrap" }}>
            {[["+60", "marcas crecidas"], ["8", "años de experiencia"]].map(([n, l]) =>
            <div key={l}>
                <div className="display" style={{ fontSize: 38, color: "var(--ink)" }}>{n}</div>
                <div className="mono" style={{ color: "var(--muted)", marginTop: 4 }}>{l}</div>
              </div>
            )}
          </div>
        </div>

        {/* arch frame */}
        <div style={{ position: "relative", aspectRatio: "0.78/1", maxWidth: 480, justifySelf: "end", width: "100%" }}>
          <ArchSunset variant={photoStyle} className="soft-shadow" />
          {/* sticker tagline */}
          <div style={{
            position: "absolute", bottom: -60, left: -80, width: 340, transform: "rotate(-6deg)",
            mixBlendMode: "multiply",
            filter: "drop-shadow(0 20px 30px rgba(22,19,16,.35))"
          }}>
            <img src="assets/sticker-ideas.png" alt="Ideas que vuelan alto" style={{ mixBlendMode: "screen", width: "100%" }} />
          </div>
          {/* small framed badge */}
          <div style={{
            position: "absolute", top: 24, right: -20, background: "var(--orange)",
            color: "var(--ink)", padding: "10px 16px", borderRadius: 999,
            fontFamily: "'Archivo Black'", fontSize: 13, transform: "rotate(8deg)",
            border: "2px solid var(--ink)"
          }}>01 · INICIO</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px){
          section#top > .container { grid-template-columns: 1fr !important; gap: 56px !important; }
          section#top > .container > div:last-child { justify-self: center !important; }
        }
      `}</style>
    </section>);

}

/* ---------- SERVICIOS (carousel) ---------- */
const SERVICIOS = [
{ n: "01", title: "Estrategia de marca", desc: "Definimos el rumbo. Posicionamiento, narrativa y arquitectura para marcas que quieren significar algo.", items: ["Branding", "Posicionamiento", "Identidad visual", "Arquitectura de marca"], dark: true },
{ n: "02", title: "Contenido que conecta", desc: "Creamos contenido que atrae, comunica y convierte. Mensajes que se sienten humanos.", items: ["Producción para redes", "Copywriting", "Diseño gráfico", "Cubrimiento de eventos"], dark: false },
{ n: "03", title: "Fotografía y video", desc: "Contamos historias que muestran lo mejor de tu marca con calidad cinematográfica.", items: ["Producción audiovisual", "Fotografía profesional", "Videos para redes", "Spots publicitarios"], dark: true },
{ n: "04", title: "Gestión de redes", desc: "Nos encargamos de tu presencia digital. Estrategia, calendario y community 24/7.", items: ["Estrategia de contenido", "Calendario editorial", "Community management", "Reportes y análisis"], dark: false },
{ n: "05", title: "Publicidad digital", desc: "Impulsamos tu marca con campañas que generan resultados medibles.", items: ["Meta Ads", "Google Ads", "TikTok Ads", "Estrategia de pauta"], dark: true },
{ n: "06", title: "Web y e-commerce", desc: "Sitios y tiendas que cargan rápido, convierten alto y se sienten propios.", items: ["Landing pages", "E-commerce", "SEO técnico", "Mantenimiento"], dark: false }];


function Servicios({ photoStyle }) {
  const [idx, setIdx] = useState(0);
  const trackRef = useRef(null);
  const startX = useRef(null);

  const go = (n) => setIdx(Math.max(0, Math.min(SERVICIOS.length - 1, n)));

  const onPointerDown = (e) => {startX.current = e.clientX;};
  const onPointerUp = (e) => {
    if (startX.current == null) return;
    const dx = e.clientX - startX.current;
    if (Math.abs(dx) > 60) go(idx + (dx < 0 ? 1 : -1));
    startX.current = null;
  };

  return (
    <section id="servicios" style={{ padding: "120px 0 100px", position: "relative" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
          <div>
            <div className="mono" style={{ color: "var(--orange)", marginBottom: 14 }}>02 · Servicios</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 7vw, 96px)", margin: 0 }}>
              Estos son nuestros<br /><span style={{
                background: "linear-gradient(90deg, var(--orange) 0%, var(--peach) 100%)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
              }}>servicios</span>
            </h2>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={() => go(idx - 1)} aria-label="Anterior" style={navBtnStyle(idx === 0)}>←</button>
            <button onClick={() => go(idx + 1)} aria-label="Siguiente" style={navBtnStyle(idx === SERVICIOS.length - 1)}>→</button>
          </div>
        </div>
      </div>

      <div
        ref={trackRef}
        onPointerDown={onPointerDown}
        onPointerUp={onPointerUp}
        style={{ overflow: "hidden", padding: "20px 0", cursor: "grab", touchAction: "pan-y" }}>
        
        <div style={{
          display: "flex", gap: 24, paddingLeft: "var(--pad)",
          transform: `translateX(calc(${-idx} * (min(420px, 80vw) + 24px)))`,
          transition: "transform .55s cubic-bezier(.22,.9,.18,1)"
        }}>
          {SERVICIOS.map((s, i) =>
          <ServiceCard key={s.n} svc={s} active={i === idx} photoStyle={photoStyle} onClick={() => go(i)} />
          )}
          <div style={{ minWidth: "var(--pad)" }} />
        </div>
      </div>

      <div className="container" style={{ marginTop: 32, display: "flex", gap: 6, justifyContent: "center" }}>
        {SERVICIOS.map((_, i) =>
        <button key={i} onClick={() => go(i)} aria-label={`Ir a servicio ${i + 1}`} style={{
          width: i === idx ? 32 : 8, height: 8, borderRadius: 4,
          background: i === idx ? "var(--orange)" : "var(--rule)", border: "none",
          transition: "all .3s"
        }} />
        )}
      </div>
    </section>);

}

function navBtnStyle(disabled) {
  return {
    width: 48, height: 48, borderRadius: 999,
    border: "1.5px solid var(--ink)", background: "transparent", color: "var(--ink)",
    fontSize: 18, opacity: disabled ? 0.3 : 1, cursor: disabled ? "default" : "pointer",
    transition: "all .2s"
  };
}

function ServiceCard({ svc, active, photoStyle, onClick }) {
  const isDark = svc.dark;
  return (
    <article onClick={onClick} style={{
      flex: "0 0 min(420px, 80vw)", aspectRatio: "4/5",
      borderRadius: 28, overflow: "hidden", position: "relative",
      background: isDark ? "#0c0907" : "var(--cream-2)",
      color: isDark ? "var(--cream)" : "var(--ink)",
      transform: active ? "scale(1)" : "scale(0.94)",
      transition: "transform .5s cubic-bezier(.22,.9,.18,1), box-shadow .5s",
      boxShadow: active ? "0 30px 60px rgba(22,19,16,.22)" : "0 10px 20px rgba(22,19,16,.12)",
      cursor: "pointer", userSelect: "none"
    }}>
      {/* arch image area */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.78 }}>
        <ArchSunset variant={photoStyle} className="" />
      </div>
      {/* overlay tint */}
      <div style={{
        position: "absolute", inset: 0,
        background: isDark ?
        "linear-gradient(135deg, rgba(12,9,7,0.86) 30%, rgba(12,9,7,0.55) 60%, rgba(12,9,7,0.2) 100%)" :
        "linear-gradient(135deg, rgba(244,237,224,0.92) 35%, rgba(244,237,224,0.6) 65%, rgba(244,237,224,0.15) 100%)"
      }} />
      <div style={{ position: "relative", padding: 32, height: "100%", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="mono" style={{ color: isDark ? "var(--orange)" : "var(--orange-deep)" }}>{svc.n} / 06</div>
          <div style={{
            width: 44, height: 44, borderRadius: "50%",
            background: "var(--orange)", color: "var(--ink)",
            display: "grid", placeItems: "center",
            border: isDark ? "1px solid rgba(255,255,255,.15)" : "1px solid var(--ink)",
            fontFamily: "'Archivo Black'", fontSize: 14
          }}>{svc.n}</div>
        </div>
        <h3 className="display" style={{
          fontSize: 38, marginTop: "auto", marginBottom: 14,
          color: isDark ? "var(--peach)" : "var(--ink)"
        }}>{svc.title}</h3>
        <p style={{ fontSize: 14.5, lineHeight: 1.5, opacity: 0.88, marginBottom: 20, maxWidth: 320 }}>{svc.desc}</p>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }}>
          {svc.items.map((it) =>
          <li key={it} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14 }}>
              <Sparkle size={14} color={isDark ? "var(--peach)" : "var(--orange-deep)"} />
              {it}
            </li>
          )}
        </ul>
      </div>
    </article>);

}

/* ---------- PORTAFOLIO ---------- */
const CASOS = [
{ brand: "Verdal Café", tag: "Branding + Web", metric: "+312% ventas online", color: "#3a5a3f", accent: "#c9d8a8" },
{ brand: "Estudio Lumen", tag: "Identidad visual", metric: "Rebrand completo", color: "#1a1714", accent: "#ee8021" },
{ brand: "Casa Bermellón", tag: "Redes + Pauta", metric: "+85k seguidores", color: "#7a2418", accent: "#f8d6a0" },
{ brand: "Norte Audio", tag: "Video + Spots", metric: "1.2M views", color: "#0c2840", accent: "#88c4ff" }];


function Portafolio() {
  const [hover, setHover] = useState(null);
  return (
    <section id="portafolio" style={{ padding: "100px 0", background: "var(--cream-2)", position: "relative" }}>
      <div className="container">
        <div style={{ marginBottom: 56, display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20 }}>
          <div>
            <div className="mono" style={{ color: "var(--orange)", marginBottom: 14 }}>03 · Portafolio</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 84px)", margin: 0, maxWidth: 720 }}>
              Marcas que ya<br />vuelan <span style={{ color: "var(--orange)" }}>alto</span>.
            </h2>
          </div>
          <p style={{ maxWidth: 320, color: "var(--ink-soft)", margin: 0 }}>
            Una selección de proyectos donde estrategia, diseño y producción se encontraron.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 18 }}>
          {CASOS.map((c, i) =>
          <article key={c.brand}
          onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
          style={{
            aspectRatio: "1/1.1", borderRadius: 22, overflow: "hidden",
            background: c.color, color: c.accent, position: "relative",
            cursor: "pointer", transition: "transform .4s",
            transform: hover === i ? "translateY(-6px)" : "translateY(0)"
          }}>
              {/* big number */}
              <div className="display" style={{
              position: "absolute", top: -20, right: -10, fontSize: 220,
              color: c.accent, opacity: 0.18, lineHeight: 1, pointerEvents: "none"
            }}>{String(i + 1).padStart(2, "0")}</div>

              {/* placeholder visual */}
              <div style={{
              position: "absolute", inset: "auto 0 30% 0", height: "55%",
              background: `repeating-linear-gradient(135deg, ${c.accent}22 0 12px, transparent 12px 28px)`,
              opacity: hover === i ? 0.9 : 0.55, transition: "opacity .4s"
            }} />

              <div style={{ position: "absolute", inset: 0, padding: 26, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div className="mono" style={{ opacity: 0.75 }}>{c.tag}</div>
                <div>
                  <h3 className="display" style={{ fontSize: 32, margin: 0, color: c.accent }}>{c.brand}</h3>
                  <div style={{ marginTop: 8, fontSize: 13, opacity: 0.85, display: "flex", alignItems: "center", gap: 8 }}>
                    <Sparkle size={12} color={c.accent} /> {c.metric}
                  </div>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- NOSOTROS ---------- */
function Nosotros() {
  return (
    <section id="nosotros" style={{ padding: "120px 0", position: "relative" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div style={{ position: "relative" }}>
          <div style={{ aspectRatio: "1/1", borderRadius: 28, overflow: "hidden", background: "var(--ink)", position: "relative" }}>
            <div style={{ position: "absolute", inset: 0, color: "var(--orange)" }}>
              <Rings count={20} className="" />
            </div>
            <div style={{
              position: "absolute", inset: 0, display: "grid", placeItems: "center",
              fontFamily: "'Caveat', cursive", color: "var(--peach)", fontSize: 80, transform: "rotate(-4deg)",
              textAlign: "center", lineHeight: 1
            }}>
              <div>
                <div className="mono" style={{ fontSize: 11, opacity: 0.6, marginBottom: 12 }}>[ team photo ]</div>
                Hola,<br />somos Crax.
              </div>
            </div>
          </div>
          <img src="assets/sticker-ideas.png" alt="" style={{
            position: "absolute", bottom: -36, right: -28, width: 200, transform: "rotate(8deg)",
            filter: "drop-shadow(0 14px 28px rgba(22,19,16,.35))"
          }} />
        </div>
        <div>
          <div className="mono" style={{ color: "var(--orange)", marginBottom: 14 }}>04 · Nosotros</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 78px)", margin: 0 }}>
            Una manada<br />de creativos<br />con <span style={{ color: "var(--orange)" }}>colmillo</span>.
          </h2>
          <p style={{ marginTop: 28, fontSize: 18, color: "var(--ink-soft)", maxWidth: 480, lineHeight: 1.6 }}>
            Somos estrategas, diseñadores, fotógrafos y planners que crecimos
            mirando cómo las marcas se quedaban sin voz en redes. Por eso nacimos:
            para devolverles ese ruido bonito que las hace memorables.
          </p>
          <p style={{ marginTop: 16, fontSize: 18, color: "var(--ink-soft)", maxWidth: 480, lineHeight: 1.6 }}>
            Trabajamos cerca, sin intermediarios, con la rigurosidad de una agencia
            grande y la velocidad de un equipo pequeño.
          </p>
          <div style={{ marginTop: 36, display: "flex", gap: 32, flexWrap: "wrap" }}>
            {[["Estrategia", "primero"], ["Producción", "in-house"], ["Resultados", "medibles"]].map(([a, b]) =>
            <div key={a} style={{ borderTop: "1px solid var(--rule)", paddingTop: 14, minWidth: 140 }}>
                <div className="mono" style={{ color: "var(--muted)", marginBottom: 6 }}>{a}</div>
                <div className="display" style={{ fontSize: 22 }}>{b}</div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          section#nosotros > .container { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
      `}</style>
    </section>);

}

/* ---------- CONTACTO ---------- */
function Contacto() {
  const [data, setData] = useState({ name: "", email: "", company: "", budget: "5-10", services: [], message: "" });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const toggle = (s) => setData((d) => ({ ...d, services: d.services.includes(s) ? d.services.filter((x) => x !== s) : [...d.services, s] }));

  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!data.name.trim()) er.name = "Nombre requerido";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email)) er.email = "Email inválido";
    if (!data.message.trim() || data.message.length < 10) er.message = "Cuéntanos un poco más";
    setErrors(er);
    if (Object.keys(er).length === 0) setSent(true);
  };

  if (sent) return (
    <section id="contacto" style={{ padding: "120px 0", background: "var(--ink)", color: "var(--cream)", textAlign: "center" }}>
      <div className="container" style={{ maxWidth: 640 }}>
        <div style={{ fontSize: 64, marginBottom: 12 }}>🪶</div>
        <h2 className="display" style={{ fontSize: "clamp(40px,6vw,72px)", margin: 0, color: "var(--peach)" }}>
          ¡Recibido,<br />{data.name.split(" ")[0]}!
        </h2>
        <p style={{ marginTop: 20, fontSize: 18, opacity: 0.78, maxWidth: 480, marginInline: "auto" }}>
          Tu mensaje aterrizó en nuestra bandeja. Te respondemos en las próximas 24h hábiles
          con un primer brief y una propuesta de reunión.
        </p>
        <button onClick={() => {setSent(false);setData({ name: "", email: "", company: "", budget: "5-10", services: [], message: "" });}} style={{
          marginTop: 28, background: "var(--orange)", color: "var(--ink)", border: "none",
          padding: "14px 26px", borderRadius: 999, fontWeight: 700
        }}>Enviar otro</button>
      </div>
    </section>);


  const inp = {
    width: "100%", padding: "14px 16px", borderRadius: 14,
    border: "1.5px solid var(--rule)", background: "var(--panel)", color: "var(--ink)",
    fontSize: 15, fontFamily: "inherit", outline: "none",
    transition: "border-color .2s"
  };

  return (
    <section id="contacto" style={{ padding: "120px 0", background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", bottom: -100, left: -100, width: 380, height: 380, color: "var(--orange)", opacity: .35, pointerEvents: "none" }}>
        <Rings count={16} className="" />
      </div>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "start", position: "relative" }}>
        <div>
          <div className="mono" style={{ color: "var(--orange)", marginBottom: 14 }}>05 · Contacto</div>
          <h2 className="display" style={{ fontSize: "clamp(44px,7vw,92px)", margin: 0, color: "var(--peach)" }}>
            Cuéntanos<br />tu idea.
          </h2>
          <p style={{ marginTop: 24, fontSize: 18, opacity: 0.78, maxWidth: 380 }}>
            Una propuesta inicial gratuita. Sin compromisos, sin formularios eternos.
          </p>
          <div style={{ marginTop: 40, display: "grid", gap: 20 }}>
            {[
            ["Email", "hola@craxmedia.co"],
            ["WhatsApp", "+57 300 123 4567"],
            ["Instagram", "@craxmedia"]].
            map(([k, v]) =>
            <div key={k} style={{ borderTop: "1px solid rgba(244,237,224,.14)", paddingTop: 14 }}>
                <div className="mono" style={{ opacity: 0.55, marginBottom: 4 }}>{k}</div>
                <div style={{ fontSize: 18, fontWeight: 600 }}>{v}</div>
              </div>
            )}
          </div>
        </div>

        <form onSubmit={submit} style={{
          background: "var(--cream)", color: "var(--ink)", borderRadius: 28, padding: 36,
          display: "grid", gap: 18
        }}>
          <div style={{ display: "grid", gap: 6 }}>
            <label className="mono" style={{ color: "var(--muted)" }}>Nombre completo</label>
            <input style={{ ...inp, borderColor: errors.name ? "#c44" : "var(--rule)" }}
            value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="María García" />
            {errors.name && <span style={{ fontSize: 12, color: "#c44" }}>{errors.name}</span>}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            <div style={{ display: "grid", gap: 6 }}>
              <label className="mono" style={{ color: "var(--muted)" }}>Email</label>
              <input style={{ ...inp, borderColor: errors.email ? "#c44" : "var(--rule)" }}
              value={data.email} onChange={(e) => set("email", e.target.value)} placeholder="hola@empresa.com" />
              {errors.email && <span style={{ fontSize: 12, color: "#c44" }}>{errors.email}</span>}
            </div>
            <div style={{ display: "grid", gap: 6 }}>
              <label className="mono" style={{ color: "var(--muted)" }}>Empresa</label>
              <input style={inp} value={data.company} onChange={(e) => set("company", e.target.value)} placeholder="(opcional)" />
            </div>
          </div>
          <div style={{ display: "grid", gap: 8 }}>
            <label className="mono" style={{ color: "var(--muted)" }}>¿Qué necesitas?</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {["Branding", "Contenido", "Video", "Redes", "Pauta", "Web"].map((s) => {
                const on = data.services.includes(s);
                return (
                  <button key={s} type="button" onClick={() => toggle(s)} style={{
                    padding: "8px 14px", borderRadius: 999, fontSize: 13, fontWeight: 600,
                    border: `1.5px solid ${on ? "var(--orange)" : "var(--rule)"}`,
                    background: on ? "var(--orange)" : "transparent", color: "var(--ink)",
                    transition: "all .2s"
                  }}>{s}</button>);

              })}
            </div>
          </div>
          <div style={{ display: "grid", gap: 8 }}>
            <label className="mono" style={{ color: "var(--muted)" }}>Presupuesto (millones COP)</label>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["<5", "5-10", "10-25", "25+"].map((b) =>
              <button key={b} type="button" onClick={() => set("budget", b)} style={{
                padding: "10px 16px", borderRadius: 12, fontSize: 14, fontWeight: 600, flex: 1, minWidth: 70,
                border: `1.5px solid ${data.budget === b ? "var(--ink)" : "var(--rule)"}`,
                background: data.budget === b ? "var(--ink)" : "transparent",
                color: data.budget === b ? "var(--cream)" : "var(--ink)"
              }}>{b}</button>
              )}
            </div>
          </div>
          <div style={{ display: "grid", gap: 6 }}>
            <label className="mono" style={{ color: "var(--muted)" }}>Cuéntanos sobre tu proyecto</label>
            <textarea rows={4} style={{ ...inp, resize: "vertical", borderColor: errors.message ? "#c44" : "var(--rule)" }}
            value={data.message} onChange={(e) => set("message", e.target.value)}
            placeholder="¿Quiénes son? ¿Qué problema buscan resolver? ¿Cuándo arrancarían?" />
            {errors.message && <span style={{ fontSize: 12, color: "#c44" }}>{errors.message}</span>}
          </div>
          <button type="submit" style={{
            background: "var(--ink)", color: "var(--cream)", border: "none",
            padding: "16px 24px", borderRadius: 14, fontWeight: 700, fontSize: 15, marginTop: 6,
            display: "flex", alignItems: "center", justifyContent: "center", gap: 10
          }}>Enviar mensaje <span>→</span></button>
        </form>
      </div>
      <style>{`
        @media (max-width: 880px){
          section#contacto > .container { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer style={{ padding: "60px 0 32px", borderTop: "1px solid var(--rule)" }}>
      <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 32 }}>
        <div>
          <div style={{ fontFamily: "'Archivo Black'", fontSize: 28, letterSpacing: "-0.02em" }}>
            <span style={{ color: "var(--orange)" }}></span>Med!a
          </div>
          <div className="script" style={{ color: "var(--orange)", fontSize: 24, marginTop: 4 }}>
            Ideas que vuelan alto.
          </div>
        </div>
        <div className="mono" style={{ color: "var(--muted)", textAlign: "right" }}>
          © 2026 Crax Media · Bogotá, Colombia<br />
          Hecho con café y demasiada música.
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, Servicios, Portafolio, Nosotros, Contacto, Footer });