/* Pricing — Pay per call, keine Grundgebühr */

/* Counts from `from` down/up to `to` (2 decimals, comma), starts when the
   wrapping element scrolls into view. `delay` lets us stagger the 3 tiers. */
const useInViewDecimal = (from, to, duration = 3400, delay = 0) => {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(from);
  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setVal(to); return; }
    const el = ref.current; if (!el) return;
    let triggered = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !triggered) {
          triggered = true;
          setTimeout(() => {
            const start = performance.now();
            const tick = (now) => {
              const t = Math.min(1, (now - start) / duration);
              // Very strong ease-out — decelerates heavily near the end.
              const eased = 1 - Math.pow(1 - t, 8);
              setVal(from + (to - from) * eased);
              if (t < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }, delay);
          obs.disconnect();
        }
      });
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, val];
};

const PriceCount = ({ from, to, delay }) => {
  const [ref, v] = useInViewDecimal(from, to, 3400, delay);
  return <span ref={ref}>{v.toFixed(2).replace('.', ',')}</span>;
};

const Pricing = () => {
  const tiers = [
    { range:'Die ersten 5.000',  hint:'Buchungen / mtl.',          from: 0.99, to: 0.50, sub:'pro Buchung in dieser Staffel' },
    { range:'Die nächsten 5.000',hint:'Buchungen (5.001 – 10.000)',from: 0.89, to: 0.45, sub:'pro Buchung in dieser Staffel', highlight:true },
    { range:'Jede weitere',      hint:'ab der 10.001. Buchung',    from: 0.79, to: 0.40, sub:'pro Buchung in dieser Staffel' },
  ];

  const included = [
    'Keine Grundgebühr',
    'Keine Einrichtungsgebühr',
    'Keine Servicekosten',
    'Keine Entwicklungskosten',
    'Alle Features inklusive',
    '24/7 Support inklusive',
    'Unbegrenzte Dispatcher-Integrationen',
  ];

  return (
    <section className="section ink" id="preise">
      <div className="wrap">
        <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:32,alignItems:'end',marginBottom:64}} className="pricing-grid">
          <div>
            <span className="eyebrow">Preise</span>
            <h2 className="h-section" style={{marginTop:24}}>
              Sie zahlen nur,<br/>
              für <span style={{color:'var(--lime)'}}>echte</span><br/>
              <span style={{fontStyle:'italic'}}>Telefon-Buchungen.</span>
            </h2>
          </div>
          <p className="lede" style={{margin:0}}>
            Ein einziger Posten auf der Rechnung: der Preis pro erfolgreicher Buchung. Anrufe ohne Buchung kosten nichts — Setup, Features, Support und Integrationen sowieso nicht.
          </p>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:32,alignItems:'stretch'}} className="pricing-grid">
          {/* Linke Seite: Staffel */}
          <div style={{background:'var(--ink-2)',border:'1px solid var(--ink-line)',padding:40,display:'flex',flexDirection:'column'}}>
            <div className="mono" style={{fontSize:12,color:'rgba(246,245,239,0.55)',letterSpacing:'0.1em',marginBottom:24}}>
              PREISSTAFFEL · PRO TELEFON-BUCHUNG
            </div>

            <div style={{display:'flex',flexDirection:'column',gap:0,flex:1}}>
              {tiers.map((t,i)=>(
                <div key={i} style={{
                  display:'grid',
                  gridTemplateColumns:'1fr auto',
                  gap:24,
                  alignItems:'center',
                  padding:'28px 0',
                  borderTop: i===0 ? '1px solid var(--ink-line)' : 'none',
                  borderBottom:'1px solid var(--ink-line)',
                  position:'relative',
                }}>
                  {t.highlight && (
                    <div style={{position:'absolute',left:-40,top:'50%',transform:'translateY(-50%)',width:3,height:'70%',background:'var(--lime)'}}></div>
                  )}
                  <div>
                    <div className="mono" style={{fontSize:11,color:'rgba(246,245,239,0.5)',letterSpacing:'0.1em',marginBottom:6}}>
                      STAFFEL {String(i+1).padStart(2,'0')}
                    </div>
                    <div style={{fontFamily:'var(--f-display)',fontSize:28,letterSpacing:'-0.02em',lineHeight:1.15}}>
                      {t.range}
                    </div>
                    <div style={{color:'rgba(246,245,239,0.55)',fontSize:14,marginTop:4}}>
                      {t.hint}
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontFamily:'var(--f-display)',fontSize:48,letterSpacing:'-0.03em',lineHeight:1,color:t.highlight?'var(--lime)':'var(--paper)',fontVariantNumeric:'tabular-nums'}}>
                      <PriceCount from={t.from} to={t.to} delay={i*250}/>&thinsp;€
                    </div>
                    <div className="mono" style={{fontSize:11,color:'rgba(246,245,239,0.5)',letterSpacing:'0.08em',marginTop:4}}>
                      {t.sub.toUpperCase()}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{marginTop:20,padding:'14px 16px',background:'rgba(246,245,239,0.03)',border:'1px solid rgba(246,245,239,0.1)'}}>
              <div className="mono" style={{fontSize:10,color:'rgba(246,245,239,0.5)',letterSpacing:'0.1em',marginBottom:8}}>
                BEISPIEL · 12.000 BUCHUNGEN / MONAT
              </div>
              <div style={{fontSize:12,color:'rgba(246,245,239,0.65)',lineHeight:1.65,fontVariantNumeric:'tabular-nums'}}>
                5.000 × 0,50&thinsp;€ &nbsp;=&nbsp; 2.500&thinsp;€<br/>
                5.000 × 0,45&thinsp;€ &nbsp;=&nbsp; 2.250&thinsp;€<br/>
                2.000 × 0,40&thinsp;€ &nbsp;=&nbsp; &nbsp;&nbsp;800&thinsp;€
              </div>
              <div style={{borderTop:'1px solid rgba(246,245,239,0.1)',marginTop:8,paddingTop:8,display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                <span className="mono" style={{fontSize:10,color:'rgba(246,245,239,0.5)',letterSpacing:'0.08em'}}>GESAMT</span>
                <span style={{fontSize:14,color:'rgba(246,245,239,0.85)',fontVariantNumeric:'tabular-nums',fontWeight:500}}>5.550&thinsp;€</span>
              </div>
            </div>

            <div style={{marginTop:24,fontSize:13,color:'rgba(246,245,239,0.55)',lineHeight:1.55}}>
              Abgerechnet wird nur, wenn aus dem Anruf tatsächlich eine Buchung entsteht.* Informations-Anrufe, Fehlversuche und aufgelegte Gespräche kosten nichts.
              <div style={{marginTop:10,fontSize:11,color:'rgba(246,245,239,0.4)',fontFamily:'var(--f-mono)',letterSpacing:'0.04em'}}>
                * GILT NUR FÜR BUCHUNGEN ÜBER DEN VOICEBOT (TELEFONIE). BUCHUNGEN ÜBER ANDERE KANÄLE SIND NICHT ENTHALTEN.
              </div>
            </div>
          </div>

          {/* Rechte Seite: 0 € inklusive */}
          <div style={{background:'var(--lime)',color:'var(--ink)',padding:40,display:'flex',flexDirection:'column',position:'relative',overflow:'hidden'}}>
            <div style={{position:'absolute',top:-40,right:-40,width:200,height:200,borderRadius:'50%',background:'rgba(10,11,8,0.05)'}}></div>
            <div className="mono" style={{fontSize:12,letterSpacing:'0.1em',marginBottom:24}}>
              ALLES ANDERE
            </div>
            <div style={{fontFamily:'var(--f-display)',fontSize:'clamp(80px,10vw,140px)',letterSpacing:'-0.04em',lineHeight:0.85,marginBottom:8}}>
              0&thinsp;€
            </div>
            <div style={{fontFamily:'var(--f-display)',fontSize:22,letterSpacing:'-0.01em',marginBottom:32,fontStyle:'italic'}}>
              pauschal. immer. ohne Sternchen.
            </div>

            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10,fontSize:14,flex:1,position:'relative'}}>
              {included.map((f,i)=>(
                <li key={i} style={{display:'flex',gap:10,alignItems:'flex-start',padding:'8px 0',borderBottom:'1px solid rgba(10,11,8,0.12)'}}>
                  <span style={{fontFamily:'var(--f-mono)',fontSize:12,marginTop:2,fontWeight:600}}>+</span>
                  {f}
                </li>
              ))}
            </ul>

            <a href="demo.html" className="btn" style={{background:'var(--ink)',color:'var(--lime)',marginTop:32,justifyContent:'center'}}>
              Demo buchen <span className="arrow">↗</span>
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media(max-width:960px){
          .pricing-grid{grid-template-columns:1fr !important}
        }
      `}</style>
    </section>
  );
};

window.Pricing = Pricing;