// HERO FORM — 4 attention-grabbing styles, switchable via tweaks.formStyle
// The form is the money element. It must STAND OUT.

function HeroFormPointer() {
  // Animated arrow that points from video down to form
  return (
    <div style={{
      display:'flex',flexDirection:'column',alignItems:'center',gap:2,
      margin:'18px auto 10px',position:'relative',
    }}>
      <div style={{
        fontSize:11,fontWeight:800,letterSpacing:3,textTransform:'uppercase',
        color:'var(--purple)',marginBottom:2,
        animation:'apex-fade-in 0.6s ease',
      }}>Book your seat below</div>
      <svg width="20" height="34" viewBox="0 0 20 34" fill="none"
        style={{animation:'apex-arrow-bob 1.4s ease-in-out infinite'}}>
        <path d="M10 2 L10 26 M2 18 L10 28 L18 18" stroke="url(#apex-arrow-grad)"
          strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        <defs>
          <linearGradient id="apex-arrow-grad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#7c3aed"/>
            <stop offset="1" stopColor="#3b82f6"/>
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}

// Common form fields — reused across all styles
function HeroFormFields({ fn, setFn, ln, setLn, phone, setPhone, submit, submitting, variant='default', ctaLabel='Book my walkthrough' }) {
  // variant changes the visual treatment of inputs + button
  const inputCls = variant === 'neon' ? 'apex-input-neon' : '';
  const fieldBg = variant === 'neon' ? 'rgba(255,255,255,0.14)'
                : variant === 'ticket' ? 'rgba(11,11,20,0.04)'
                : 'var(--break-bg)';
  const fieldColor = variant === 'neon' ? '#fff' : 'var(--ink)';
  const placeholderColor = variant === 'neon' ? 'rgba(255,255,255,0.6)' : 'var(--dim)';

  const inputStyle = {
    background: fieldBg,
    color: fieldColor,
    border: variant === 'neon' ? '1.5px solid rgba(255,255,255,0.25)' : '1.5px solid transparent',
  };

  return (
    <form onSubmit={submit} style={{position:'relative',zIndex:2}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:10}}>
        <Input className={inputCls} style={inputStyle} value={fn} onChange={e=>setFn(e.target.value)}
          placeholder="First Name" required autoComplete="given-name"/>
        <Input className={inputCls} style={inputStyle} value={ln} onChange={e=>setLn(e.target.value)}
          placeholder="Last Name" required autoComplete="family-name"/>
      </div>
      <Input type="tel" className={inputCls} style={{...inputStyle, marginBottom: 12}}
        value={phone} onChange={e=>setPhone(e.target.value)}
        placeholder="Mobile Number (for Zoom link)" required autoComplete="tel" inputMode="tel"/>

      <div style={{position:'relative',marginTop:4}}>
        {/* BIG FREE badge — now larger, more visible */}
        <div style={{
          position:'absolute',top:-14,right:14,zIndex:3,
          background:'#10b981',color:'#fff',
          fontSize:11,fontWeight:800,letterSpacing:2,textTransform:'uppercase',
          padding:'5px 12px',borderRadius:999,
          boxShadow:'0 6px 18px rgba(16,185,129,0.5)',
          animation:'apex-pulse-badge 2.4s ease-in-out infinite',
        }}>✦ FREE</div>

        <Button type="submit" size="xl" style={{
          width:'100%',textTransform:'uppercase',letterSpacing:1.5,
          fontSize:16,fontWeight:800,
          boxShadow:'0 18px 50px rgba(124,58,237,0.55)',
          animation: variant === 'neon' ? 'none' : 'apex-cta-pulse 2.8s ease-in-out infinite',
        }}>
          {submitting ? 'Holding…' : ctaLabel}
          <span style={{
            width:28,height:28,background:'rgba(255,255,255,0.22)',borderRadius:'50%',
            display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:16,
          }}>→</span>
        </Button>
      </div>

      <div style={{
        display:'flex',flexWrap:'wrap',gap:14,justifyContent:'center',marginTop:14,
        fontSize:12,color: variant === 'neon' ? 'rgba(255,255,255,0.85)' : 'var(--mute)',
      }}>
        <span style={{display:'flex',alignItems:'center',gap:5}}>
          <span style={{color: variant === 'neon' ? '#a7f3d0' : '#10b981',fontWeight:800}}>✓</span> Live walkthrough
        </span>
        <span style={{display:'flex',alignItems:'center',gap:5}}>
          <span style={{color: variant === 'neon' ? '#a7f3d0' : '#10b981',fontWeight:800}}>✓</span> No pitch
        </span>
        <span style={{display:'flex',alignItems:'center',gap:5}}>
          <span style={{color: variant === 'neon' ? '#a7f3d0' : '#10b981',fontWeight:800}}>✓</span> 45 min
        </span>
      </div>
    </form>
  );
}

// --- STYLE 1: MAGNET — elevated slab, rotating gradient ring, green glow
function HeroFormMagnet(props) {
  return (
    <div style={{position:'relative',margin:'10px 0 0'}}>
      {/* outer animated ring */}
      <div style={{
        position:'absolute',inset:-4,borderRadius:24,zIndex:0,
        background:'conic-gradient(from 0deg, #7c3aed, #3b82f6, #10b981, #7c3aed)',
        animation:'apex-ring-spin 6s linear infinite',
        filter:'blur(1px)',opacity:0.85,
      }}/>
      {/* green outer glow */}
      <div style={{
        position:'absolute',inset:-20,borderRadius:28,zIndex:0,
        background:'radial-gradient(ellipse at center, rgba(16,185,129,0.35) 0%, transparent 70%)',
        animation:'apex-glow-breathe 3s ease-in-out infinite',pointerEvents:'none',
      }}/>
      <div style={{
        position:'relative',zIndex:1,
        background:'var(--card)',borderRadius:22,padding:'28px 24px 26px',
        border:'1.5px solid var(--border)',
        boxShadow:'0 30px 80px rgba(11,11,20,0.24), 0 0 0 1px rgba(124,58,237,0.15)',
      }}>
        <div style={{textAlign:'center',marginBottom:18}}>
          <div style={{
            display:'inline-block',fontSize:10.5,fontWeight:800,letterSpacing:3,textTransform:'uppercase',
            color:'#fff',padding:'5px 12px',borderRadius:999,background:BRAND.gradient,
            boxShadow:'0 6px 20px rgba(124,58,237,0.4)',
          }}>Step 1 of 2 · 12 seconds</div>
          <h3 style={{
            fontFamily:'DM Sans,sans-serif',
            fontSize:'clamp(22px,5.4vw,30px)',fontWeight:800,letterSpacing:'-0.8px',
            color:'var(--ink)',margin:'10px 0 4px',lineHeight:1.12,
          }}>Reserve your live seat</h3>
          <p style={{fontSize:12.5,color:'var(--mute)',margin:0,lineHeight:1.5}}>
            We text the Zoom link. No spam, ever.
          </p>
        </div>
        <HeroFormFields {...props} variant="magnet"/>
        <GuaranteeStamp/>
      </div>
    </div>
  );
}

// --- STYLE 2: SPOTLIGHT — darkened surround, radial light, huge directional arrows
function HeroFormSpotlight(props) {
  return (
    <div style={{position:'relative',margin:'6px 0 0'}}>
      {/* radial spotlight behind form */}
      <div style={{
        position:'absolute',inset:-50,zIndex:0,pointerEvents:'none',
        background:'radial-gradient(ellipse at center, rgba(124,58,237,0.22) 0%, transparent 55%)',
      }}/>
      {/* Big arrow down cluster */}
      <div style={{
        display:'flex',flexDirection:'column',alignItems:'center',gap:0,
        marginBottom:10,position:'relative',zIndex:2,
      }}>
        <div style={{
          fontSize:13,fontWeight:900,letterSpacing:4,textTransform:'uppercase',
          background:BRAND.gradient,WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent',backgroundClip:'text',
          padding:'4px 0',
        }}>↓ Book your seat ↓</div>
        <div style={{display:'flex',gap:4,marginTop:-2}}>
          {[0,1,2].map(i => (
            <span key={i} style={{
              fontSize:24,lineHeight:1,color:BRAND.purple,fontWeight:900,
              animation:`apex-chevron-bob 1.3s ease-in-out ${i*0.12}s infinite`,
              opacity:0.85,
            }}>▼</span>
          ))}
        </div>
      </div>

      <div style={{
        position:'relative',zIndex:1,
        background:'var(--card)',borderRadius:22,padding:'28px 24px 26px',
        border:'2px solid var(--purple)',
        boxShadow:'0 0 0 6px rgba(124,58,237,0.12), 0 30px 80px rgba(11,11,20,0.28)',
      }}>
        <div style={{textAlign:'center',marginBottom:16}}>
          <h3 style={{
            fontFamily:'DM Sans,sans-serif',
            fontSize:'clamp(22px,5.4vw,30px)',fontWeight:800,letterSpacing:'-0.8px',
            color:'var(--ink)',margin:'0 0 4px',lineHeight:1.12,
          }}>Save your spot</h3>
          <p style={{fontSize:12.5,color:'var(--mute)',margin:0,lineHeight:1.5}}>
            We'll text you the Zoom link.
          </p>
        </div>
        <HeroFormFields {...props} variant="spotlight"/>
        <GuaranteeStamp/>
      </div>
    </div>
  );
}

// --- STYLE 3: TICKET — physical event ticket with perforations, barcode, admit one header
function HeroFormTicket(props) {
  return (
    <div style={{position:'relative',margin:'8px 0 0'}}>
      {/* perf halo */}
      <div style={{
        position:'absolute',inset:-14,borderRadius:22,zIndex:0,
        background:'radial-gradient(ellipse at center, rgba(124,58,237,0.18) 0%, transparent 70%)',
        pointerEvents:'none',
      }}/>

      <div style={{
        position:'relative',zIndex:1,
        background:'var(--card)',borderRadius:18,
        border:'1.5px solid var(--border-strong)',
        boxShadow:'0 22px 60px rgba(11,11,20,0.22)',
        overflow:'visible',
      }}>
        {/* Ticket stub header */}
        <div style={{
          background:BRAND.gradient,color:'#fff',
          padding:'14px 20px',borderRadius:'18px 18px 0 0',
          display:'flex',justifyContent:'space-between',alignItems:'center',
          position:'relative',overflow:'hidden',
        }}>
          <div>
            <div style={{fontSize:9.5,fontWeight:800,letterSpacing:3,textTransform:'uppercase',opacity:0.85}}>Admit one</div>
            <div style={{fontSize:16,fontWeight:800,letterSpacing:'-0.3px',marginTop:1,fontFamily:'DM Sans,sans-serif'}}>
              Live Apex Walkthrough
            </div>
          </div>
          {/* barcode */}
          <div style={{display:'flex',gap:1.5,alignItems:'center',height:28}}>
            {[3,1,2,4,1,3,2,1,4,2,3,1,2,3,1,2].map((w,i) => (
              <span key={i} style={{width:w,height:'100%',background:'#fff',borderRadius:0.5,opacity:0.92}}/>
            ))}
          </div>
          {/* ticket shimmer */}
          <div style={{
            position:'absolute',inset:0,
            background:'linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%)',
            backgroundSize:'200% 100%',
            animation:'apex-shimmer 3.5s linear infinite',pointerEvents:'none',
          }}/>
        </div>

        {/* Perforation */}
        <div style={{
          position:'relative',height:18,
          background:'repeating-linear-gradient(90deg, transparent 0 8px, var(--border) 8px 10px)',
        }}>
          <span style={{
            position:'absolute',left:-10,top:'50%',transform:'translateY(-50%)',
            width:20,height:20,borderRadius:'50%',background:'var(--bg)',
            boxShadow:'inset 0 0 0 1.5px var(--border-strong)',
          }}/>
          <span style={{
            position:'absolute',right:-10,top:'50%',transform:'translateY(-50%)',
            width:20,height:20,borderRadius:'50%',background:'var(--bg)',
            boxShadow:'inset 0 0 0 1.5px var(--border-strong)',
          }}/>
        </div>

        <div style={{padding:'22px 22px 24px'}}>
          {/* ticket "seat info" strip */}
          <div style={{
            display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,
            marginBottom:18,fontSize:10,letterSpacing:1.5,textTransform:'uppercase',
            color:'var(--mute)',fontWeight:700,
          }}>
            <div>
              <div style={{fontSize:9,opacity:0.7}}>Venue</div>
              <div style={{fontSize:12,color:'var(--ink)',letterSpacing:0,marginTop:2,textTransform:'none',fontWeight:800}}>Zoom · Live</div>
            </div>
            <div>
              <div style={{fontSize:9,opacity:0.7}}>Runtime</div>
              <div style={{fontSize:12,color:'var(--ink)',letterSpacing:0,marginTop:2,textTransform:'none',fontWeight:800}}>45 min</div>
            </div>
            <div>
              <div style={{fontSize:9,opacity:0.7}}>Price</div>
              <div style={{fontSize:12,color:'#10b981',letterSpacing:0,marginTop:2,textTransform:'none',fontWeight:800}}>FREE</div>
            </div>
          </div>
          <HeroFormFields {...props} variant="ticket" ctaLabel="Claim my ticket"/>
          <GuaranteeStamp/>
        </div>
      </div>
    </div>
  );
}

// --- STYLE 4: NEON — full gradient panel, fields glow on gradient, inverts itself visually
function HeroFormNeon(props) {
  return (
    <div style={{position:'relative',margin:'6px 0 0'}}>
      <div style={{
        position:'absolute',inset:-24,zIndex:0,pointerEvents:'none',
        background:'radial-gradient(ellipse at center, rgba(124,58,237,0.4) 0%, transparent 60%)',
        filter:'blur(8px)',animation:'apex-glow-breathe 3s ease-in-out infinite',
      }}/>
      <div style={{
        position:'relative',zIndex:1,
        background:'linear-gradient(135deg,#7c3aed 0%,#6366f1 50%,#3b82f6 100%)',
        borderRadius:22,padding:'30px 24px 26px',
        boxShadow:'0 30px 80px rgba(124,58,237,0.55), 0 0 0 1px rgba(255,255,255,0.12)',
        color:'#fff',overflow:'hidden',
      }}>
        {/* glossy highlight */}
        <div style={{
          position:'absolute',top:-60,left:-20,right:-20,height:120,
          background:'radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, transparent 60%)',
          pointerEvents:'none',
        }}/>
        <div style={{textAlign:'center',marginBottom:18,position:'relative',zIndex:2}}>
          <div style={{
            display:'inline-block',fontSize:10.5,fontWeight:800,letterSpacing:3,textTransform:'uppercase',
            color:'#fff',padding:'5px 12px',borderRadius:999,
            background:'rgba(255,255,255,0.2)',backdropFilter:'blur(6px)',
            border:'1px solid rgba(255,255,255,0.25)',
          }}>Live walkthrough · 45 min</div>
          <h3 style={{
            fontFamily:'DM Sans,sans-serif',
            fontSize:'clamp(24px,5.8vw,32px)',fontWeight:800,letterSpacing:'-0.8px',
            color:'#fff',margin:'12px 0 6px',lineHeight:1.1,
          }}>Reserve your seat</h3>
          <p style={{fontSize:13,color:'rgba(255,255,255,0.88)',margin:0,lineHeight:1.5}}>
            Two fields. We'll text the Zoom link.
          </p>
        </div>
        <HeroFormFields {...props} variant="neon"/>
        <div style={{
          marginTop:14,padding:'10px 14px',
          background:'rgba(255,255,255,0.12)',borderRadius:12,
          border:'1px solid rgba(255,255,255,0.2)',
          display:'flex',alignItems:'center',gap:10,
        }}>
          <Shield color="#a7f3d0"/>
          <div>
            <div style={{fontSize:11.5,fontWeight:800,letterSpacing:1.2,textTransform:'uppercase',color:'#fff',lineHeight:1.2}}>
              200% ROI Guarantee
            </div>
            <div style={{fontSize:11,color:'rgba(255,255,255,0.85)',lineHeight:1.35,marginTop:2}}>
              Or 100% refunded within 90 days.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Top-level picker
function HeroForm(props) {
  const { tweaks } = useApp();
  const style = tweaks.formStyle || 'magnet';
  const Cmp = style === 'spotlight' ? HeroFormSpotlight
           : style === 'ticket'    ? (window.TicketSwitcher || HeroFormTicket)
           : style === 'neon'      ? HeroFormNeon
           :                         HeroFormMagnet;
  return <Cmp {...props}/>;
}

Object.assign(window, { HeroForm, HeroFormPointer });