/* global React, ReactDOM */
const {useEffect,useState} = React;
const api = (slug,opts)=> fetch(`/wp-json/upath/v1/${slug}`, Object.assign({headers:{'Content-Type':'application/json'}}, opts||{})).then(async r=>{const t=await r.text(); try{return JSON.parse(t)}catch(e){return t}});
const Container = ({children}) => <div className="max-w-[1160px] mx-auto px-4">{children}</div>;
function nav(e){ if(e && e.preventDefault){ e.preventDefault(); } const href = (e?.currentTarget?.getAttribute('href')) || '/'; history.pushState({},'',href); render(); }
window.addEventListener('popstate', ()=>render());

function Header({variant="dark"}){
  const [data,set] = useState(null);
  useEffect(()=>{api('header').then(set)},[]);
  if(!data) return null;
  const dark = variant==="dark";
  return (
    <div className={dark?"absolute inset-x-0 top-0 z-40":"relative z-40 bg-white border-b border-zinc-200"}>
      <div className={dark?"bg-[#0E0D13]/60 backdrop-blur":"bg-white"}>
        <Container>
          <div className="h-16 flex items-center justify-between">
            <a href="/" onClick={nav}><img src={data.logo} alt="UPath" className="h-7"/></a>
            <nav className={"hidden md:flex gap-7 "+(dark?"text-white/90":"text-[#0E0D13]")}>
              {data.menu.map((m,i)=>(<a key={i} href={m.url} onClick={nav} className="hover:text-[#7317CF]">{m.title}</a>))}
            </nav>
            <div className="hidden md:flex gap-3">
              <a href={data.cta[0].url} onClick={nav} className={(dark?"border-white/25 text-white":"border-zinc-300 text-[#0E0D13]")+" px-4 h-10 border rounded-lg flex items-center"}>Login</a>
              <a href={data.cta[1].url} onClick={nav} className="px-4 h-10 bg-[#7317CF] text-white rounded-lg flex items-center">Signup →</a>
            </div>
          </div>
        </Container>
      </div>
    </div>
  );
}

function Footer(){
  const [data,set] = useState(null);
  useEffect(()=>{api('footer').then(set)},[]);
  if(!data) return null;
  return (
    <footer className="bg-[#F7F6FB] border-t border-zinc-200 mt-16">
      <Container>
        <div className="py-12 grid md:grid-cols-4 gap-10">
          <div>
            <img src={data.logo} className="h-7 mb-3" alt="UPath"/>
            <p className="text-sm text-zinc-600">We guide students through real mentorship and clear choices.</p>
          </div>
          {data.columns.map((c,idx)=>(
            <div key={idx}>
              <div className="text-[#7317CF] font-semibold mb-3">{c.title}</div>
              <ul className="space-y-2">
                {c.links.map((l,i)=>(<li key={i}><a href={l.url} onClick={nav} className="text-sm text-zinc-700 hover:text-[#7317CF]">{l.title}</a></li>))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pb-10 text-xs text-zinc-500">{data.copyright}</div>
      </Container>
    </footer>
  );
}

function Hero({data}){
  return (
    <section className="relative" style={{minHeight:'60vh'}}>
      <img src={data.bg} className="absolute inset-0 w-full h-full object-cover" alt=""/>
      <div className="absolute inset-0 bg-[#0E0D13]/65"/>
      <Header variant="dark"/>
      <Container>
        <div className="relative pt-28 pb-16 max-w-2xl text-white">
          <h1 className="text-5xl font-extrabold leading-tight">{data.title}</h1>
          <p className="mt-3 text-white/90">{data.subtitle}</p>
          <div className="mt-6 flex gap-3">
            <a href="/find-mentors" onClick={nav} className="px-5 py-3 bg-[#7317CF] rounded-lg text-white">Find your mentor →</a>
            <a href="/signup" onClick={nav} className="px-5 py-3 border border-white/25 rounded-lg text-white">Become a mentor</a>
          </div>
        </div>
      </Container>
    </section>
  );
}

const Stat = ({icon,num,label})=>(
  <div className="bg-white rounded-2xl shadow-sm ring-1 ring-zinc-200 p-6 flex items-center gap-5">
    <img src={icon} className="h-8 w-8" alt=""/>
    <div><div className="text-3xl font-extrabold text-[#0E0D13]">{num}</div><div className="text-xs text-zinc-500">{label}</div></div>
  </div>
);

const HiwCard = ({step,title,desc,img})=>(
  <div className="rounded-2xl bg-white ring-1 ring-zinc-200 p-5">
    <div className="text-xs font-bold text-[#7317CF] bg-zinc-100 rounded-md inline-block px-2 py-1">{step}</div>
    <h3 className="mt-3 font-semibold text-[#0E0D13]">{title}</h3>
    <p className="text-sm text-zinc-500 mt-1">{desc}</p>
    <img src={img} className="mt-4 rounded-lg w-full" alt=""/>
  </div>
);

function Testimonials({items}){
  if(!items || items.length<3) return null;
  return (
    <section className="mx-auto max-w-6xl px-4 mt-16">
      <h2 className="text-3xl font-extrabold text-[#0E0D13] text-center">What Our Clients Say About Us</h2>
      <div className="grid md:grid-cols-3 gap-6 mt-8">
        {items.slice(0,3).map((t,i)=>(
          <div key={i} className="rounded-2xl bg-white ring-1 ring-zinc-200 p-5">
            <div className="text-sm font-semibold">{t.name}</div>
            <div className="text-xs text-zinc-500">{t.role}</div>
            <div className="mt-2 font-semibold">{t.title}</div>
            <p className="text-sm text-zinc-600 mt-2">{t.text}</p>
            <div className="mt-2 text-[#7317CF]">{'★'.repeat(t.rating)}{'☆'.repeat(5-t.rating)}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/*** INNER PAGES (PIXEL-LIKE) ***/
function SimpleHero({title,bg,sub}){
  return (
    <section className="relative">
      <img src={bg} className="absolute inset-0 w-full h-[240px] object-cover" alt=""/>
      <div className="absolute inset-0 bg-[#0E0D13]/55 h-[240px]"/>
      <Header variant="dark"/>
      <Container><div className="relative h-[240px] flex items-center">
        <div>
          <h1 className="text-5xl font-extrabold text-white">{title}</h1>
          {sub && <p className="text-white/85 mt-2">{sub}</p>}
        </div>
      </div></Container>
    </section>
  );
}

function AboutPage(){
  const [d,set] = useState(null);
  useEffect(()=>{api('about').then(set)},[]);
  if(!d) return null;
  return (<>
    <SimpleHero title="About Us" bg={d.bg} sub={d.tagline}/>
    <Container>
      <div className="py-12">
        <h2 className="text-2xl font-bold text-[#0E0D13]">Our Team</h2>
        <div className="grid md:grid-cols-3 gap-6 mt-6">
          {d.team.map((m,i)=>(
            <div key={i} className="rounded-2xl bg-white ring-1 ring-zinc-200 p-6 text-center">
              <img src={m.img} className="w-28 h-28 rounded-full mx-auto" alt=""/>
              <div className="mt-3 font-semibold">{m.name}</div>
              <div className="text-xs text-zinc-500">{m.role}</div>
            </div>
          ))}
        </div>
      </div>
    </Container>
    <Footer/>
  </>);
}

function ContactForm(){
  const [s,setS] = useState({name:'',email:'',message:''}); const [ok,setOk]=useState(false);
  return (
    <form onSubmit={async e=>{e.preventDefault(); const res=await api('contact-submit',{method:'POST',body:JSON.stringify(s)}); if(res.ok) setOk(true);}}>
      <input className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" placeholder="Your name" value={s.name} onChange={e=>setS({...s,name:e.target.value})}/>
      <input className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" placeholder="Your email" value={s.email} onChange={e=>setS({...s,email:e.target.value})}/>
      <textarea className="w-full border border-zinc-300 rounded-lg h-24 px-3 py-2 mb-3" placeholder="Message" value={s.message} onChange={e=>setS({...s,message:e.target.value})}/>
      <button className="px-4 h-10 bg-[#7317CF] text-white rounded-lg">Send</button>
      {ok && <div className="text-green-600 mt-2">Message sent. Thank you!</div>}
    </form>
  );
}

function ContactPage(){
  const [d,set] = useState(null);
  useEffect(()=>{api('contact').then(set)},[]);
  if(!d) return null;
  return (<>
    <SimpleHero title="Contact Us" bg={d.bg} sub={d.sub}/>
    <Container>
      <div className="py-12 grid md:grid-cols-2 gap-8">
        <div className="rounded-2xl bg-white ring-1 ring-zinc-200 p-6">
          <div className="font-semibold">Email</div>
          <a href={`mailto:${d.email}`} className="text-[#7317CF]">{d.email}</a>
          <div className="mt-4 font-semibold">WhatsApp</div>
          <a href="#" className="text-[#7317CF]">{d.whatsapp}</a>
          <div className="mt-4 font-semibold">Address</div>
          <div className="text-zinc-600">{d.address}</div>
          <div className="mt-4 font-semibold">LinkedIn</div>
          <a href={d.linkedin} target="_blank" className="text-[#7317CF]">Company page</a>
        </div>
        <div className="rounded-2xl bg-white ring-1 ring-zinc-200 p-6">
          <div className="font-semibold mb-2">Send us a message</div>
          <ContactForm/>
        </div>
      </div>
    </Container>
    <Footer/>
  </>);
}

function FindMentorsPage(){
  const [d,set] = useState(null);
  useEffect(()=>{api('find').then(set)},[]);
  if(!d) return null;
  return (<>
    <SimpleHero title="Find Your Mentor" bg={d.bg} sub={d.sub}/>
    <Container>
      <div className="py-12 grid md:grid-cols-3 gap-6">
        {d.mentors.map((m,i)=>(
          <div key={i} className="rounded-2xl bg-white ring-1 ring-zinc-200 p-6 text-center">
            <img src={m.img} className="w-24 h-24 rounded-full mx-auto"/>
            <div className="mt-3 font-semibold">{m.name}</div>
            <div className="text-xs text-zinc-500">{m.tag}</div>
            <button className="mt-4 px-4 h-9 bg-[#7317CF] text-white rounded-lg">Book Session</button>
          </div>
        ))}
      </div>
    </Container>
    <Footer/>
  </>);
}

function LoginForm(){
  const [s,setS] = useState({email:'',password:''}); const [msg,setMsg]=useState('');
  return (
    <form onSubmit={async e=>{e.preventDefault(); const r=await api('login',{method:'POST',body:JSON.stringify(s)}); setMsg(r.ok?'Logged in':'Login failed');}}>
      <input className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" placeholder="Email" value={s.email} onChange={e=>setS({...s,email:e.target.value})}/>
      <input className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" placeholder="Password" type="password" value={s.password} onChange={e=>setS({...s,password:e.target.value})}/>
      <button className="px-4 h-10 bg-[#7317CF] text-white rounded-lg">Login</button>
      {msg && <div className="mt-2 text-sm">{msg}</div>}
    </form>
  );
}
function SignupForm(){
  const [s,setS] = useState({email:'',password:'',role:'subscriber'}); const [msg,setMsg]=useState('');
  return (
    <form onSubmit={async e=>{e.preventDefault(); const r=await api('register',{method:'POST',body:JSON.stringify(s)}); setMsg(r.ok?'Account created':'Signup failed');}}>
      <select className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" value={s.role} onChange={e=>setS({...s,role:e.target.value})}>
        <option value="subscriber">Select Role</option>
        <option value="mentor">Mentor</option>
        <option value="mentee">Mentee</option>
      </select>
      <input className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" placeholder="Email" value={s.email} onChange={e=>setS({...s,email:e.target.value})}/>
      <input className="w-full border border-zinc-300 rounded-lg h-10 px-3 mb-3" placeholder="Password" type="password" value={s.password} onChange={e=>setS({...s,password:e.target.value})}/>
      <button className="px-4 h-10 bg-[#7317CF] text-white rounded-lg">Create Account</button>
      {msg && <div className="mt-2 text-sm">{msg}</div>}
    </form>
  );
}

function LoginPage(){ const [d,set] = useState(null); useEffect(()=>{api('login').then(set)},[]); if(!d) return null; return (<><SimpleHero title="Login" bg={d.bg}/><Container><div className="py-12 max-w-2xl"><LoginForm/></div></Container><Footer/></>); }
function SignupPage(){ const [d,set] = useState(null); useEffect(()=>{api('signup').then(set)},[]); if(!d) return null; return (<><SimpleHero title="Signup" bg={d.bg}/><Container><div className="py-12 max-w-2xl"><SignupForm/></div></Container><Footer/></>); }

function Dashboard({type}){
  const [d,set] = useState(null);
  useEffect(()=>{api('dash/'+type).then(set)},[type]);
  if(!d) return null;
  return (<>
    <SimpleHero title={(type==='mentor'?'Mentor':'Mentee')+' Dashboard'} bg={d.bg}/>
    <Container><div className="py-12 grid md:grid-cols-2 gap-6">
      <div className="rounded-2xl bg-white ring-1 ring-zinc-200 p-6">
        <div className="font-semibold mb-2">Upcoming Sessions</div>
        <ul className="space-y-2">{d.sessions.map((s,i)=>(<li key={i} className="text-sm text-zinc-700">{s.title} — {s.time}</li>))}</ul>
      </div>
      <div className="rounded-2xl bg-white ring-1 ring-zinc-200 p-6">
        <div className="font-semibold mb-2">Messages</div>
        <ul className="space-y-2">{d.messages.map((m,i)=>(<li key={i} className="text-sm text-zinc-700"><strong>{m.from}:</strong> {m.text}</li>))}</ul>
      </div>
    </div></Container>
    <Footer/>
  </>);
}

function HomePage(){
  const [data,set] = useState(null);
  useEffect(()=>{api('home').then(set)},[]);
  if(!data) return null;
  return (<>
    <Hero data={data.hero}/>
    <section className="mx-auto max-w-6xl px-4 -mt-10 relative z-10">
      <div className="grid md:grid-cols-4 gap-4">{data.stats.map((s,i)=>(<Stat key={i} {...s}/>))}</div>
    </section>
    <section className="mx-auto max-w-6xl px-4">
      <div className="mt-14 grid md:grid-cols-3 gap-6">{data.howItWorks.map((h,i)=>(<HiwCard key={i} {...h}/>))}</div>
    </section>
    <Testimonials items={data.testimonials}/>
    <Footer/>
  </>);
}

function App(){
  const p=(window.location.pathname||'/').replace(/\/+$/,'')||'/';
  if(p===''||p==='/') return <HomePage/>;
  if(p.includes('/about-us')) return <AboutPage/>;
  if(p.includes('/contact-us')) return <ContactPage/>;
  if(p.includes('/find-mentors')) return <FindMentorsPage/>;
  if(p.includes('/dashboard-mentor')) return <Dashboard type="mentor"/>;
  if(p.includes('/dashboard-mentee')) return <Dashboard type="mentee"/>;
  if(p.includes('/login')) return <LoginPage/>;
  if(p.includes('/signup')) return <SignupPage/>;
  return <HomePage/>;
}
function render(){ ReactDOM.createRoot(document.getElementById('root')).render(<App/>); }
render();