// METIO v2 — sections: problem→solution, features, sports, social, showcase, pricing, CTA, footer

function ProblemSolution() {
  const pains = [
    { emoji:'😤', thought:'„Iar am uitat sa sun un parinte despre abonament..."' },
    { emoji:'📋', thought:'„Unde am pus foaia cu prezentele din luna trecuta?"' },
    { emoji:'🤷', thought:'„A venit la antrenament, dar nu stiu daca a platit..."' },
    { emoji:'📊', thought:'„Am 3 foi Excel si niciuna nu e la zi."' },
    { emoji:'📱', thought:'„Un parinte m-a sunat la 10 noaptea sa intrebe de plata."' },
    { emoji:'😓', thought:'„La final de luna, fac raportul manual. Dureaza ore."' },
  ];

  const solutions = [
    { icon:'✓', text:'Toti elevii, grupele si platile — intr-un singur loc' },
    { icon:'✓', text:'Prezenta marcata in 30 de secunde, sincronizata instant' },
    { icon:'✓', text:'Parintii vad singuri statusul — fara apeluri inutile' },
    { icon:'✓', text:'Rapoarte lunare generate automat, cu un singur click' },
  ];

  return (
    <section className="section-pad" style={{position:'relative',padding:'120px 24px',display:'flex',justifyContent:'center',overflow:'hidden'}}>
      {/* bg glow */}
      <div style={{position:'absolute',top:'30%',left:'50%',transform:'translateX(-50%)',width:800,height:400,borderRadius:'50%',background:`radial-gradient(ellipse, rgba(248,113,113,.06), transparent 65%)`,filter:'blur(60px)',pointerEvents:'none'}}/>

      <div style={{maxWidth:1100,width:'100%',position:'relative',zIndex:1}}>

        {/* ── Etapa 1: Recunoastere ── */}
        <Reveal>
          <div style={{textAlign:'center',marginBottom:56}}>
            <div style={{fontSize:12,fontWeight:700,color:'#F87171',letterSpacing:'.2em',marginBottom:16,textTransform:'uppercase'}}>iti suna cunoscut?</div>
            <h2 style={{fontSize:'clamp(32px,4.5vw,54px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1.05,margin:'0 auto',maxWidth:740}}>
              Conduci un club sportiv<br/>
              <span style={{color:'rgba(255,255,255,.4)',fontWeight:500}}>si te regasesti in asta:</span>
            </h2>
          </div>
        </Reveal>

        {/* Pain grid */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,marginBottom:80}} className="pain-grid">
          <style>{`@media(max-width:720px){.pain-grid{grid-template-columns:1fr !important;}}`}</style>
          {pains.map((p,i)=>(
            <Reveal key={i} delay={i*60}>
              <div style={{
                borderRadius:18,padding:'20px 22px',
                background:'rgba(248,113,113,.05)',
                border:'1px solid rgba(248,113,113,.18)',
                display:'flex',alignItems:'flex-start',gap:14,
                transition:'transform .2s, border-color .2s',
              }}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.borderColor='rgba(248,113,113,.35)'}}
              onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.borderColor='rgba(248,113,113,.18)'}}>
                <span style={{fontSize:26,flexShrink:0,lineHeight:1}}>{p.emoji}</span>
                <p style={{margin:0,color:'rgba(255,255,255,.75)',fontSize:15,lineHeight:1.55,fontStyle:'italic'}}>{p.thought}</p>
              </div>
            </Reveal>
          ))}
        </div>

        {/* ── Tranzitie ── */}
        <Reveal>
          <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:16,marginBottom:80}}>
            <div style={{width:1,height:48,background:'linear-gradient(180deg,rgba(248,113,113,.4),rgba(139,92,246,.8))'}}/>
            <div style={{
              padding:'12px 28px',borderRadius:99,
              background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,
              color:'#fff',fontWeight:700,fontSize:14,letterSpacing:'.04em',
              boxShadow:`0 20px 40px -12px ${V2.violet}80`,
            }}>
              METIO rezolva asta complet
            </div>
            <div style={{width:1,height:48,background:`linear-gradient(180deg,${V2.violet}80,${V2.cyan}40)`}}/>
          </div>
        </Reveal>

        {/* ── Etapa 2: Solutie ── */}
        <Reveal>
          <div style={{
            borderRadius:28,padding:2,
            background:`linear-gradient(135deg,${V2.violet}60,${V2.cyan}40)`,
            boxShadow:`0 60px 100px -40px ${V2.violet}60`,
          }}>
            <div style={{
              borderRadius:26,padding:'48px 52px',
              background:'linear-gradient(145deg,#121d30,#0e1726)',
              display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'center',
            }} className="sol-inner">
              <style>{`@media(max-width:720px){.sol-inner{grid-template-columns:1fr !important;gap:32px !important;padding:32px 24px !important;}}`}</style>

              <div>
                <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>Cu METIO</div>
                <h3 style={{fontSize:'clamp(26px,3.5vw,40px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1.15,margin:'0 0 16px'}}>
                  Tot clubul tau,<br/><GradientText>organizat dintr-un telefon</GradientText>
                </h3>
                <p style={{color:V2.mute,fontSize:15,lineHeight:1.65,margin:0}}>
                  Prezente, plati, grupe, antrenori, parinti — totul sincronizat, mereu la zi. Fara foi, fara telefoane inutile, fara surprize la final de luna.
                </p>
              </div>

              <div style={{display:'flex',flexDirection:'column',gap:14}}>
                {solutions.map((s,i)=>(
                  <div key={i} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 18px',borderRadius:14,background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.07)'}}>
                    <div style={{
                      width:28,height:28,borderRadius:99,flexShrink:0,
                      background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,
                      display:'grid',placeItems:'center',
                      fontSize:13,fontWeight:800,color:'#fff',
                    }}>✓</div>
                    <span style={{color:'rgba(255,255,255,.78)',fontSize:15,lineHeight:1.4}}>{s.text}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>

      </div>
    </section>
  );
}

function Features() {
  const feats = [
    {
      tag: 'Dashboard',
      tagColor: V2.cyan,
      title: 'Tot ce conteaza,\npe un singur ecran',
      desc: 'Deschizi aplicatia si vezi imediat: cati elevi ai, cine a platit, cine nu si ce antrenament urmeaza azi.',
      bullets: [
        'Statistici live — elevi activi, abonamente incasate',
        'Calendar cu antrenamente, vacante si evenimente — vizibile pentru toata lumea',
        'Restantierii apar imediat in ecranul principal',
      ],
      img: 'assets/feat-dashboard.png',
      glow: V2.cyan,
      flip: false,
    },
    {
      tag: 'Elevi & Grupe',
      tagColor: V2.violet,
      title: 'Toti elevii,\norganizati perfect',
      desc: 'Toti elevii tai intr-o lista ordonata, grupati cum vrei tu. Cauti, filtrezi sau muti un elev intre grupe in cateva secunde.',
      bullets: [
        'Grupe multiple — bebe, copii, adulti, avansati',
        'Filtrare rapida: platit / neplatit / restantier',
        'Badge-uri vizuale pentru statusul abonamentului',
      ],
      img: 'assets/feat-Elevi.png',
      glow: V2.violet,
      flip: true,
    },
    {
      tag: 'Prezenta',
      tagColor: V2.cyan,
      title: 'Prezenta marcata\nin 3 secunde',
      desc: 'La fiecare antrenament dai click pe fiecare elev — prezent sau absent. Atat. Tot istoricul se salveaza automat.',
      bullets: [
        'Un click per elev, sincronizat in timp real',
        'Statistici prezenta lunara per grupa',
        'Procent mediu si numar antrenamente completate',
      ],
      img: 'assets/feat-Prezenta.png',
      glow: V2.cyan,
      flip: false,
    },
    {
      tag: 'Fisa Elevului',
      tagColor: V2.violet,
      title: 'Tot istoricul unui elev\nintr-un singur loc',
      desc: 'Apesi pe orice elev si vezi tot: cate antrenamente a venit, daca a platit si istoricul complet al abonamentelor.',
      bullets: [
        'Rata prezenta si numar sedinte',
        'Status plata clar: platit / neplatit',
        'Istoric complet abonamente si plati',
      ],
      img: 'assets/feat-Elev.png',
      glow: V2.violet,
      flip: true,
    },
    {
      tag: 'Rapoarte',
      tagColor: V2.cyan,
      title: 'Rapoarte lunare\ninstant, oricand',
      desc: 'La final de luna ai automat un tabel cu toate prezentele — cine a venit, cand si de cate ori. Descarci cu un click.',
      bullets: [
        'Grid complet prezente/absente pe luna',
        'Filtrare pe grupa sau pe toti elevii',
        'Export cu un singur click',
      ],
      img: 'assets/feat-rapoarte lunare prezenta.png',
      glow: V2.cyan,
      flip: false,
    },
    {
      tag: 'Anunturi',
      tagColor: V2.violet,
      title: 'Mesaje la parinti\ndintr-o singura apasare',
      desc: 'Scrii un mesaj, alegi grupa, apesi trimite. Parintii il vad instant in aplicatie — fara grupuri de WhatsApp, fara mesaje pierdute.',
      bullets: [
        'Anunturi per grupa sau pentru tot clubul',
        'Parintii vad mesajul imediat in aplicatie',
        'Fara WhatsApp, fara confuzie',
      ],
      img: 'assets/feat-anunturi.png',
      glow: V2.violet,
      flip: true,
    },
  ];

  return (
    <section id="Functii" className="section-pad" style={{position:'relative',padding:'120px 24px',display:'flex',justifyContent:'center',overflow:'hidden'}}>
      <style>{`
        .feat-row { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
        @media(max-width:820px){
          .feat-row { grid-template-columns:1fr !important; gap:40px !important; }
          .feat-phone { order:-1 !important; display:flex; justify-content:center; }
          .feat-text  { text-align:left !important; }
          .feat-text h3 { text-align:left !important; }
          .feat-text p  { text-align:left !important; max-width:100% !important; }
          .feat-bullets { align-items:flex-start !important; width:100%; }
        }
      `}</style>

      <div style={{maxWidth:1120,width:'100%'}}>
        <Reveal>
          <div style={{textAlign:'center',marginBottom:96}}>
            <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>Functionalitati</div>
            <h2 style={{fontSize:'clamp(34px,4.5vw,58px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1,margin:'0 auto 18px',maxWidth:820}}>
              Tot ce ai nevoie,<br/><GradientText>nimic in plus</GradientText>
            </h2>
            <p style={{color:V2.mute,fontSize:19,maxWidth:560,margin:'0 auto',lineHeight:1.55}}>
              Construit pentru antrenori reali. Testat cu cluburi reale.
            </p>
          </div>
        </Reveal>

        <div style={{display:'flex',flexDirection:'column',gap:120}}>
          {feats.map((f,i)=>(
            <Reveal key={i} delay={0}>
              <div className="feat-row">
                {/* Text side */}
                <div className={`feat-text${f.flip?' feat-text-right':''}`} style={{order: f.flip ? 2 : 1}}>
                  <div style={{
                    display:'inline-block',padding:'5px 14px',borderRadius:99,marginBottom:20,
                    background:`${f.tagColor}18`,border:`1px solid ${f.tagColor}40`,
                    color:f.tagColor,fontSize:12,fontWeight:700,letterSpacing:'.12em',textTransform:'uppercase',
                  }}>{f.tag}</div>

                  <h3 style={{
                    fontSize:'clamp(28px,3.5vw,44px)',fontWeight:800,color:'#fff',
                    letterSpacing:'-.03em',lineHeight:1.15,margin:'0 0 18px',
                    whiteSpace:'pre-line',
                  }}>{f.title}</h3>

                  <p style={{color:V2.mute,fontSize:18,lineHeight:1.65,margin:'0 0 28px',maxWidth:460}}>{f.desc}</p>

                  <div className="feat-bullets" style={{display:'flex',flexDirection:'column',gap:12,alignItems:'flex-start'}}>
                    {f.bullets.map((b,j)=>(
                      <div key={j} style={{display:'flex',alignItems:'center',gap:12}}>
                        <div style={{
                          width:22,height:22,borderRadius:99,flexShrink:0,
                          background:`linear-gradient(135deg,${f.tagColor}30,${f.tagColor}15)`,
                          border:`1px solid ${f.tagColor}50`,
                          display:'grid',placeItems:'center',
                        }}>
                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12l5 5L20 7" stroke={f.tagColor} strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </div>
                        <span style={{color:'rgba(255,255,255,.78)',fontSize:16,fontWeight:500}}>{b}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Phone side */}
                <div className="feat-phone" style={{order: f.flip ? 1 : 2, display:'flex', justifyContent:'center', position:'relative'}}>
                  {/* ambient glow disk */}
                  <div style={{
                    position:'absolute',top:'50%',left:'50%',
                    transform:'translate(-50%,-50%)',
                    width:340,height:340,borderRadius:'50%',
                    background:`radial-gradient(circle, ${f.glow}28, transparent 65%)`,
                    filter:'blur(50px)',pointerEvents:'none',
                  }}/>
                  <PhoneFrame
                    src={f.img}
                    width={260}
                    glow={f.glow}
                    rotate={f.flip ? 2 : -2}
                  />
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function Accounts() {
  const accounts = [
    {
      color: '#F59E0B',
      badge: 'Cont Admin',
      emoji: '👑',
      title: 'Adminul are control total',
      desc: 'Tu decizi cine vede ce. Ca admin vezi tot clubul — elevi, antrenori, plati, rapoarte — si configurezi totul dupa cum vrei.',
      points: [
        'Acces complet la toate datele clubului',
        'Gestioneaza antrenori si aloca grupele',
        'Rapoarte financiare si de prezenta',
        'Setari cont si configurare club',
      ],
    },
    {
      color: V2.violet,
      badge: 'Cont Antrenor',
      emoji: '🏅',
      title: 'Antrenorul se ocupa de grupele lui',
      desc: 'Fiecare antrenor intra in contul lui si vede doar ce il priveste. Marcheaza prezenta, urmareste platile — fara sa se amestece cu restul.',
      points: [
        'Vede doar grupele care ii sunt alocate',
        'Marcare prezenta la fiecare antrenament',
        'Gestionare plati si abonamente elevi',
        'Statistici proprii per grupa',
      ],
    },
    {
      color: V2.cyan,
      badge: 'Cont Parinte',
      emoji: '👨‍👧',
      title: 'Parintele vede tot ce il intereseaza',
      desc: 'Parintele deschide aplicatia si vede cate antrenamente a venit copilul si daca abonamentul e platit — fara sa mai sune pe nimeni.',
      points: [
        'Prezenta copilului in timp real',
        'Status abonament si plati',
        'Notificari la absente',
        'Acces din orice dispozitiv',
      ],
    },
  ];

  return (
    <section className="section-pad" style={{position:'relative',padding:'80px 24px 120px',display:'flex',justifyContent:'center'}}>
      <div style={{maxWidth:1120,width:'100%'}}>
        <Reveal>
          <div style={{textAlign:'center',marginBottom:64}}>
            <div style={{fontSize:12,fontWeight:700,color:V2.violet,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>Trei tipuri de conturi</div>
            <h2 style={{fontSize:'clamp(32px,4.5vw,52px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1,margin:'0 auto 16px',maxWidth:760}}>
              Fiecare stie <GradientText>exact ce il priveste</GradientText>
            </h2>
            <p style={{color:V2.mute,fontSize:18,maxWidth:520,margin:'0 auto',lineHeight:1.55}}>
              Admin, antrenor sau parinte — fiecare are propriul cont, cu accesul potrivit. Fara confuzie, fara date expuse gresit.
            </p>
          </div>
        </Reveal>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:24}} className="accounts-grid">
          <style>{`@media(max-width:820px){.accounts-grid{grid-template-columns:1fr !important;}}`}</style>
          {accounts.map((a,i)=>(
            <Reveal key={i} delay={i*120}>
              <div style={{
                borderRadius:26,padding:40,height:'100%',
                background:`linear-gradient(145deg, ${a.color}12, rgba(255,255,255,.02))`,
                border:`1px solid ${a.color}30`,
                position:'relative',overflow:'hidden',
              }}>
                {/* top accent bar */}
                <div style={{position:'absolute',top:0,left:0,right:0,height:3,background:`linear-gradient(90deg,transparent,${a.color},transparent)`}}/>
                {/* bg glow */}
                <div style={{position:'absolute',top:-60,right:-60,width:200,height:200,borderRadius:'50%',background:`radial-gradient(circle,${a.color}20,transparent 65%)`,filter:'blur(30px)',pointerEvents:'none'}}/>

                <div style={{position:'relative',zIndex:1}}>
                  {/* badge */}
                  <div style={{
                    display:'inline-flex',alignItems:'center',gap:8,padding:'6px 14px',
                    borderRadius:99,marginBottom:24,
                    background:`${a.color}18`,border:`1px solid ${a.color}40`,
                  }}>
                    <span style={{fontSize:18}}>{a.emoji}</span>
                    <span style={{color:a.color,fontSize:12,fontWeight:700,letterSpacing:'.08em',textTransform:'uppercase'}}>{a.badge}</span>
                  </div>

                  <h3 style={{fontSize:'clamp(22px,2.5vw,28px)',fontWeight:800,color:'#fff',letterSpacing:'-.02em',margin:'0 0 14px',lineHeight:1.2}}>{a.title}</h3>
                  <p style={{color:V2.mute,fontSize:17,lineHeight:1.65,margin:'0 0 28px'}}>{a.desc}</p>

                  <div style={{display:'flex',flexDirection:'column',gap:10}}>
                    {a.points.map((p,j)=>(
                      <div key={j} style={{display:'flex',alignItems:'center',gap:10}}>
                        <div style={{width:20,height:20,borderRadius:99,flexShrink:0,
                          background:`${a.color}20`,border:`1px solid ${a.color}50`,
                          display:'grid',placeItems:'center'}}>
                          <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
                            <path d="M5 12l5 5L20 7" stroke={a.color} strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </div>
                        <span style={{color:'rgba(255,255,255,.75)',fontSize:15}}>{p}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function SportsStrip() {
  const sports = [
    {e:'⚽',n:'Fotbal'},{e:'💃',n:'Dans'},{e:'🤸',n:'Gimnastica'},{e:'🥋',n:'Arte Martiale'},
    {e:'🎾',n:'Tenis'},{e:'🏊',n:'Inot'},{e:'🥊',n:'Box'},{e:'🏀',n:'Baschet'},
  ];
  const doubled = [...sports,...sports,...sports];
  return (
    <section id="Sporturi" style={{position:'relative',padding:'100px 0',overflow:'hidden'}}>
      <Reveal>
        <div style={{textAlign:'center',marginBottom:48,padding:'0 24px'}}>
          <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>Pentru orice sport</div>
          <h2 style={{fontSize:'clamp(30px,4vw,46px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',margin:0}}>
            Un singur tool, <GradientText>toate sporturile</GradientText>
          </h2>
        </div>
      </Reveal>

      <div style={{position:'relative',WebkitMaskImage:'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)',maskImage:'linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)'}}>
        <div style={{display:'flex',gap:14,animation:'marquee 40s linear infinite',width:'max-content'}}>
          {doubled.map((s,i)=>(
            <div key={i} style={{
              display:'flex',alignItems:'center',gap:10,padding:'14px 22px',borderRadius:99,
              background:'rgba(255,255,255,.04)',backdropFilter:'blur(14px)',
              border:'1px solid rgba(255,255,255,.1)',flexShrink:0,
              boxShadow:'inset 0 1px 0 rgba(255,255,255,.08)',
            }}>
              <span style={{fontSize:20}}>{s.e}</span>
              <span style={{fontSize:15,fontWeight:600,color:'#fff',letterSpacing:'-.01em'}}>{s.n}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-33.33%)} }`}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function SocialProof() {
  const stats = [
    {v:'127+', l:'cluburi active'},
    {v:'14.000+', l:'elevi gestionati'},
    {v:'98%', l:'rata de retentie'},
  ];
  return (
    <section id="Clienti" className="section-pad" style={{position:'relative',padding:'60px 24px 40px',display:'flex',justifyContent:'center'}}>
      <div style={{maxWidth:1180,width:'100%'}}>
        <Reveal>
          <Glass radius={24} style={{padding:'40px 32px'}}>
            <div className="social-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
              {stats.map((s,i)=>(
                <div key={i} className="social-cell" style={{textAlign:'center',borderRight:i<2?'1px solid rgba(255,255,255,.08)':'none',paddingRight:i<2?24:0}}>
                  <div style={{fontSize:'clamp(36px,5vw,56px)',fontWeight:800,letterSpacing:'-.03em',lineHeight:1,marginBottom:8}}>
                    <GradientText>{s.v}</GradientText>
                  </div>
                  <div style={{fontSize:14,color:V2.mute,fontWeight:500}}>{s.l}</div>
                </div>
              ))}
            </div>
          </Glass>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function Showcase() {
  const screens = [
    {src:'assets/v2-02-stats.png', label:'Dashboard antrenor', glow:V2.cyan},
    {src:'assets/v2-03-abonamente.png', label:'Abonamente & plati', glow:V2.violet},
    {src:'assets/v2-06-prezenta.png', label:'Prezenta in timp real', glow:V2.cyan},
    {src:'assets/v2-04-fisa.png', label:'Fisa elev completa', glow:V2.violet},
    {src:'assets/v2-07-antrenori.png', label:'Management antrenori', glow:V2.cyan},
  ];
  return (
    <section style={{position:'relative',padding:'120px 0'}}>
      <div style={{padding:'0 24px 64px',display:'flex',justifyContent:'center'}}>
        <Reveal>
          <div style={{textAlign:'center',maxWidth:720}}>
            <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>In aplicatie</div>
            <h2 style={{fontSize:'clamp(32px,4.5vw,52px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1.05,margin:'0 0 16px'}}>
              Interfata gandita sa <GradientText>te scoata din aplicatie</GradientText>
            </h2>
            <p style={{color:V2.mute,fontSize:16,lineHeight:1.55,margin:0}}>Intra, faci ce ai de facut, iesi. Nimic inutil intre tine si antrenamentul tau.</p>
          </div>
        </Reveal>
      </div>

      <div style={{overflowX:'auto',WebkitMaskImage:'linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)',maskImage:'linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)',scrollbarWidth:'none'}}>
        <div style={{display:'flex',gap:32,padding:'20px 48px 40px',width:'max-content'}}>
          {screens.map((s,i)=>(
            <Reveal key={i} delay={i*60}>
              <PhoneFrame src={s.src} width={260} glow={s.glow} label={s.label} rotate={i%2===0?-2:2}/>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`section ::-webkit-scrollbar { display:none; }`}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function Pricing() {
  return (
    <section id="Preturi" className="section-pad" style={{position:'relative',padding:'120px 24px',display:'flex',justifyContent:'center'}}>
      <div style={{maxWidth:980,width:'100%'}}>
        <Reveal>
          <div style={{textAlign:'center',marginBottom:56}}>
            <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>Preturi</div>
            <h2 style={{fontSize:'clamp(32px,4.5vw,52px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1,margin:'0 0 14px'}}>
              Simplu. <GradientText>Previzibil.</GradientText>
            </h2>
            <p style={{color:V2.mute,fontSize:16,margin:0}}>Incepe gratuit. Upgrade cand clubul tau creste.</p>
          </div>
        </Reveal>

        <div className="pricing-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
          <Reveal delay={0}>
            <Glass radius={22} style={{padding:32,height:'100%'}}>
              <div style={{fontSize:13,fontWeight:700,color:V2.mute,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:12}}>Starter</div>
              <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:10}}>
                <div style={{fontSize:48,fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1}}>Gratuit</div>
              </div>
              <div style={{fontSize:13,color:V2.dim,marginBottom:24}}>pentru cluburi sub 20 elevi</div>
              <ul style={{listStyle:'none',padding:0,margin:'0 0 28px',display:'flex',flexDirection:'column',gap:10}}>
                {['Pana la 20 elevi','1 antrenor','Prezenta & plati','Support email'].map(x=>(
                  <li key={x} style={{display:'flex',gap:10,alignItems:'center',fontSize:14,color:V2.mute}}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke={V2.cyan} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    {x}
                  </li>
                ))}
              </ul>
              <ButtonGhost>Incepe gratuit</ButtonGhost>
            </Glass>
          </Reveal>

          <Reveal delay={120}>
            <div style={{position:'relative',borderRadius:22,height:'100%',padding:2,background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,boxShadow:`0 40px 80px -30px ${V2.violet}80`}}>
              <div style={{position:'absolute',top:-12,right:24,padding:'6px 12px',borderRadius:99,background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,color:'#fff',fontSize:11,fontWeight:700,letterSpacing:'.08em',textTransform:'uppercase'}}>Recomandat</div>
              <div style={{borderRadius:20,padding:32,height:'100%',background:`linear-gradient(180deg, #151C2E, #0F1626)`}}>
                <div style={{fontSize:13,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',marginBottom:12}}><GradientText>Pro</GradientText></div>
                <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:10}}>
                  <div style={{fontSize:48,fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1}}>149 <span style={{fontSize:18,color:V2.mute,fontWeight:500}}>RON/luna</span></div>
                </div>
                <div style={{fontSize:13,color:V2.dim,marginBottom:24}}>pentru cluburi in crestere</div>
                <ul style={{listStyle:'none',padding:0,margin:'0 0 28px',display:'flex',flexDirection:'column',gap:10}}>
                  {['Elevi nelimitati','Antrenori nelimitati','Acces parinti','Rapoarte avansate','Reminder-uri automate','Support prioritar'].map(x=>(
                    <li key={x} style={{display:'flex',gap:10,alignItems:'center',fontSize:14,color:V2.mute}}>
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke={V2.violet} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      {x}
                    </li>
                  ))}
                </ul>
                <ButtonPrimary>Incepe Pro gratuit 14 zile</ButtonPrimary>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function FloatInput({label, type='text', placeholder, value, onChange, field, focused, setFocused, required, textarea, rows=5}) {
  const isFocused = focused === field;
  const hasValue  = value.length > 0;
  const active    = isFocused || hasValue;

  const wrapStyle = {position:'relative', paddingTop:22};
  const labelStyle = {
    position:'absolute', left:18,
    top: active ? 4 : 32,
    fontSize: active ? 10 : 14,
    fontWeight: active ? 700 : 400,
    color: isFocused ? V2.violet : active ? V2.cyan : 'rgba(255,255,255,.35)',
    letterSpacing: active ? '.1em' : '0',
    transition:'all .18s cubic-bezier(.4,0,.2,1)',
    pointerEvents:'none', zIndex:2,
    textTransform: active ? 'uppercase' : 'none',
  };
  const fieldStyle = {
    width:'100%', padding: textarea ? '14px 18px 14px' : '18px 18px 10px',
    borderRadius:16, background:'rgba(255,255,255,.03)',
    border:`1.5px solid ${isFocused ? V2.violet : 'rgba(255,255,255,.08)'}`,
    color:'#fff', fontSize:14, fontFamily:'Poppins,system-ui,sans-serif',
    outline:'none', transition:'border-color .2s, background .2s', boxSizing:'border-box',
    resize: textarea ? 'none' : undefined,
    minHeight: textarea ? 120 : undefined,
    boxShadow: isFocused ? `0 0 0 4px ${V2.violet}22` : 'none',
    caretColor: V2.violet,
  };

  return (
    <div style={wrapStyle}>
      <label style={labelStyle}>{label}</label>
      {textarea
        ? <textarea value={value} onChange={onChange} rows={rows} style={fieldStyle}
            onFocus={()=>setFocused(field)} onBlur={()=>setFocused(null)} required={required}
            placeholder={isFocused ? placeholder : ''}/>
        : <input type={type} value={value} onChange={onChange} style={fieldStyle}
            onFocus={()=>setFocused(field)} onBlur={()=>setFocused(null)} required={required}
            placeholder={isFocused ? placeholder : ''}/>
      }
    </div>
  );
}

function ContactForm() {
  const [form,    setForm]    = React.useState({name:'', email:'', club:'', message:''});
  const [status,  setStatus]  = React.useState('idle');
  const [focused, setFocused] = React.useState(null);
  const [hover,   setHover]   = React.useState(false);

  const set = f => e => setForm(p=>({...p,[f]:e.target.value}));

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setStatus('sending');
    try {
      const res = await fetch('https://formspree.io/f/xpwzolkq', {
        method:'POST',
        headers:{'Content-Type':'application/json','Accept':'application/json'},
        body: JSON.stringify(form),
      });
      setStatus(res.ok ? 'success' : 'error');
      if (res.ok) setForm({name:'',email:'',club:'',message:''});
    } catch { setStatus('error'); }
  };

  return (
    <section id="Contact" className="section-pad" style={{position:'relative',padding:'120px 24px',display:'flex',justifyContent:'center',overflow:'hidden'}}>
      <style>{`
        @keyframes spin   { to { transform:rotate(360deg); } }
        @keyframes orbF   { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.15)} }
        @keyframes orbS   { 0%,100%{transform:translate(50%,50%) scale(1.1)} 50%{transform:translate(50%,50%) scale(.9)} }
        @keyframes shimmerBtn { 0%{background-position:200% center} 100%{background-position:-200% center} }
        @keyframes successPop { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
        @keyframes gridFloat { 0%,100%{opacity:.18} 50%{opacity:.28} }
        .cf-input::placeholder { color:rgba(255,255,255,.22); }
        .cf-input::-webkit-scrollbar { width:4px; } .cf-input::-webkit-scrollbar-thumb { background:${V2.violet}60;border-radius:4px; }
      `}</style>

      {/* animated background orbs */}
      <div style={{position:'absolute',top:'10%',left:'5%',width:700,height:700,borderRadius:'50%',
        background:`radial-gradient(circle, ${V2.violet}1a, transparent 60%)`,
        filter:'blur(80px)',pointerEvents:'none',animation:'orbF 8s ease-in-out infinite'}}/>
      <div style={{position:'absolute',bottom:'5%',right:'5%',width:600,height:600,borderRadius:'50%',
        background:`radial-gradient(circle, ${V2.cyan}14, transparent 60%)`,
        filter:'blur(90px)',pointerEvents:'none',animation:'orbS 10s ease-in-out infinite'}}/>

      {/* subtle grid overlay */}
      <div style={{position:'absolute',inset:0,
        backgroundImage:`linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px)`,
        backgroundSize:'60px 60px',pointerEvents:'none',animation:'gridFloat 6s ease-in-out infinite'}}/>

      <div style={{maxWidth:1120,width:'100%',position:'relative',zIndex:2}}>
        <Reveal>
          <div style={{textAlign:'center',marginBottom:72}}>
            <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:14,textTransform:'uppercase'}}>Contact</div>
            <h2 style={{fontSize:'clamp(36px,5vw,60px)',fontWeight:800,color:'#fff',letterSpacing:'-.03em',lineHeight:1,margin:'0 auto 16px',maxWidth:760}}>
              Hai sa <GradientText>construim impreuna</GradientText>
            </h2>
            <p style={{color:V2.mute,fontSize:17,maxWidth:520,margin:'0 auto',lineHeight:1.55}}>
              Spune-ne despre clubul tau. iti configuram METIO gratuit si raspundem in mai putin de 24h.
            </p>
          </div>
        </Reveal>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:28,alignItems:'start'}} className="contact-grid">
          <style>{`.contact-grid { @media (max-width:820px) { grid-template-columns:1fr !important; } }`}</style>

          {/* ── Left panel ── */}
          <Reveal delay={0}>
            <div style={{display:'flex',flexDirection:'column',gap:20}}>

              {/* main card */}
              <div style={{borderRadius:26,padding:36,
                background:'linear-gradient(145deg, rgba(139,92,246,.18), rgba(6,182,212,.10))',
                border:'1px solid rgba(139,92,246,.35)',
                boxShadow:`0 40px 80px -30px ${V2.violet}60`}}>
                <div style={{fontSize:26,fontWeight:800,color:'#fff',lineHeight:1.2,marginBottom:10,letterSpacing:'-.03em'}}>
                  Testezi gratuit, fara obligatii
                </div>
                <p style={{color:V2.mute,fontSize:14,lineHeight:1.6,margin:'0 0 28px'}}>
                  Setup gratuit, fara comisioane ascunse. Testezi complet inainte sa decizi.
                </p>
                {[
                  {icon:'⚡', title:'Raspuns rapid', sub:'Sub 24h in zilele lucratoare'},
                  {icon:'🎯', title:'Setup personalizat', sub:'iti configuram noi grupele si elevii'},
                  {icon:'🔒', title:'Date in siguranta', sub:'GDPR compliant, hosted in EU'},
                ].map(({icon,title,sub})=>(
                  <div key={title} style={{display:'flex',gap:14,alignItems:'flex-start',marginBottom:20}}>
                    <div style={{width:42,height:42,borderRadius:12,flexShrink:0,
                      background:'rgba(255,255,255,.06)',border:'1px solid rgba(255,255,255,.1)',
                      display:'grid',placeItems:'center',fontSize:18}}>{icon}</div>
                    <div>
                      <div style={{color:'#fff',fontWeight:700,fontSize:14,marginBottom:2}}>{title}</div>
                      <div style={{color:V2.mute,fontSize:13,lineHeight:1.4}}>{sub}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* contact chips */}
              <div style={{display:'flex',flexDirection:'column',gap:12}}>
                {[
                  {icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke={V2.cyan} strokeWidth="1.8"/><path d="M22 6l-10 7L2 6" stroke={V2.cyan} strokeWidth="1.8"/></svg>, label:'contact@metio.club', href:'mailto:contact@metio.club'},
                  {icon:<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8 19.79 19.79 0 01.01 2.22 2 2 0 012 .04h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 14.92z" stroke={V2.violet} strokeWidth="1.8"/></svg>, label:'+40 770 000 000', href:'tel:+40770000000'},
                ].map(({icon,label,href})=>(
                  <a key={label} href={href} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 18px',
                    borderRadius:16,background:'rgba(255,255,255,.03)',border:'1px solid rgba(255,255,255,.08)',
                    color:V2.mute,fontSize:13,fontWeight:500,textDecoration:'none',transition:'all .2s',
                    ':hover':{background:'rgba(255,255,255,.06)'}}}>
                    <div style={{width:34,height:34,borderRadius:10,background:'rgba(255,255,255,.05)',display:'grid',placeItems:'center',flexShrink:0}}>{icon}</div>
                    {label}
                  </a>
                ))}
              </div>

            </div>
          </Reveal>

          {/* ── Right: Form ── */}
          <Reveal delay={150}>
            <div style={{position:'relative',borderRadius:28,padding:2,
              background: `linear-gradient(135deg, ${V2.violet}60, ${V2.cyan}40, ${V2.violet}60)`,
              backgroundSize:'300% 300%',
              boxShadow:`0 60px 120px -40px ${V2.violet}70`}}>

              <div style={{borderRadius:26,padding:44,background:'#0E1628',position:'relative',overflow:'hidden'}}>
                {/* inner glow */}
                <div style={{position:'absolute',top:-80,right:-80,width:300,height:300,borderRadius:'50%',
                  background:`radial-gradient(circle, ${V2.violet}20, transparent 65%)`,pointerEvents:'none'}}/>

                {status === 'success' ? (
                  <div style={{textAlign:'center',padding:'40px 0',animation:'successPop .5s cubic-bezier(.4,0,.2,1)'}}>
                    <div style={{width:80,height:80,borderRadius:99,margin:'0 auto 24px',
                      background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,
                      display:'grid',placeItems:'center',boxShadow:`0 20px 40px -10px ${V2.violet}80`}}>
                      <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 7" stroke="#fff" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </div>
                    <div style={{fontSize:26,fontWeight:800,color:'#fff',marginBottom:10,letterSpacing:'-.02em'}}>Mesaj trimis! 🎉</div>
                    <div style={{color:V2.mute,fontSize:15,lineHeight:1.55}}>Te contactam in mai putin de 24h.<br/>Verifica si folderul Spam.</div>
                    <button onClick={()=>setStatus('idle')} style={{
                      marginTop:28,padding:'11px 24px',borderRadius:12,
                      background:'rgba(255,255,255,.05)',border:'1px solid rgba(255,255,255,.1)',
                      color:V2.mute,fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'inherit',transition:'all .2s'}}>
                      ← Trimite alt mesaj
                    </button>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} style={{display:'flex',flexDirection:'column',gap:4,position:'relative',zIndex:1}}>
                    <div style={{marginBottom:24}}>
                      <div style={{fontSize:20,fontWeight:800,color:'#fff',letterSpacing:'-.02em',marginBottom:6}}>Trimite-ne un mesaj</div>
                      <div style={{fontSize:13,color:V2.mute}}>Completeaza formularul si te contactam noi.</div>
                    </div>

                    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
                      <FloatInput label="Numele tau" placeholder="Ion Popescu" value={form.name} onChange={set('name')}
                        field="name" focused={focused} setFocused={setFocused} required/>
                      <FloatInput label="Email" type="email" placeholder="email@club.ro" value={form.email} onChange={set('email')}
                        field="email" focused={focused} setFocused={setFocused} required/>
                    </div>

                    <div style={{marginTop:12}}>
                      <FloatInput label="Numele clubului (optional)" placeholder="Ex: Studio Dans Iasi" value={form.club} onChange={set('club')}
                        field="club" focused={focused} setFocused={setFocused}/>
                    </div>

                    <div style={{marginTop:12}}>
                      <FloatInput label="Mesajul tau" placeholder="Descrie clubul tau — cati elevi, ce sporturi..." value={form.message}
                        onChange={set('message')} field="message" focused={focused} setFocused={setFocused}
                        required textarea rows={5}/>
                    </div>

                    {status==='error' && (
                      <div style={{marginTop:8,padding:'12px 16px',borderRadius:12,
                        background:'rgba(248,113,113,.08)',border:'1px solid rgba(248,113,113,.25)',color:'#F87171',fontSize:13}}>
                        Ceva n-a mers. incearca din nou sau scrie-ne direct la contact@metio.club
                      </div>
                    )}

                    <button
                      type="submit"
                      disabled={status==='sending'}
                      onMouseEnter={()=>setHover(true)}
                      onMouseLeave={()=>setHover(false)}
                      style={{
                        marginTop:20, padding:'17px 28px', borderRadius:16,
                        background: status==='sending'
                          ? 'rgba(139,92,246,.4)'
                          : `linear-gradient(135deg, ${V2.violet}, ${V2.violetDeep})`,
                        backgroundSize:'100% 100%',
                        animation: 'none',
                        color:'#fff', border:'none', fontWeight:700, fontSize:16,
                        cursor: status==='sending' ? 'not-allowed' : 'pointer',
                        fontFamily:'Poppins,system-ui,sans-serif',
                        boxShadow: status==='sending' ? 'none' : `0 24px 48px -12px ${V2.violet}90`,
                        transform: hover && status!=='sending' ? 'translateY(-2px)' : 'translateY(0)',
                        transition:'transform .2s, box-shadow .2s',
                        display:'flex', alignItems:'center', justifyContent:'center', gap:10,
                        letterSpacing:'-.01em',
                      }}>
                      {status==='sending' ? (
                        <>
                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{animation:'spin 1s linear infinite'}}>
                            <circle cx="12" cy="12" r="10" stroke="rgba(255,255,255,.25)" strokeWidth="2.5"/>
                            <path d="M12 2a10 10 0 0110 10" stroke="#fff" strokeWidth="2.5" strokeLinecap="round"/>
                          </svg>
                          Se trimite...
                        </>
                      ) : (
                        <>
                          Trimite mesajul
                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <path d="M22 2L11 13M22 2L15 22l-4-9-9-4 20-7z" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </>
                      )}
                    </button>

                    <div style={{textAlign:'center',marginTop:12,fontSize:12,color:'rgba(255,255,255,.22)'}}>
                      Nu trimitem spam · Datele tale sunt in siguranta
                    </div>
                  </form>
                )}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="section-pad" style={{position:'relative',padding:'100px 24px 120px',display:'flex',justifyContent:'center'}}>
      <div style={{maxWidth:1080,width:'100%'}}>
        <Reveal>
          <div style={{position:'relative',borderRadius:32,padding:2,background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,boxShadow:`0 60px 120px -40px ${V2.violet}90`}}>
            <div className="final-cta-inner" style={{borderRadius:30,padding:'80px 40px',textAlign:'center',position:'relative',overflow:'hidden',background:`linear-gradient(180deg, #151C2E, #0F1626)`}}>
              {/* bg orbs */}
              <div style={{position:'absolute',top:'-30%',left:'-10%',width:500,height:500,borderRadius:'50%',background:`radial-gradient(circle, ${V2.violet}40, transparent 65%)`,filter:'blur(60px)'}}/>
              <div style={{position:'absolute',bottom:'-40%',right:'-10%',width:500,height:500,borderRadius:'50%',background:`radial-gradient(circle, ${V2.cyan}35, transparent 65%)`,filter:'blur(70px)'}}/>
              <div style={{position:'relative',zIndex:2}}>
                <div style={{fontSize:12,fontWeight:700,color:V2.cyan,letterSpacing:'.2em',marginBottom:16,textTransform:'uppercase'}}>Incepe azi</div>
                <h2 style={{fontSize:'clamp(38px,5.5vw,68px)',fontWeight:800,color:'#fff',letterSpacing:'-.035em',lineHeight:1,margin:'0 0 24px',maxWidth:780,marginLeft:'auto',marginRight:'auto'}}>
                  Gata sa aduci clubul tau<br/><GradientText>in 2026?</GradientText>
                </h2>
                <p style={{color:V2.mute,fontSize:17,margin:'0 auto 36px',maxWidth:560,lineHeight:1.55}}>Renunta la Excel-uri. Primul pas dureaza 2 minute.</p>
                <div style={{display:'flex',justifyContent:'center',gap:12,flexWrap:'wrap'}}>
                  <ShimmerButton>Incepe gratuit</ShimmerButton>
                  <ButtonGhost big>Discuta cu noi</ButtonGhost>
                </div>
                <div style={{marginTop:20,fontSize:13,color:V2.dim}}>Fara card de credit · Setup in 2 minute · Anulare oricand</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ShimmerButton({children}) {
  return (
    <button style={{
      position:'relative', padding:'18px 32px', borderRadius:16,
      background:`linear-gradient(135deg, ${V2.violet}, ${V2.violetDeep})`,
      color:'#fff', border:'none', fontWeight:700, fontSize:17,
      cursor:'pointer', fontFamily:'Poppins,system-ui,sans-serif',
      boxShadow:`0 30px 60px -15px ${V2.violet}a0, inset 0 1px 0 rgba(255,255,255,.3)`,
      letterSpacing:'-.01em', overflow:'hidden',
    }}>
      <span style={{position:'absolute',top:0,left:'-100%',width:'100%',height:'100%',background:'linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent)',animation:'shimmer 2.2s infinite'}}/>
      <span style={{position:'relative',display:'inline-flex',alignItems:'center',gap:10}}>
        {children}
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </span>
      <style>{`@keyframes shimmer { 0%{left:-100%} 100%{left:100%} }`}</style>
    </button>
  );
}

function Footer() {
  return (
    <footer className="section-pad" style={{padding:'60px 24px 40px',borderTop:'1px solid rgba(255,255,255,.06)'}}>
      <div style={{maxWidth:1180,margin:'0 auto',display:'flex',flexDirection:'column',gap:32}}>
        <div className="footer-row" style={{display:'flex',justifyContent:'space-between',flexWrap:'wrap',gap:24}}>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <div style={{width:32,height:32,borderRadius:9,background:`linear-gradient(135deg,${V2.violet},${V2.cyan})`,display:'grid',placeItems:'center',color:'#fff',fontWeight:900,fontSize:15}}>M</div>
            <div style={{fontWeight:800,fontSize:17,letterSpacing:'.04em',color:'#fff'}}>METIO</div>
          </div>
          <div className="footer-links" style={{display:'flex',gap:28,flexWrap:'wrap'}}>
            {[
              {label:'Functii', href:'#Functii'},
              {label:'Sporturi', href:'#Sporturi'},
              {label:'Contact', href:'#Contact'},
              {label:'Politica de confidentialitate', href:'/privacy'},
            ].map(l=>(
              <a key={l.label} href={l.href} style={{color:V2.mute,fontSize:13,fontWeight:500,textDecoration:'none',transition:'color .2s'}}
                onMouseEnter={e=>e.currentTarget.style.color='#fff'}
                onMouseLeave={e=>e.currentTarget.style.color=V2.mute}
              >{l.label}</a>
            ))}
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'space-between',flexWrap:'wrap',gap:12,color:V2.dim,fontSize:12}}>
          <div>© 2026 METIO · Construit pentru cluburile sportive din Romania</div>
          <div>Facut cu 🏆 in Bucuresti</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProblemSolution, Features, Accounts, SportsStrip, SocialProof, Showcase, Pricing, ContactForm, FinalCTA, Footer });