import React,{Suspense,useEffect,useRef,useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Canvas,useFrame} from '@react-three/fiber';
import {useGLTF,Environment} from '@react-three/drei';
import * as THREE from 'three';
import gsap from 'gsap';
import {ScrollTrigger} from 'gsap/ScrollTrigger';
import Lenis from 'lenis';
import './styles.css';

gsap.registerPlugin(ScrollTrigger);

const frames=Array.from({length:72},(_,i)=>`/frames/ezgif-frame-${String(i+1).padStart(3,'0')}.jpg`);
const products=[
 {name:'Masculine Mindset Blueprint',pages:'30 pages',usd:'$6.99',inr:'₹499',cover:'/assets/mindset-cover.webp'},
 {name:'90-Day Masculine Transformation System',pages:'90-day system',usd:'$9.99',inr:'₹799',cover:'/assets/90day-cover.webp'},
 {name:'The Profitable Creator Blueprint',pages:'creator playbook',usd:'$24.99',inr:'₹1,999',cover:'/assets/creator-cover.webp'},
];
function Logo(){return <div className="logo"><strong>MASCULINE HUB</strong><span>Think Like a King. Act Like a Warrior.</span></div>}
function Ring({anchor=false}){const ref=useRef();const {scene}=useGLTF('/assets/gold_ring.glb');useEffect(()=>{scene.traverse(o=>{if(o.isMesh){o.material=new THREE.MeshPhysicalMaterial({color:'#C9A648',metalness:.92,roughness:.23,clearcoat:.5,clearcoatRoughness:.18});o.castShadow=true}})},[scene]);useFrame((s,dt)=>{if(ref.current)ref.current.rotation.y+=dt*(anchor?.22:.16)});return <primitive ref={ref} object={scene} scale={anchor?1.0:1.35}/>}
useGLTF.preload('/assets/gold_ring.glb');
function RingCanvas({className=''}){return <Canvas className={className} dpr={[1,2]} camera={{position:[0,0,4.3],fov:38}} gl={{alpha:true,antialias:true}}><ambientLight intensity={.25}/><directionalLight position={[2,3,4]} intensity={5}/><pointLight position={[-3,-1,2]} intensity={3}/><Suspense fallback={null}><Ring/></Suspense><Environment preset="city" environmentIntensity={.25}/></Canvas>}
function Scrub(){const ref=useRef();const img=useRef();useEffect(()=>{const o={v:0};const t=gsap.to(o,{v:71,ease:'none',scrollTrigger:{trigger:ref.current,start:'top top',end:'+=170%',scrub:.5,pin:true}});const render=()=>{img.current.src=frames[Math.round(o.v)]};render();return()=>t.kill()},[]);return <section ref={ref} className="scrub"><img ref={img} alt="Cinematic Masculine Hub visual sequence"/><div className="scrub-copy"><span className="eyebrow">THE TURNING POINT</span><h2><span>Build</span> the man<br/>you <em>respect.</em></h2><div className="rule"/></div><div className="frame-count">01 — 72</div></section>}
function Hero(){const hero=useRef();useEffect(()=>{const ctx=gsap.context(()=>{gsap.from('.hero-title .word',{y:80,opacity:0,stagger:.08,duration:1,ease:'power4.out',delay:.25});gsap.from('.hero-ring',{scale:0,rotation:80,opacity:0,duration:1.4,ease:'expo.out',delay:1});},hero);return()=>ctx.revert()},[]);return <header ref={hero} className="hero"><nav><Logo/><a className="navlink" href="#products">Explore the system ↓</a></nav><div className="hero-grid"><div className="hero-copy"><p className="eyebrow">FOR MEN WHO ARE DONE DRIFTING</p><h1 className="hero-title"><span className="word gold">Discipline.</span> <span className="word">Direction.</span><br/><span className="word">Identity.</span></h1><p className="lead">Stop negotiating with the version of you that keeps settling. Build a standard, a system, and a life that answers to it.</p><a href="#products" className="magnetic cta">ENTER THE HUB <span>↗</span></a></div><div className="hero-ring"><RingCanvas/></div></div><div className="hero-bottom"><span>SCROLL TO BEGIN</span><span className="line"/></div></header>}
function Problem(){return <section className="problem"><div className="section-num">01</div><div><p className="eyebrow">THE PROBLEM</p><h2>You don't need another <em>motivational speech.</em></h2><p className="body">You already know what you should do. The gap is execution. Weak routines compound. Unclear standards compound. Every promise you break to yourself makes the next promise easier to break.</p><p className="body goldtext">Masculine Hub turns intention into a repeatable operating system.</p></div><div className="ring-anchor"><RingCanvas/></div></section>}
function Reveal(){return <section className="reveal"><div className="reveal-ring"><RingCanvas/></div><div className="reveal-copy"><p className="eyebrow">THE SYSTEM</p><h2>Three tools.<br/><span>One standard.</span></h2><p className="body">Mindset. Transformation. Money. Each product attacks a different layer of the same problem: becoming capable enough to carry the life you say you want.</p><div className="icon-row"><span>◈ MINDSET</span><span>△ DISCIPLINE</span><span>◇ CREATOR</span></div></div></section>}
function Products(){const [email,setEmail]=useState('');const [verified,setVerified]=useState(false);return <section id="products" className="products"><div className="section-head"><div><p className="eyebrow">THE LIBRARY</p><h2>Choose your <em>entry point.</em></h2></div><p className="section-note">Buy individually or unlock the complete system.</p></div><div className="product-grid">{products.map((p,i)=><article className={'product '+(i===2?'wide':'')} key={p.name}><div className="product-art"><div className="fake-cover"><span>{i===0?'MINDSET':i===1?'90 DAY':'CREATOR'}</span><strong>{i===0?'BLUEPRINT':i===1?'TRANSFORMATION':'PROFITABLE'}</strong></div></div><div className="product-info"><p className="eyebrow">0{i+1} / {p.pages}</p><h3>{p.name}</h3><div className="price">{p.usd} <small>{p.inr}</small></div><button className="outline magnetic">GET THIS →</button></div></article>)}</div><div className="bundle"><div><p className="eyebrow">FLAGSHIP / COMPLETE BUNDLE</p><h3>All three. One standard.</h3><p className="body">Everything in Masculine Hub, packaged as the fastest path from scattered effort to a complete personal system.</p></div><div className="bundle-buy"><div className="price">$29.99 <small>₹2,499</small></div><input aria-label="Email for bundle verification" placeholder="Your email" value={email} onChange={e=>setEmail(e.target.value)}/><button disabled={!verified} className="cta">BUY THE COMPLETE BUNDLE ↗</button><button className="verify" onClick={()=>email&&setVerified(true)}>{verified?'EMAIL VERIFIED':'VERIFY EMAIL FIRST'}</button><small>No refunds after purchase. Checkout opens in Gumroad.</small></div></div></section>}
function Guarantee(){return <section className="guarantee"><p className="eyebrow">A CLEAR DEAL</p><h2>No hype. No hidden <em>conditions.</em></h2><div className="guarantee-grid"><div><span>01</span><h3>Immediate access</h3><p>Purchase records unlock your private delivery page.</p></div><div><span>02</span><h3>No-refund policy</h3><p>Digital products are final sale. The notice is shown before checkout.</p></div><div><span>03</span><h3>Built to use</h3><p>Worksheets, systems and frameworks—not a folder of inspirational quotes.</p></div></div></section>}
function Final(){return <section className="final"><div className="final-ring"><RingCanvas/></div><p className="eyebrow">YOUR MOVE</p><h2>Think Like a King.<br/><em>Act Like a Warrior.</em></h2><a href="#products" className="cta magnetic">BUILD YOUR SYSTEM ↗</a></section>}
function App(){useEffect(()=>{const lenis=new Lenis({duration:1.1,smoothWheel:true});function raf(t){lenis.raf(t);requestAnimationFrame(raf)}requestAnimationFrame(raf);const refresh=()=>ScrollTrigger.refresh();window.addEventListener('load',refresh);const magnetic=[...document.querySelectorAll('.magnetic')];const clean=magnetic.map(el=>{const move=e=>{const r=el.getBoundingClientRect();el.style.transform=`translate(${(e.clientX-r.left-r.width/2)*.16}px, ${(e.clientY-r.top-r.height/2)*.16}px)`};const leave=()=>el.style.transform='translate(0,0)';el.addEventListener('mousemove',move);el.addEventListener('mouseleave',leave);return()=>{el.removeEventListener('mousemove',move);el.removeEventListener('mouseleave',leave)}});return()=>{lenis.destroy();window.removeEventListener('load',refresh);clean.forEach(f=>f())}},[]);return <><div className="grain"/><div className="cursor"/><Hero/><Scrub/><Problem/><Reveal/><Products/><Guarantee/><Final/><footer><Logo/><div>© 2026 Masculine Hub</div><a href="#">Policies</a><a href="#">Mentorship — Coming Soon</a></footer><div className="sticky-buy"><span>Complete Bundle · $29.99</span><a href="#products">GET IT ↗</a></div></>}
createRoot(document.getElementById('root')).render(<App/>);