// Intro section — animated competitor price vs. ShopPanel price comparison

const SectionHead = window.SectionHead;
const SectionWrap = window.SectionWrap;

// ── Looping 200.000₺ with strike-through ──
// Cycle: count up to 200.000 → strike through → hold → reset
const LoopingStrikePrice = () => {
  const [value, setValue] = React.useState(0);
  const [struck, setStruck] = React.useState(false);
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const target = 200000;

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); io.disconnect(); }
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!visible) return;
    let raf, timer;
    const timers = [];
    const schedule = (fn, t) => { const id = setTimeout(fn, t); timers.push(id); return id; };

    const run = () => {
      // reset
      setValue(0);
      setStruck(false);
      // count-up (1400ms)
      const start = performance.now();
      const dur = 1400;
      const tick = (t) => {
        const p = Math.min(1, (t - start) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setValue(Math.round(target * eased));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      // strike-through after count
      schedule(() => setStruck(true), 1600);
      // hold 2.2s after strike, then loop
      schedule(run, 1600 + 550 + 2200);
    };

    run();
    return () => {
      cancelAnimationFrame(raf);
      timers.forEach(clearTimeout);
    };
  }, [visible]);

  const formatted = value.toLocaleString('tr-TR');

  return (
    <span ref={ref} style={{ position: 'relative', display: 'inline-block', whiteSpace: 'nowrap' }}>
      <span style={{
        color: struck ? '#6b655f' : '#e5e1e4',
        transition: 'color .5s ease',
        fontVariantNumeric: 'tabular-nums',
        fontFeatureSettings: '"tnum"'
      }}>
        {formatted}₺
      </span>
      {/* Strike-through line */}
      <span aria-hidden style={{
        position: 'absolute',
        left: '-4%', right: '-4%',
        top: '52%',
        height: 4,
        borderRadius: 4,
        background: 'linear-gradient(90deg, #FF6B00, #FF8C33)',
        boxShadow: '0 0 14px rgba(255,107,0,0.55)',
        transformOrigin: 'left center',
        transform: struck ? 'scaleX(1)' : 'scaleX(0)',
        transition: 'transform .55s cubic-bezier(.65,.02,.35,1)'
      }} />
    </span>
  );
};

// ── 2999₺ with a beautiful looping glow ──
const ShopPanelPrice = () => (
  <span
    className="sp-glow-price"
    style={{
      display: 'inline-block',
      fontVariantNumeric: 'tabular-nums',
      background: 'linear-gradient(90deg,#FFB877 0%,#FF8C33 40%,#FF6B00 70%,#FF8C33 100%)',
      backgroundSize: '200% 100%',
      WebkitBackgroundClip: 'text',
      backgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      filter: 'drop-shadow(0 0 24px rgba(255,140,51,0.45))',
      animation: 'sp-price-glow 3.2s ease-in-out infinite, sp-price-shimmer 3.2s linear infinite'
    }}
  >
    2.999₺
  </span>
);

const IntroSection = () => {
  // Mobile-only center alignment (Desktop bleibt links)
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.innerWidth < 768
  );
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
  <SectionWrap id="intro" label="02 Intro" padY={160}>
    {/* Animations */}
    <style>{`
      @keyframes sp-price-glow {
        0%, 100% { filter: drop-shadow(0 0 14px rgba(255,140,51,0.35)); }
        50%      { filter: drop-shadow(0 0 36px rgba(255,140,51,0.75)) drop-shadow(0 0 60px rgba(255,107,0,0.35)); }
      }
      @keyframes sp-price-shimmer {
        0%   { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
      }
    `}</style>

    <div style={{
      maxWidth:1100, margin:'0 auto', padding:'0 32px',
      textAlign: isMobile ? 'center' : 'left',
    }}>
      <div style={{
        display:'inline-flex', alignItems:'center', gap:10,
        padding:'6px 12px', borderRadius:9999,
        background:'rgba(255,107,0,0.08)',
        border:'1px solid rgba(255,107,0,0.25)',
        marginBottom:28
      }}>
        <span style={{width:6,height:6,borderRadius:9999,background:'#FF6B00',boxShadow:'0 0 8px #FF6B00',animation:'sp-pulse 1.8s ease-in-out infinite'}} />
        <span style={{fontFamily:'Space Grotesk',fontSize:10,color:'#FF8C33',letterSpacing:'0.25em',textTransform:'uppercase',fontWeight:800}}>
          Piyasadaki durum
        </span>
      </div>

      <h2 style={{
        fontFamily:'Manrope', fontSize:'clamp(34px, 4.4vw, 60px)',
        fontWeight:800, letterSpacing:'-0.035em', lineHeight:1.12,
        color:'#e5e1e4', margin:'0 0 32px', textWrap:'balance'
      }}>
        Benzer yazılımlar sizden <LoopingStrikePrice /> talep ediyor.
      </h2>

      <h2 style={{
        fontFamily:'Manrope', fontSize:'clamp(34px, 4.4vw, 60px)',
        fontWeight:800, letterSpacing:'-0.035em', lineHeight:1.12,
        color:'#e5e1e4', margin:'0 0 32px', textWrap:'balance'
      }}>
        ShopPanel ile sadece <ShopPanelPrice />.
      </h2>

      <p style={{
        fontSize:17, lineHeight:1.65, color:'#a98a7d',
        maxWidth:640,
        margin: isMobile ? '0 auto 8px' : '0 0 8px',
        textWrap:'pretty'
      }}>
        Daha fazla özellik, sınırsız destek, gizli modül ücreti yok.
        Tek abonelik — gelecek güncellemeler dahil.
      </p>

      {/* Stats row */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:32,marginTop:64,paddingTop:40,borderTop:'1px solid rgba(255,255,255,0.06)'}}>
        {[
          {n:'∞', l:'Pazaryeri / mağaza', s:'Trendyol, Shopify, Hepsiburada, n11 — hepsi tek panelde.'},
          {n:'7/24', l:'Gerçek insan desteği', s:'Uzak masaüstü, telefon, canlı sohbet — hiç ek ücret yok.'},
          {n:'0₺', l:'Ek modül, ek lisans', s:'Bir abonelik, tüm özellikler. Gelecek güncellemeler dahil.'},
        ].map((x,i) => (
          <div key={i}>
            <div style={{fontFamily:'Manrope',fontSize:48,fontWeight:800,letterSpacing:'-0.04em',color:'#FF8C33',lineHeight:1,marginBottom:10}}>{x.n}</div>
            <div style={{fontFamily:'Space Grotesk',fontSize:11,color:'#5de6ff',letterSpacing:'0.2em',textTransform:'uppercase',fontWeight:700,marginBottom:8}}>{x.l}</div>
            <div style={{fontSize:13,lineHeight:1.55,color:'#a98a7d'}}>{x.s}</div>
          </div>
        ))}
      </div>
    </div>
  </SectionWrap>
  );
};

window.IntroSection = IntroSection;