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

// ============================================================
// Taide Collective — Ecosystem, Panel Central, Música destacada
// ============================================================

const {
  motion: motionMid,
  AnimatePresence: APMid
} = FramerMotion;
const { useState: tcUseStateMid, useEffect: tcUseEffectMid } = React;

// Common animation prop bundle
const fadeUp = (delay = 0) => ({
  initial: { opacity: 0, y: 30 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: '-50px' },
  transition: { duration: 0.7, delay, ease: [0.22, 1, 0.36, 1] }
});

// Reusable eyebrow
function Eyebrow({ children, align = 'center' }) {
  return (
    <div className={'flex items-center gap-4 ' + (align === 'center' ? 'justify-center' : align === 'right' ? 'justify-end' : '')}>
      <span aria-hidden="true" className="block h-px w-10" style={{ background: 'linear-gradient(90deg, transparent, ' + PALETTE.aquaPrimary + ')' }} />
      <span className="text-[10px] font-mont tracking-[0.4em] uppercase" style={{ color: PALETTE.aquaLight }}>
        {children}
      </span>
      <span aria-hidden="true" className="block h-px w-10" style={{ background: 'linear-gradient(90deg, ' + PALETTE.aquaPrimary + ', transparent)' }} />
    </div>
  );
}

// ============================================================
// 1) Ecosystem — 4 cards (Cursos removed)
// ============================================================
const ECO_CARDS = [
  {
    icon: 'layers',
    title: 'Sistemas & Productividad',
    body: 'Plantillas, dashboards y herramientas digitales para organizar tu vida, tus proyectos y tu segundo cerebro.',
    tag: 'Notion · Frameworks'
  },
  {
    icon: 'music',
    title: 'Música & Producción',
    body: 'Mis DJ sets, tracks originales y experimentos sonoros. Sesiones grabadas y mezclas en vivo.',
    tag: 'Original Mix · Live'
  },
  {
    icon: 'video',
    title: 'Contenido & Behind',
    body: 'Tutoriales, videos, artículos y behind-the-scenes para inspirarte y aprender el proceso.',
    tag: 'YouTube · IG · Blog'
  },
  {
    icon: 'sun',
    title: 'Estilo de Vida Creativo',
    body: 'Consejos, rutinas y mentalidad para vivir enfocado, en equilibrio y con intención.',
    tag: 'Mindset · Routine'
  }
];

function Ecosystem() {
  return (
    <section id="sistemas" data-screen-label="02 Ecosystem" className="py-28 md:py-36 px-6">
      <div className="max-w-7xl mx-auto">
        <motionMid.div {...fadeUp(0)}>
          <Eyebrow>TODO EN UN SOLO LUGAR</Eyebrow>
        </motionMid.div>

        <motionMid.h2
          {...fadeUp(0.05)}
          className="mt-6 text-center font-poppins font-light text-white max-w-4xl mx-auto"
          style={{ fontSize: 'clamp(32px, 5vw, 64px)', lineHeight: 1.08, letterSpacing: '-0.03em', textWrap: 'balance' }}
        >
          Un ecosistema para cada<br />
          parte de{' '}
          <span className="italic" style={{ color: PALETTE.aquaLight }}>tu creatividad.</span>
        </motionMid.h2>

        <div className="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {ECO_CARDS.map((c, i) => (
            <motionMid.div
              key={c.title}
              {...fadeUp(i * 0.07)}
              whileHover={{ y: -6 }}
              className="liquid-glass rounded-2xl p-6 cursor-pointer group flex flex-col"
              style={{ minHeight: 280 }}
            >
              <div className="flex items-center justify-between mb-6">
                <div
                  className="w-11 h-11 rounded-xl flex items-center justify-center"
                  style={{ background: 'rgba(20,184,166,0.18)', border: '1px solid rgba(110,231,209,0.25)', color: PALETTE.aquaLight }}
                >
                  <Icon name={c.icon} size={20} />
                </div>
                <motionMid.span
                  className="text-white/40 group-hover:text-white"
                  initial={{ x: 0, y: 0 }}
                  whileHover={{ x: 4, y: -4 }}
                >
                  <Icon name="arrow-up-right" size={16} />
                </motionMid.span>
              </div>

              <h3 className="font-poppins font-medium text-white text-lg leading-snug mb-3" style={{ textWrap: 'balance' }}>
                {c.title}
              </h3>
              <p className="font-mont font-light text-sm text-white/55 leading-relaxed mb-6 flex-1">
                {c.body}
              </p>
              <div className="text-[10px] font-mont tracking-[0.22em] uppercase pt-3 mt-auto border-t border-white/5" style={{ color: PALETTE.aquaLight }}>
                {c.tag}
              </div>
            </motionMid.div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 2) Panel Central — product showcase
// ============================================================
function PanelCentral() {
  const checks = [
    'Diseño minimalista y funcional',
    'Vistas personalizables para cada flujo',
    'Para trabajo, estudio y vida personal',
    'Actualizaciones incluidas de por vida'
  ];

  const dashCards = [
    { label: 'Inbox',    sub: '12 ideas',     progress: 0.85, active: true },
    { label: 'Today',    sub: '4 tareas',      progress: 0.5 },
    { label: 'Projects', sub: '8 activos',     progress: 0.72 },
    { label: 'Music',    sub: 'Now playing',   progress: 0.4 },
    { label: 'Habits',   sub: '6 / 7 hoy',    progress: 0.86 },
    { label: 'Notes',    sub: '142 entradas',  progress: 0.6 }
  ];

  return (
    <section className="py-20 md:py-28 px-6">
      <div className="max-w-7xl mx-auto">
        <motionMid.div
          {...fadeUp(0)}
          className="liquid-glass rounded-[28px] p-6 md:p-10 lg:p-14 grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 relative"
        >
          {/* diffuse glow */}
          <div
            aria-hidden="true"
            className="absolute -bottom-20 -right-20 w-[420px] h-[420px] pointer-events-none"
            style={{ background: 'radial-gradient(circle, rgba(20,184,166,0.35), transparent 60%)', filter: 'blur(20px)' }}
          />

          {/* LEFT: dashboard mockup */}
          <div className="relative">
            <div
              className="rounded-2xl overflow-hidden relative"
              style={{
                background: 'linear-gradient(180deg, rgba(17,22,23,0.95), rgba(10,10,10,0.95))',
                border: '1px solid rgba(255,255,255,0.06)',
                boxShadow: '0 30px 80px -20px rgba(0,0,0,0.6)'
              }}
            >
              {/* window chrome */}
              <div className="flex items-center justify-between px-4 py-3 border-b border-white/5">
                <div className="flex items-center gap-1.5">
                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#ff5f57' }} />
                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#febc2e' }} />
                  <span className="w-2.5 h-2.5 rounded-full" style={{ background: '#28c840' }} />
                </div>
                <div className="text-[10px] font-mont tracking-[0.3em] uppercase text-white/30">panel.taide.app</div>
                <div className="w-8" />
              </div>

              {/* grid */}
              <div className="p-5 grid grid-cols-3 gap-3">
                {dashCards.map((d, i) => (
                  <motionMid.div
                    key={d.label}
                    initial={{ opacity: 0, y: 12 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: 0.1 + i * 0.06 }}
                    className="rounded-xl p-3 relative overflow-hidden"
                    style={{
                      background: d.active
                        ? 'linear-gradient(135deg, rgba(20,184,166,0.25), rgba(13,43,42,0.4))'
                        : 'rgba(255,255,255,0.025)',
                      border: '1px solid ' + (d.active ? 'rgba(110,231,209,0.4)' : 'rgba(255,255,255,0.05)')
                    }}
                  >
                    <div className="flex items-start justify-between">
                      <div>
                        <div className="text-[11px] font-poppins font-medium" style={{ color: d.active ? PALETTE.accentLight : '#fff' }}>
                          {d.label}
                        </div>
                        <div className="text-[9px] mt-0.5 text-white/40 font-mont uppercase tracking-[0.15em]">{d.sub}</div>
                      </div>
                      <span className="w-1.5 h-1.5 rounded-full mt-1" style={{
                        background: d.active ? PALETTE.aquaLight : 'rgba(255,255,255,0.15)',
                        boxShadow: d.active ? '0 0 6px ' + PALETTE.aquaLight : 'none'
                      }} />
                    </div>
                    {/* progress */}
                    <div className="mt-4 h-1 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.05)' }}>
                      <motionMid.div
                        className="h-full rounded-full"
                        initial={{ width: 0 }}
                        whileInView={{ width: d.progress * 100 + '%' }}
                        viewport={{ once: true }}
                        transition={{ duration: 1.2, delay: 0.3 + i * 0.08, ease: [0.22, 1, 0.36, 1] }}
                        style={{
                          background: d.active
                            ? 'linear-gradient(90deg, #C8FFF0, #14B8A6)'
                            : 'linear-gradient(90deg, rgba(110,231,209,0.5), rgba(20,184,166,0.3))'
                        }}
                      />
                    </div>
                  </motionMid.div>
                ))}
              </div>

              {/* mini sound wave footer */}
              <div className="px-5 pb-5 pt-2 flex items-center gap-4">
                <span className="text-[10px] font-mont tracking-[0.25em] uppercase text-white/30">Now Playing</span>
                <div className="flex-1">
                  <SoundWave bars={42} height={28} barWidth={2} gap={2} />
                </div>
                <span className="text-[10px] font-mont text-white/30">02:14</span>
              </div>
            </div>
          </div>

          {/* RIGHT: copy */}
          <div className="relative z-10 flex flex-col justify-center">
            <div className="text-[10px] font-mont tracking-[0.4em] uppercase mb-5" style={{ color: PALETTE.aquaLight }}>
              — NUEVO SISTEMA
            </div>
            <h3
              className="font-poppins font-light text-white"
              style={{ fontSize: 'clamp(34px, 4.5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.03em' }}
            >
              Panel Central<br />
              <span className="shiny-text" style={{ fontWeight: 500 }}>Notion System</span>
            </h3>
            <p className="mt-6 font-mont font-light text-white/55 max-w-md leading-relaxed">
              Tu centro de control para organizar proyectos, tareas, ideas y metas
              en un solo lugar. Un sistema que se adapta a tu forma de pensar.
            </p>

            <ul className="mt-8 space-y-4">
              {checks.map((c, i) => (
                <motionMid.li
                  key={c}
                  initial={{ opacity: 0, x: -12 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.2 + i * 0.08 }}
                  className="flex items-center gap-3 font-mont text-white/80"
                >
                  <span
                    className="w-6 h-6 rounded-full flex items-center justify-center shrink-0"
                    style={{ background: 'rgba(20,184,166,0.2)', border: '1px solid rgba(110,231,209,0.4)', color: PALETTE.aquaLight }}
                  >
                    <Icon name="check" size={12} strokeWidth={2} />
                  </span>
                  <span className="text-sm md:text-base">{c}</span>
                </motionMid.li>
              ))}
            </ul>

            <div className="mt-10">
              <button
                className="px-7 py-4 rounded-full text-sm font-poppins tracking-[0.18em] uppercase text-white transition-transform hover:scale-[1.02] active:scale-[0.98] inline-flex items-center gap-3"
                style={{
                  background: 'linear-gradient(135deg, #14B8A6 0%, #0D2B2A 100%)',
                  boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.2), 0 14px 40px -8px rgba(20,184,166,0.5)'
                }}
              >
                Conoce más
                <Icon name="arrow-right" size={16} />
              </button>
            </div>
          </div>
        </motionMid.div>
      </div>
    </section>
  );
}

// ============================================================
// 3) Música destacada — 4 cards
// ============================================================
const TRACKS = [
  { name: 'Balenciaga',    kind: 'Original Mix', dur: '6:42' },
  { name: 'A Poca Luz',    kind: 'Original Mix', dur: '52:18' },
  { name: 'White Bunny',   kind: 'Original Mix', dur: '7:11' },
  { name: 'Party Mix Live', kind: 'Live Set',    dur: '48:33' }
];

function MusicaDestacada() {
  const [playing, setPlaying] = tcUseStateMid(null);
  return (
    <section id="musica" data-screen-label="03 Música" className="py-20 md:py-28 px-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-14">
          <div>
            <motionMid.div {...fadeUp(0)}>
              <div className="flex items-center gap-4">
                <span aria-hidden="true" className="block h-px w-10" style={{ background: 'linear-gradient(90deg, transparent, ' + PALETTE.aquaPrimary + ')' }} />
                <span className="text-[10px] font-mont tracking-[0.4em] uppercase" style={{ color: PALETTE.aquaLight }}>
                  MÚSICA DESTACADA
                </span>
              </div>
            </motionMid.div>
            <motionMid.h2
              {...fadeUp(0.05)}
              className="mt-5 font-poppins font-light text-white"
              style={{ fontSize: 'clamp(32px, 5vw, 60px)', lineHeight: 1.08, letterSpacing: '-0.03em' }}
            >
              Where sound becomes vision.<br />
              <span className="italic" style={{ color: PALETTE.aquaLight }}>Future memories in audio form</span>
            </motionMid.h2>
          </div>

          <motionMid.button
            {...fadeUp(0.15)}
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            className="liquid-glass px-6 py-3 rounded-full text-[12px] font-poppins tracking-[0.22em] uppercase text-white inline-flex items-center gap-3 self-start lg:self-auto"
          >
            <Icon name="headphones" size={14} /> Ir al perfil
          </motionMid.button>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {TRACKS.map((t, i) => {
            const isPlaying = playing === i;
            return (
              <motionMid.div
                key={t.name}
                {...fadeUp(i * 0.08)}
                whileHover={{ y: -6 }}
                className="liquid-glass rounded-2xl relative overflow-hidden cursor-pointer group"
                style={{ aspectRatio: '1 / 1' }}
                onClick={() => setPlaying(isPlaying ? null : i)}
              >
                {/* sound wave background */}
                <div
                  className="absolute inset-0 flex items-center justify-center px-4"
                  style={{ background: 'radial-gradient(circle at 50% 60%, rgba(20,184,166,0.18), transparent 65%)' }}
                >
                  <SoundWave bars={36} height={160} intensity={isPlaying ? 1.2 : 0.85} className="w-full" barWidth={2} gap={3} />
                </div>

                {/* duration badge */}
                <div
                  className="absolute top-4 right-4 z-10 px-2.5 py-1 rounded-full text-[10px] font-mont tracking-[0.18em] uppercase text-white/80"
                  style={{ background: 'rgba(10,10,10,0.6)', border: '1px solid rgba(255,255,255,0.08)' }}
                >
                  {t.dur}
                </div>

                {/* play button center */}
                <div className="absolute inset-0 flex items-center justify-center z-10">
                  <motionMid.div
                    animate={{ scale: isPlaying ? 1.08 : 1 }}
                    transition={{ duration: 0.4 }}
                    className="w-16 h-16 rounded-full flex items-center justify-center"
                    style={{
                      background: 'rgba(20,184,166,0.25)',
                      backdropFilter: 'blur(8px)',
                      border: '1px solid rgba(110,231,209,0.5)',
                      boxShadow: '0 0 36px rgba(20,184,166,0.4)'
                    }}
                  >
                    {isPlaying ? (
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="#C8FFF0" aria-hidden="true">
                        <rect x="6" y="5" width="4" height="14" rx="1" />
                        <rect x="14" y="5" width="4" height="14" rx="1" />
                      </svg>
                    ) : (
                      <svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
                        <polygon points="7 5 19 12 7 19" fill="#C8FFF0" />
                      </svg>
                    )}
                  </motionMid.div>
                </div>

                {/* title bottom */}
                <div className="absolute bottom-0 left-0 right-0 p-4 z-10 bg-gradient-to-t from-black/70 to-transparent">
                  <div className="font-poppins text-white text-lg leading-tight tracking-tight" style={{ fontWeight: 500 }}>
                    {t.name}
                  </div>
                  <div className="mt-1 text-[10px] font-mont tracking-[0.25em] uppercase text-white/50">
                    {t.kind}
                  </div>
                </div>
              </motionMid.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Ecosystem, PanelCentral, MusicaDestacada, Eyebrow, fadeUp });