/* global React, FramerMotion, LogoMark, SoundWave, Icon, PALETTE, Eyebrow, fadeUp */
/* eslint-disable */

// ============================================================
// Taide Collective — Sobre mí, CTA, Footer
// ============================================================

const { motion: motionBot } = FramerMotion;
const { useState: tcUseStateBot } = React;

// ============================================================
// Sobre mí
// ============================================================
function SobreMi() {
  const stats = [
    { v: '5K+',  l: 'Comunidad' },
    { v: '33+',  l: 'Recursos' },
    { v: '',     l: '' },
  ];

  return (
    <section id="sobre" data-screen-label="05 Sobre mí" className="py-24 md:py-32 px-6">
      <div className="max-w-7xl mx-auto">
        <motionBot.div
          {...fadeUp(0)}
          className="liquid-glass rounded-[28px] p-6 md:p-10 lg:p-14 grid grid-cols-1 lg:grid-cols-5 gap-10 lg:gap-14 relative overflow-hidden"
        >
          {/* LEFT: portrait placeholder (40%) */}
          <div className="lg:col-span-2 relative">
            <div
              className="rounded-2xl relative overflow-hidden"
              style={{
                aspectRatio: '1 / 1',
                background:
                  'radial-gradient(ellipse at 50% 40%, rgba(20,184,166,0.28), transparent 60%),' +
                  'linear-gradient(180deg, #111617 0%, #0A0A0A 100%)',
                border: '1px solid rgba(255,255,255,0.05)'
              }}
            >
              {/* diffuse glow */}
              <div
                aria-hidden="true"
                className="absolute -bottom-16 -right-16 w-72 h-72 pointer-events-none"
                style={{ background: 'radial-gradient(circle, rgba(110,231,209,0.35), transparent 70%)', filter: 'blur(20px)' }}
              />
              {/* big faded logo */}
              <div className="absolute inset-0 flex items-center justify-center opacity-30">
                <LogoMark size={260} />
              </div>
              {/* sound wave bottom */}
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <SoundWave bars={48} height={50} intensity={0.85} barWidth={2} gap={3} />
              </div>
              {/* meta top-left */}
              <div className="absolute top-5 left-5 text-[10px] font-mont tracking-[0.32em] uppercase text-white/40">
                Taide<br />
                <span style={{ color: PALETTE.aquaLight }}>Founder · DJ</span>
              </div>
            </div>
          </div>

          {/* RIGHT: copy (60%) */}
          <div className="lg:col-span-3 flex flex-col justify-center">
            <div className="text-[10px] font-mont tracking-[0.4em] uppercase mb-5" style={{ color: PALETTE.aquaLight }}>
              — SOBRE MÍ
            </div>

            <h2
              className="font-poppins font-light text-white"
              style={{ fontSize: 'clamp(34px, 5vw, 62px)', lineHeight: 1.05, letterSpacing: '-0.03em' }}
            >
              <span className="block">Menos caos, mas claridad</span>
              <span className="block mt-8">
                Productividad, Life Style{' '}
                <span className="italic" style={{ color: PALETTE.aquaLight }}>Musica.</span>
              </span>
            </h2>

            <div className="mt-6 space-y-4 font-mont font-light text-white/60 max-w-xl leading-relaxed">
              <p>
                Llevo años en la intersección entre música, diseño y productividad. Lo que empezó
                como rutinas personales para no quemarme creando, terminó convirtiéndose en
                sistemas que ahora comparto con miles de personas.
              </p>
              <p>
                Taide Collective es ese cruce: un lugar donde sonido, herramientas y rutina
                conviven con un mismo lenguaje. Construyo cosas con calma, en bucle, hasta que
                sienten claras.
              </p>
            </div>

            <div className="mt-10 grid grid-cols-3 gap-5 max-w-md">
              {stats.map((s, i) => (
                <motionBot.div
                  key={i}
                  initial={{ opacity: 0, y: 16 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.2 + i * 0.08 }}
                >
                  {s.v && (
                    <div
                      className="font-poppins"
                      style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 400, color: PALETTE.accentLight, letterSpacing: '-0.02em' }}
                    >
                      {s.v}
                    </div>
                  )}
                  {s.l && (
                    <div className="mt-1 text-[10px] font-mont tracking-[0.28em] uppercase text-white/45">
                      {s.l}
                    </div>
                  )}
                </motionBot.div>
              ))}
            </div>
          </div>
        </motionBot.div>
      </div>
    </section>
  );
}

// ============================================================
// CTA Final — newsletter
// ============================================================
function CTAFinal() {
  const [email, setEmail] = tcUseStateBot('');
  const [done, setDone] = tcUseStateBot(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setDone(true);
  };

  return (
    <section id="contenido" data-screen-label="06 CTA" className="py-24 md:py-32 px-6">
      <div className="max-w-5xl mx-auto">
        <motionBot.div
          {...fadeUp(0)}
          className="liquid-glass rounded-[28px] p-8 md:p-14 lg:p-20 relative overflow-hidden text-center"
        >
          {/* radial glow top */}
          <div
            aria-hidden="true"
            className="absolute -top-40 left-1/2 -translate-x-1/2 w-[700px] h-[420px] pointer-events-none"
            style={{ background: 'radial-gradient(ellipse, rgba(20,184,166,0.25), transparent 65%)', filter: 'blur(20px)' }}
          />

          {/* subtle sound wave at top */}
          <div className="absolute top-6 left-0 right-0 px-12 opacity-20 pointer-events-none">
            <SoundWave bars={64} height={36} intensity={0.5} barWidth={2} gap={3} />
          </div>

          <div className="relative z-10">
            <motionBot.div
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-8"
              style={{ background: 'rgba(20,184,166,0.18)', border: '1px solid rgba(110,231,209,0.35)', color: PALETTE.accentLight }}
            >
              <Icon name="sparkles" size={24} />
            </motionBot.div>

            <h2
              className="font-poppins font-light text-white max-w-3xl mx-auto"
              style={{ fontSize: 'clamp(34px, 5.5vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.03em', textWrap: 'balance' }}
            >
              Recursos gratuitos<br />
              para{' '}
              <span className="shiny-text" style={{ fontWeight: 500 }}>creadores como tú.</span>
            </h2>

            <p className="mt-7 max-w-xl mx-auto font-mont font-light text-white/55 leading-relaxed">
              Plantillas, guías y herramientas para potenciar tu creatividad y organización.
              Directo a tu correo, una vez por semana.
            </p>

            <div className="mt-10">
              {done ? (
                <motionBot.div
                  initial={{ opacity: 0, y: 12 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="inline-flex items-center gap-3 px-6 py-4 rounded-full focus-pill"
                >
                  <span
                    className="w-7 h-7 rounded-full flex items-center justify-center"
                    style={{ background: 'rgba(20,184,166,0.3)', color: PALETTE.accentLight }}
                  >
                    <Icon name="check" size={14} strokeWidth={2.2} />
                  </span>
                  <span className="font-poppins text-white tracking-[0.1em] text-sm">
                    Listo. Revisa tu correo.
                  </span>
                </motionBot.div>
              ) : (
                <form
                  onSubmit={submit}
                  className="liquid-glass rounded-full flex items-center p-1.5 max-w-md mx-auto"
                >
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="tu@correo.com"
                    aria-label="Correo electrónico"
                    className="flex-1 bg-transparent px-5 py-3 text-sm font-mont text-white placeholder-white/35 outline-none"
                  />
                  <button
                    type="submit"
                    className="px-6 py-3 rounded-full text-[12px] font-poppins tracking-[0.2em] uppercase text-white transition-transform hover:scale-[1.02] active:scale-[0.98] inline-flex items-center gap-2 shrink-0"
                    style={{
                      background: 'linear-gradient(135deg, #14B8A6 0%, #0D2B2A 100%)',
                      boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.2), 0 10px 30px -8px rgba(20,184,166,0.5)'
                    }}
                  >
                    Suscribirme
                  </button>
                </form>
              )}
            </div>
          </div>
        </motionBot.div>
      </div>
    </section>
  );
}

// ============================================================
// Footer
// ============================================================
function Footer() {
  return (
    <footer className="px-6 pt-20 pb-10">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-8 pb-12 border-b border-white/5">
          <div className="md:col-span-2 max-w-sm">
            <div className="flex items-center gap-3 mb-5">
              <LogoMark size={42} />
              <div className="leading-tight">
                <div className="text-[12px]" style={{ letterSpacing: '0.3em', fontWeight: 300 }}>TAIDE</div>
                <div className="text-[10px]" style={{ letterSpacing: '0.4em', color: PALETTE.aquaLight }}>COLLECTIVE</div>
              </div>
            </div>
            <p className="font-mont font-light text-white/45 text-sm leading-relaxed">
              Sistemas, creatividad y ejecución para construir una vida y proyectos extraordinarios.
            </p>
          </div>

          <div>
            <div className="text-[10px] font-mont tracking-[0.35em] uppercase text-white/40 mb-5">Navegación</div>
            <ul className="space-y-3 font-mont text-white/70 text-sm">
              <li><a href="#inicio" className="hover:text-white">Inicio</a></li>
              <li><a href="#sistemas" className="hover:text-white">Sistemas</a></li>
              <li><a href="#musica" className="hover:text-white">Música</a></li>
              <li><a href="#sobre" className="hover:text-white">Sobre mí</a></li>
            </ul>
          </div>

          <div>
            <div className="text-[10px] font-mont tracking-[0.35em] uppercase text-white/40 mb-5">Conecta</div>
            <div className="flex items-center gap-3">
              {[
                { i: 'instagram', l: 'Instagram' },
                { i: 'youtube',   l: 'YouTube' },
                { i: 'mail',      l: 'Email' }
              ].map((s) => (
                <a
                  key={s.l}
                  href="#"
                  aria-label={s.l}
                  className="liquid-glass w-11 h-11 rounded-full flex items-center justify-center text-white/70 hover:text-white transition-colors"
                >
                  <Icon name={s.i} size={16} />
                </a>
              ))}
            </div>
            <div className="mt-8 text-[10px] font-mont tracking-[0.32em] uppercase text-white/40">
              Vive Tu Sistema
            </div>
          </div>
        </div>

        <div className="pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-[10px] font-mont tracking-[0.22em] uppercase text-white/40">
          <span>© 2026 Taide Collective · Todos los derechos reservados</span>
          <span style={{ letterSpacing: '0.3em' }}>HECHO CON SISTEMA</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SobreMi, CTAFinal, Footer });