/* Auto-generated from mockups/09-problem-mirror.html */
(function(){

const { useEffect, useRef } = React;

    const X = ({ size = 16 }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flex:'none' }}>
        <path d="M18 6L6 18M6 6l12 12"/>
      </svg>
    );
    const ArrowDown = ({ size = 18 }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" style={{ flex:'none' }}>
        <path d="M12 5v14M5 12l7 7 7-7"/>
      </svg>
    );

    function useStaggeredReveal(delayMs = 0) {
      const ref = useRef(null);
      useEffect(() => {
        if (!ref.current) return;
        const el = ref.current;
        const trigger = () => setTimeout(() => el.classList.add('in'), delayMs);
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { trigger(); return; }
        const io = new IntersectionObserver(([e]) => {
          if (e.isIntersecting) { trigger(); io.disconnect(); }
        }, { threshold: 0.15 });
        io.observe(el);
        return () => io.disconnect();
      }, [delayMs]);
      return ref;
    }

    function Eyebrow() {
      const ref = useStaggeredReveal(0);
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 14,
          color: '#f87171',
          letterSpacing: '0.16em', textTransform: 'uppercase',
          marginBottom: 24,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 9999,
            background: '#ef4444', boxShadow: '0 0 8px #ef4444',
          }}/>
          {t.problem.badge}
        </div>
      );
    }

    function Headline() {
      const ref = useStaggeredReveal(80);
      const t = window.useCopy();
      return (
        <h2 ref={ref} className="reveal section-h2" style={{
          margin: '0 0 18px',
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.035em',
          color: 'var(--text-primary)', textWrap: 'balance',
        }}>
          {t.problem.h1}
        </h2>
      );
    }

    function SubLine() {
      const ref = useStaggeredReveal(160);
      const t = window.useCopy();
      return (
        <p ref={ref} className="reveal" style={{
          margin: '0 0 48px',
          maxWidth: 620,
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 19, lineHeight: 1.55, color: 'var(--text-muted)',
        }}>
          {t.problem.sub}
        </p>
      );
    }

    function PainItem({ text, delay }) {
      const ref = useStaggeredReveal(delay);
      return (
        <li ref={ref} className="reveal item-row" style={{
          display: 'flex', alignItems: 'flex-start', gap: 18,
          padding: '16px 0',
          borderBottom: '1px solid rgba(39,39,42,0.55)',
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 18, lineHeight: 1.5,
          color: 'var(--text-secondary)', letterSpacing: '-0.005em',
        }}>
          <span style={{
            flex: 'none', width: 26, height: 26, borderRadius: 9999,
            background: 'rgba(239,68,68,0.08)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: 'rgba(248,113,113,0.80)',
            marginTop: 2,
          }}>
            <X size={13}/>
          </span>
          <span style={{ textWrap: 'pretty' }}>{text}</span>
        </li>
      );
    }

    function Checklist() {
      const t = window.useCopy();
      return (
        <ul style={{
          listStyle: 'none', padding: 0, margin: '0 0 56px',
          borderTop: '1px solid rgba(39,39,42,0.55)',
        }}>
          {t.problem.pains.map((pain, i) => (
            <PainItem key={i} text={pain} delay={240 + i * 80}/>
          ))}
        </ul>
      );
    }

    function Closing() {
      const ref = useStaggeredReveal(240 + 5 * 80 + 120);
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{
          display: 'flex', alignItems: 'center', gap: 14,
          flexWrap: 'wrap',
        }}>
          <p style={{
            margin: 0,
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 22, lineHeight: 1.45, letterSpacing: '-0.015em',
            color: 'var(--text-primary)',
          }}>
            {t.problem.cta_pre}{' '}
            <span style={{
              color: '#0047ff',
              textShadow: '0 0 14px var(--accent-primary-glow)',
            }}>
              {t.problem.cta_bold}
            </span>
          </p>
          <span className="arrow-pulse" style={{
            color: '#0047ff',
            display: 'inline-flex', alignItems: 'center',
            filter: 'drop-shadow(0 0 8px rgba(0,71,255,0.6))',
          }}>
            <ArrowDown size={22}/>
          </span>
        </div>
      );
    }

    function Section() {
      return (
        <section className="grain" style={{
          position: 'relative',
          background: 'var(--bg-base)',
          padding: '32px 48px',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'relative',
            maxWidth: 720,
            margin: '0 auto',
          }}>
            <Eyebrow/>
            <Headline/>
            <SubLine/>
            <Checklist/>
            <Closing/>
          </div>
        </section>
      );
    }

window.ProblemSection = Section;
})();