import React,{useEffect,useState} from "react";
import {createRoot} from "react-dom/client";
import {ArrowUpRight,ArrowRight,Menu,X,Play,Instagram,Mail,Phone,MapPin,Check,Plus,ChevronDown} from "lucide-react";
import "./styles.css";

const img=(id,w=1600)=>`https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w}&q=85`;
const images={
 hero:img("photo-1519741497674-611481863552"),
 a:img("photo-1511285560929-80b456fea0bc"),
 b:img("photo-1519225421980-715cb0215aed"),
 c:img("photo-1606800052052-a08af7148866"),
 d:img("photo-1544078751-58fee2d8a03b"),
 e:img("photo-1465495976277-4387d4b0e4a6"),
 f:img("photo-1515934751635-c81c6bc9a2d8")
};

function useReveal(){useEffect(()=>{const els=document.querySelectorAll(".reveal");const io=new IntersectionObserver(es=>es.forEach(e=>e.isIntersecting&&e.target.classList.add("in")),{threshold:.08});els.forEach(e=>io.observe(e));return()=>io.disconnect()},[])}

function Header(){const [open,setOpen]=useState(false);return <header className="header"><a className="brand" href="#/">ATELIER <i>VOW</i></a><nav>{["Work","Services","Packages","About","Contact"].map((x,i)=><a key={x} href={["#/portfolio","#/services","#/packages","#/about","#/contact"][i]}>{x}</a>)}<a className="navCta" href="#/contact">Check availability <ArrowUpRight size={15}/></a></nav><button className="menu" onClick={()=>setOpen(!open)}>{open?<X/>:<Menu/>}</button>{open&&<div className="mobileNav">{["Work","Services","Packages","About","Contact"].map((x,i)=><a onClick={()=>setOpen(false)} href={["#/portfolio","#/services","#/packages","#/about","#/contact"][i]} key={x}>{x}</a>)}</div>}</header>}

function Reveal({children,className=""}){return <div className={"reveal "+className}>{children}</div>}

function Home(){useReveal();return <><section className="hero"><div className="heroImg" style={{backgroundImage:`url(${images.hero})`}}/><div className="heroShade"/><div className="heroCopy"><Reveal><span className="eyebrow">WEDDING PHOTOGRAPHY · CINEMATOGRAPHY</span></Reveal><Reveal><h1>For the days<br/><em>you'll relive.</em></h1></Reveal><Reveal><p>Quiet, honest and cinematic stories for couples who want to remember how it felt.</p></Reveal><Reveal><div className="actions"><a className="button light" href="#/portfolio">Explore our work <ArrowRight size={16}/></a><a className="textLink" href="#/contact">Check availability <ArrowUpRight size={15}/></a></div></Reveal></div><div className="scrollHint">SCROLL <span/></div></section>
<section className="intro section"><div className="eyebrow">OUR APPROACH</div><div><h2>Stories over <em>poses.</em></h2><p className="lead">We photograph the in-between — the nervous hands, the loud rooms, the quiet glances. Our work sits somewhere between documentary truth and editorial beauty.</p><a className="under" href="#/about">Discover the studio <ArrowRight size={15}/></a></div></section>
<section className="featured section"><div className="sectionHead"><div><div className="eyebrow">SELECTED STORIES</div><h2>Real celebrations,<br/><em>beautifully remembered.</em></h2></div><a className="under" href="#/portfolio">View all work <ArrowUpRight size={15}/></a></div><div className="projectGrid"><Project image={images.a} title="Akhil & Meera" meta="Kochi · Kerala · 2026" big/><Project image={images.b} title="Dev & Ananya" meta="Udaipur · Rajasthan · 2026"/><Project image={images.c} title="Arjun & Nia" meta="Alleppey · Kerala · 2025"/></div></section>
<section className="film"><div className="filmBg" style={{backgroundImage:`url(${images.d})`}}/><div className="filmOverlay"/><div className="filmCenter"><span>THE WEDDING FILM</span><button><Play fill="currentColor" size={18}/></button><h2>Let the room<br/><em>come back to you.</em></h2></div></section>
<section className="quote section"><span className="quoteMark">“</span><blockquote>We want your photographs to make you feel the room again — not just remember how it looked.</blockquote><span className="eyebrow">THE ATELIER VOW PHILOSOPHY</span></section>
<section className="stats section"><Stat n="180" t="Weddings documented"/><Stat n="09" t="Years creating"/><Stat n="24" t="Cities & countries"/><Stat n="5.0" t="Client rating"/></section>
<CTA/></>}

function Project({image,title,meta,big}){return <a className={"project "+(big?"big":"")} href="#/portfolio/story"><img src={image}/><div className="projectInfo"><h3>{title}</h3><span>{meta}</span></div><ArrowUpRight className="projectArrow"/></a>}
function Stat({n,t}){return <div className="stat reveal"><strong>{n}</strong><span>{t}</span></div>}
function CTA(){return <section className="finalCta"><div className="eyebrow">LET'S MAKE SOMETHING LAST</div><h2>Your date<br/><em>starts here.</em></h2><a className="button dark" href="#/contact">Check availability <ArrowUpRight size={16}/></a></section>}

function Portfolio(){useReveal();const [filter,setFilter]=useState("ALL");const items=[["ALL","Akhil & Meera",images.a,"Kochi · Wedding"],["KERALA","Dev & Ananya",images.b,"Udaipur · Destination"],["PRE-WEDDING","Arjun & Nia",images.c,"Alleppey · Pre-wedding"],["ENGAGEMENT","Rohan & Tara",images.e,"Thrissur · Engagement"],["DESTINATION","Vivek & Sara",images.f,"Goa · Wedding"],["PHOTOGRAPHY","Joel & Maria",images.d,"Kumarakom · Wedding"]];return <><PageHero kicker="THE ARCHIVE" title={<>Photographs & films<br/><em>from real celebrations.</em></>}/><section className="portfolio section"><div className="filters">{["ALL","PHOTOGRAPHY","FILMS","KERALA","DESTINATION","PRE-WEDDING","ENGAGEMENT"].map(x=><button className={filter===x?"active":""} onClick={()=>setFilter(x)} key={x}>{x}</button>)}</div><div className="masonry">{items.filter(x=>filter==="ALL"||x[0]===filter||x[0]==="ALL").map((x,i)=><Project key={i} image={x[2]} title={x[1]} meta={x[3]} big={i%3===0}/>)}</div></section></>}

function PageHero({kicker,title}){useReveal();return <section className="pageHero"><div className="eyebrow">{kicker}</div><Reveal><h1>{title}</h1></Reveal></section>}

function Services(){useReveal();const services=[["01","Wedding Photography","Full-day documentary coverage, portraits and curated galleries.",images.a],["02","Cinematic Wedding Films","Story-driven wedding films with natural audio and cinematic editing.",images.d],["03","Pre-Wedding","Natural location-based pre-wedding photography and films.",images.c],["04","Engagement","Coverage for engagements, proposals and intimate celebrations.",images.e],["05","Albums & Prints","Premium archival albums and fine-art prints.",images.f],["06","Drone Cinematography","Licensed aerial coverage for venues and destination weddings.",images.b]];return <><PageHero kicker="WHAT WE DO" title={<>A complete visual<br/><em>language for your wedding.</em></>}/><section className="servicesList">{services.map(s=><article className="service reveal" key={s[0]}><span>{s[0]}</span><div><h2>{s[1]}</h2><p>{s[2]}</p><a href="#/contact">Explore service <ArrowUpRight size={15}/></a></div><img src={s[3]}/></article>)}</section></>}

const packageData=[["ESSENTIAL","₹75,000","An intimate foundation for beautifully documented celebrations.",["8 hours photography","1 photographer","400+ edited images","Online gallery","Basic album"]],["SIGNATURE","₹1,25,000","A complete visual story with photography and cinematic motion.",["10 hours coverage","2 photographers","Cinematic highlight film","700+ edited images","Premium online gallery","Premium album"]],["GRAND","₹1,85,000","Two days, a larger creative team and the full cinematic experience.",["2 days coverage","2 photographers","2 cinematographers","Highlight film","Wedding teaser","1000+ edited images","Premium album","Drone coverage"]]];
function Packages(){useReveal();return <><PageHero kicker="INVESTMENT" title={<>Three ways to<br/><em>tell the story.</em></>}/><section className="packages section">{packageData.map((p,i)=><article className={"package reveal "+(i===1?"featuredPackage":"")} key={p[0]}>{i===1&&<div className="chosen">MOST CHOSEN</div>}<span className="eyebrow">0{i+1}</span><h2>{p[0]}</h2><strong>{p[1]}</strong><p>{p[2]}</p><ul>{p[3].map(f=><li key={f}><Check size={15}/>{f}</li>)}</ul><a className="button dark" href="#/contact">Enquire <ArrowUpRight size={16}/></a></article>)}</section><section className="custom section"><div><div className="eyebrow">NOT SURE YET?</div><h2>Need something <em>custom?</em></h2></div><a className="button light darkBg" href="#/contact">Build your package <ArrowRight size={16}/></a></section></>}

function About(){useReveal();return <><PageHero kicker="THE STUDIO" title={<>Quietly obsessed<br/><em>with real moments.</em></>}/><section className="aboutIntro section"><img src={images.f}/><div><div className="eyebrow">OUR STORY</div><h2>Beautifully imperfect,<br/><em>deliberately observed.</em></h2><p>Atelier Vow began with a simple belief: wedding photography should feel like memory, not performance. From Kerala to destination celebrations, we make photographs that leave room for people to be themselves.</p><p>Our team works lightly, watches closely and edits with restraint. The result is a visual record that feels lived-in today and timeless later.</p></div></section><section className="philosophy"><div className="eyebrow">OUR PHILOSOPHY</div><h2>Less performance.<br/><em>More presence.</em></h2></section><section className="bts section"><div className="eyebrow">BEHIND THE SCENES</div><div className="btsGrid"><img src={images.a}/><img src={images.d}/><img src={images.c}/></div></section></>}

function Contact(){const [sent,setSent]=useState(false);const submit=async e=>{e.preventDefault();const data=Object.fromEntries(new FormData(e.target));try{await fetch("/api/enquiries",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(data)})}catch{}setSent(true)};return <><section className="contactHero"><div className="eyebrow">ENQUIRIES</div><h1>Tell us about<br/><em>your day.</em></h1><p>Share the details below. We’ll come back to you with availability and a tailored proposal.</p></section><section className="contact section"><form onSubmit={submit}>{["name","email","phone","wedding_date","venue","city"].map((x,i)=><label key={x}>{x.replace("_"," ")}<input name={x} type={x==="email"?"email":x==="wedding_date"?"date":"text"} required={["name","email","phone","wedding_date"].includes(x)}/></label>)}<label>event type<select name="event_type"><option>Wedding</option><option>Engagement</option><option>Pre-Wedding</option><option>Destination Wedding</option></select></label><label>budget range<select name="budget"><option>₹75,000 – ₹1,25,000</option><option>₹1,25,000 – ₹1,85,000</option><option>₹1,85,000+</option><option>Let's discuss</option></select></label><label className="full">services required<input name="services" placeholder="Photography, Films, Albums..."/></label><label className="full">tell us about your day<textarea name="message" rows="6"/></label><button className="button dark full" type="submit">Send enquiry <ArrowUpRight size={16}/></button>{sent&&<div className="success">Thank you — your enquiry has been received.</div>}</form><aside><div className="eyebrow">CONTACT</div><a href="tel:+916235603777"><Phone/> +91 62356 03777</a><a href="mailto:hello@ateliervow.com"><Mail/> hello@ateliervow.com</a><a href="#"><Instagram/> @ateliervow</a><span><MapPin/> Kerala · India</span><small>MON — SAT<br/>10:00 — 18:00 IST</small></aside></section></>}

function Story(){useReveal();return <><section className="storyHero" style={{backgroundImage:`url(${images.a})`}}><div><div className="eyebrow">WEDDING STORY · 2026</div><h1>Akhil <em>&</em> Meera</h1><p>Kochi · Kerala</p></div></section><section className="storyIntro section"><div className="eyebrow">THE STORY</div><p>One warm afternoon, a room full of people they loved, and a hundred small moments that happened between the planned ones.</p></section><section className="storyGallery"><img src={images.b}/><img src={images.e}/><img src={images.c}/><img src={images.f}/><img className="wide" src={images.d}/></section><CTA/></>}

function Admin(){const [tab,setTab]=useState("Dashboard");const tabs=["Dashboard","Portfolio","Videos","Packages","Services","Testimonials","Journal","Enquiries"];return <div className="admin"><aside><a className="brand">ATELIER <i>VOW</i></a><span className="adminLabel">STUDIO CMS</span>{tabs.map(t=><button className={tab===t?"sel":""} onClick={()=>setTab(t)} key={t}>{t}</button>)}<a href="#/" className="back">← View website</a></aside><main><div className="adminTop"><div><span className="eyebrow">CONTROL ROOM</span><h1>{tab}</h1></div><button className="button dark">+ Add new</button></div>{tab==="Dashboard"?<Dashboard/>:<Manager tab={tab}/>}</main></div>}
function Dashboard(){return <><div className="dashGrid"><div><span>NEW ENQUIRIES</span><b>12</b><small>+4 this week</small></div><div><span>UPCOMING WEDDINGS</span><b>08</b><small>Next: 04 Oct</small></div><div><span>PORTFOLIO</span><b>36</b><small>Published projects</small></div><div><span>PACKAGE ENQUIRIES</span><b>27</b><small>This month</small></div></div><div className="adminTable"><h2>Recent enquiries</h2>{["Ananya Joseph · Kochi","Rohan Menon · Thrissur","Sarah & Joel · Goa","Maya Nair · Alappuzha"].map((x,i)=><div><strong>{x}</strong><span>{["NEW","CONTACTED","FOLLOW-UP","BOOKED"][i]}</span><small>Today</small></div>)}</div></>}
function Manager({tab}){const rows={Portfolio:["Akhil & Meera","Dev & Ananya","Arjun & Nia"],Videos:["The Akhil & Meera Film","Dev & Ananya — Wedding Film"],Packages:["ESSENTIAL · ₹75,000","SIGNATURE · ₹1,25,000","GRAND · ₹1,85,000"],Services:["Wedding Photography","Cinematic Wedding Films","Pre-Wedding","Engagement"],Testimonials:["Akhil & Meera","Joel & Maria"],Journal:["How to plan a timeless wedding gallery","Kerala destination wedding guide"],Enquiries:["Ananya Joseph","Rohan Menon","Sarah & Joel"]}[tab]||[];return <div className="manager"><div className="managerNote">Drag to reorder where supported · Changes are stored in Cloudflare D1 when the API is connected.</div>{rows.map((r,i)=><div className="manageRow" key={r}><span className="drag">⠿</span><div><strong>{r}</strong><small>{tab==="Enquiries"?"NEW":"Published"}</small></div><button>Edit</button><button className="danger">Delete</button></div>)}</div>}

function App(){const path=location.hash.replace("#","")||"/";if(path.startsWith("/admin"))return <Admin/>;if(path==="/portfolio")return <><Header/><Portfolio/></>;if(path==="/portfolio/story")return <><Header/><Story/></>;if(path==="/services")return <><Header/><Services/></>;if(path==="/packages")return <><Header/><Packages/></>;if(path==="/about")return <><Header/><About/></>;if(path==="/contact")return <><Header/><Contact/></>;return <><Header/><Home/></>}
createRoot(document.getElementById("root")).render(<App/>);