// Pillars — 4 pillars, data-driven from Firestore `pillars` collection
const { useState: usePillarState, useEffect: usePillarEffect } = React;

// Defaults used as UI fallback if Firestore returns empty
const PILLAR_DEFAULTS = [
  { id: 'pillar_01', num: '01', name: 'Produktové grafiky',  desc: 'Statické bannery pro Meta. Váš produkt zůstává v originále, bez AI nesmyslů, textace jsou čisté, loga nedotčená.', hue: 'rgba(247,19,63,0.25)',    previewLabel: 'PREVIEW', order: 1 },
  { id: 'pillar_02', num: '02', name: 'AI videa',             desc: 'Krátké formáty pro Reels. Hooky, varianty, testování.',                                                                hue: 'rgba(120,120,180,0.18)',  previewLabel: 'PREVIEW', order: 2 },
  { id: 'pillar_03', num: '03', name: 'Motion bannery',       desc: 'Pohyblivé bannery z produktových podkladů. HTML5, MP4 nebo formáty podle kampaně.',                                     hue: 'rgba(255,140,80,0.18)',   previewLabel: 'PREVIEW', order: 3 },
  { id: 'pillar_04', num: '04', name: 'Kreativní varianty',   desc: 'Více verzí jednoho nápadu. Pro A/B testy na Meta Andromeda.',                                                           hue: 'rgba(120,200,180,0.18)', previewLabel: 'PREVIEW', order: 4 },
];

function PillarCard({ num, name, desc, hue, previewUrl, previewType, previewLabel }) {
  const [hover, setHov] = usePillarState(false);
  const label = previewLabel || 'PREVIEW';
  const hasMedia = !!previewUrl;

  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: hover ? 'var(--surface-hover)' : 'var(--surface)',
        border: '1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border)'),
        borderRadius: '12px',
        padding: '20px',
        display: 'flex', flexDirection: 'column', gap: '20px',
        height: '100%', boxSizing: 'border-box',
        transition: 'background 400ms cubic-bezier(0.65,0,0.35,1), border-color 400ms, transform 500ms cubic-bezier(0.22,1,0.36,1), box-shadow 500ms cubic-bezier(0.22,1,0.36,1)',
        cursor: 'pointer',
        transform: hover ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: hover ? '0 20px 40px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(247,19,63,0.06)' : '0 0 0 1px rgba(0,0,0,0)',
      }}
    >
      {/* Preview area */}
      <div style={{
        aspectRatio: '16/10',
        borderRadius: '8px',
        border: '1px solid var(--border-subtle)',
        position: 'relative', overflow: 'hidden',
        background: '#0a0a0b',
      }}>
        {hasMedia && previewType === 'video' ? (
          <video
            src={previewUrl}
            autoPlay muted loop playsInline
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
        ) : hasMedia ? (
          <img
            src={previewUrl}
            alt={name}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
        ) : (
          <>
            {/* Animated gradient glow fallback */}
            <div style={{
              position: 'absolute', inset: 0,
              background: `radial-gradient(circle at ${hover ? '60%' : '40%'} 50%, ${hue}, transparent 65%)`,
              transition: 'all 600ms cubic-bezier(0.65,0,0.35,1)',
              filter: hover ? 'blur(0px)' : 'blur(2px)',
            }} />
            {/* Scanlines */}
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px)',
              opacity: 0.5,
            }} />
          </>
        )}

        {/* Preview label */}
        <span style={{
          position: 'absolute', top: '10px', left: '10px',
          fontFamily: 'var(--font-mono)', fontSize: '9px',
          color: 'var(--text-tertiary)', letterSpacing: '0.1em',
          textShadow: hasMedia ? '0 1px 4px rgba(0,0,0,0.8)' : 'none',
        }}>● {label}</span>
      </div>

      {/* Text */}
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: '22px', letterSpacing: '-0.015em',
            color: 'var(--text-primary)', margin: 0,
          }}>{name}</h3>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-tertiary)', letterSpacing: '0.1em' }}>{num}</span>
        </div>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: '14px',
          color: 'var(--text-secondary)', lineHeight: 1.55,
          margin: '8px 0 0',
        }}>{desc}</p>
      </div>
    </div>
  );
}

function Pillars() {
  const [pillars, setPillars] = usePillarState(PILLAR_DEFAULTS);
  const { isMobile, isTablet } = useBreakpoint();

  usePillarEffect(() => {
    try {
      const db = firebase.firestore();
      db.collection('pillars').orderBy('order', 'asc').get()
        .then(snap => {
          if (!snap.empty) {
            setPillars(snap.docs.map(d => ({ id: d.id, ...d.data() })));
          }
        })
        .catch(err => console.warn('Pillars: Firestore load skipped', err));
    } catch (e) {}
  }, []);

  const cardCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';

  return (
    <section data-screen-label="02 Pilíře" style={{
      maxWidth: '1440px', margin: '0 auto',
      padding: isMobile ? '48px 20px' : '65px 32px',
    }}>
      {/* Section header */}
      <div style={{
        paddingBottom: isMobile ? '20px' : '32px',
        borderBottom: '1px solid var(--border)',
        marginBottom: isMobile ? '32px' : '64px',
        display: 'flex', alignItems: 'baseline', gap: isMobile ? '16px' : '32px',
      }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: isMobile ? '11px' : '13px',
          color: 'var(--accent)', letterSpacing: '0.1em', whiteSpace: 'nowrap',
        }}>01 —</span>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: isMobile ? 'clamp(32px, 9vw, 48px)' : 'clamp(40px, 5vw, 72px)',
          lineHeight: 1.04, letterSpacing: '-0.025em',
          color: 'var(--text-primary)', margin: 0,
        }}>Co děláme.</h2>
      </div>

      {/* Philosophy — 1 sloupec na mobilu */}
      <Reveal y={20} delay={100}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? '20px' : '64px',
          marginBottom: isMobile ? '40px' : '80px',
          alignItems: 'start',
        }}>
          <p style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: isMobile ? '20px' : 'clamp(22px, 2.2vw, 32px)',
            lineHeight: 1.25, letterSpacing: '-0.02em',
            color: 'var(--text-primary)', margin: 0,
          }}>
            Kreativy, které prodávají. Ne jen vypadají hezky.
          </p>
          <div style={{ display: 'flex', gap: '16px' }}>
            <div style={{
              width: '3px', flexShrink: 0,
              backgroundImage: 'radial-gradient(circle, var(--accent) 1.5px, transparent 1.5px)',
              backgroundSize: '3px 10px',
              backgroundRepeat: 'repeat-y',
            }} />
            <div>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: isMobile ? '15px' : '18px',
                lineHeight: 1.65, color: 'var(--text-secondary)',
                margin: '0 0 16px',
              }}>
                Nejdřív zjistíme, co prodává. Pochopíme váš produkt, značku, zákazníky a kreativy, které vám historicky fungovaly. Teprve potom tvoříme.
              </p>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: isMobile ? '15px' : '18px',
                lineHeight: 1.65, color: 'var(--text-primary)',
                fontWeight: 500, margin: 0,
              }}>
                Výsledkem nejsou náhodné AI obrázky, ale reklamní kreativy postavené na datech.
              </p>
            </div>
          </div>
        </div>
      </Reveal>

      {/* Karty — 1 sloupec mobil, 2 tablet, 4 desktop */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: cardCols,
        gap: '14px',
      }}>
        {pillars.map((p, i) => (
          <Reveal key={p.id || p.num} delay={isMobile ? 0 : i * 90} y={28} style={{ height: '100%' }}>
            <PillarCard {...p} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.Pillars = Pillars;