const {useEffect,useMemo,useState}=React;
const IMG=(id,w=1400)=>`https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=88`;
const hero=[IMG('1519741497674-611481863552'),IMG('1511285560929-80b456fea0bc'),IMG('1519225421980-715cb0215aed'),IMG('1465495976277-4387d4b0e4a6')];
const portraits=[IMG('1529636798458-92182e3d3b5b'),IMG('1520854221256-17451cc331bf'),IMG('1507504031003-bb6d8f2f7d0d'),IMG('1517841905240-472988babdf9'),IMG('1488426862026-3ee34a7d66df'),IMG('1519741497674-611481863552')];
const portfolio=[...portraits,...hero,...portraits];
const serviceImgs=[IMG('1519741497674-611481863552'),IMG('1511285560929-80b456fea0bc'),IMG('1504150558240-0b4fd8946624'),IMG('1529636798458-92182e3d3b5b'),IMG('1519225421980-715cb0215aed'),IMG('1464366400600-7168b8af9bc3')];
const services=['Wedding Photography','Pre-Wedding Stories','Cinematic Films','Portraits','Engagements','Events & Celebrations'];
const navItems=[['About','#about'],['Portfolio','/portfolio'],['Services','#services'],['Films','/films'],['Journal','/journal'],['Contact','#contact']];
function Brand(){return <a className="brand" href="/">Click <span>O</span> Shoot</a>}
function EnquiryModal({open,onClose,defaultService=''}){const[form,setForm]=useState({name:'',email:'',phone:'',event_date:'',service:defaultService||services[0],message:''});const[status,setStatus]=useState('');useEffect(()=>{if(open){document.body.classList.add('modal-open');setStatus('');setForm(f=>({...f,service:defaultService||f.service}))}else document.body.classList.remove('modal-open');return()=>document.body.classList.remove('modal-open')},[open,defaultService]);if(!open)return null;const submit=async e=>{e.preventDefault();setStatus('Sending...');try{const r=await fetch('/api.php?action=enquiry',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(form)});const d=await r.json();setStatus(d.message||'Enquiry received.');if(d.success)setForm({...form,name:'',email:'',phone:'',event_date:'',message:''})}catch(err){setStatus('Unable to send right now. Please try again.')}};return <div className="modal-backdrop" onMouseDown={e=>e.target===e.currentTarget&&onClose()}><div className="enquiry-modal" role="dialog" aria-modal="true" aria-labelledby="enquire-title"><button className="modal-close" onClick={onClose} aria-label="Close">×</button><div className="modal-intro"><p className="eyebrow">LET'S CREATE SOMETHING BEAUTIFUL</p><h2 id="enquire-title">Tell us about<br/><em>your story.</em></h2><p>Share a few details and our team will get back to you with availability, ideas and a tailored quote.</p><div className="modal-note"><span>✦</span><div><b>Fast response</b><small>We usually reply within 24 hours.</small></div></div></div><form className="modal-form" onSubmit={submit}><div className="form-row"><label>Your Name<input required value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="Full name"/></label><label>Phone<input required value={form.phone} onChange={e=>setForm({...form,phone:e.target.value})} placeholder="+91 XXXXX XXXXX"/></label></div><div className="form-row"><label>Email<input required type="email" value={form.email} onChange={e=>setForm({...form,email:e.target.value})} placeholder="you@example.com"/></label><label>Event Date<input type="date" value={form.event_date} onChange={e=>setForm({...form,event_date:e.target.value})}/></label></div><label>I'm interested in<select value={form.service} onChange={e=>setForm({...form,service:e.target.value})}>{services.map(s=><option key={s}>{s}</option>)}</select></label><label>Tell us a little more<textarea rows="4" value={form.message} onChange={e=>setForm({...form,message:e.target.value})} placeholder="Venue, city, dates, coverage you need..."></textarea></label><button className="btn gold full" type="submit">Send Enquiry <span>→</span></button>{status&&<div className="form-status">{status}</div>}</form></div></div>}
function Header({onEnquire}){const[open,setOpen]=useState(false);const go=(e,href)=>{if(href.startsWith('#')){e.preventDefault();setOpen(false);if(location.pathname!=='/')location.href='/'+href;else document.querySelector(href)?.scrollIntoView({behavior:'smooth'});}else setOpen(false)};return <header className="header"><div className="nav"><Brand/><button className="menu" onClick={()=>setOpen(!open)}>{open?'×':'☰'}</button><nav className={open?'open':''}>{navItems.map(([x,href])=><a key={x} href={href} onClick={e=>go(e,href)}>{x}</a>)}<button className="nav-cta" onClick={()=>{setOpen(false);onEnquire()}}>Enquire Now <span>→</span></button></nav></div></header>}
function Hero({onEnquire}){const[i,setI]=useState(0);useEffect(()=>{const t=setInterval(()=>setI(x=>(x+1)%hero.length),5200);return()=>clearInterval(t)},[]);return <section id="home" className="hero"><div className="hero-bg" style={{backgroundImage:`url(${hero[i]})`}}/><div className="hero-shade"/><div className="hero-content"><p className="eyebrow">WEDDING PHOTOGRAPHY · CINEMATIC FILMS</p><h1>Every love story<br/><em>deserves to be remembered.</em></h1><p className="hero-copy">Timeless photographs and cinematic films for couples who want to feel their day all over again.</p><div className="actions"><a className="btn gold" href="/portfolio">Explore Our Work <span>→</span></a><a className="btn ghost" href="#films">▶ Watch Films</a></div></div><div className="hero-controls"><button onClick={()=>setI((i-1+hero.length)%hero.length)}>‹</button><div className="dots">{hero.map((_,n)=><button key={n} className={n===i?'active':''} onClick={()=>setI(n)}/>)}</div><button onClick={()=>setI((i+1)%hero.length)}>›</button></div><div className="hero-scroll">SCROLL TO DISCOVER <span/></div></section>}
function About(){return <section id="about" className="section about"><div className="about-copy"><p className="eyebrow">OUR APPROACH</p><h2>We capture emotions,<br/><em>not just pictures.</em></h2><p>At Click O Shoot, we believe the best photographs don't feel staged. They feel like you — the laugh you didn't plan, the hand you reached for, the tear you tried to hide.</p><p>Our visual language blends candid storytelling with elegant composition and cinematic colour, creating photographs and films that stay meaningful long after the celebration ends.</p><a className="text-link" href="/journal">Discover our journal →</a><div className="stats"><div><strong>500+</strong><span>Stories Captured</span></div><div><strong>5+</strong><span>Years of Experience</span></div><div><strong>50+</strong><span>Locations</span></div></div></div><div className="about-visual"><div className="frame one"><img src={IMG('1517841905240-472988babdf9',900)} alt="Elegant Bengali wedding portrait by Click O Shoot"/></div><div className="frame two"><img src={IMG('1520854221256-17451cc331bf',900)} alt="Couple wedding moment photographed by Click O Shoot"/></div><span className="scribble">stories<br/>through<br/><i>love</i></span></div></section>}
function Portraits(){const[start,setStart]=useState(0);const visible=useMemo(()=>Array.from({length:4},(_,k)=>portraits[(start+k)%portraits.length]),[start]);return <section className="section portraits"><div className="section-head"><div><p className="eyebrow">THE PORTRAITS</p><h2>Frames that <em>feel alive.</em></h2></div><div className="carousel-buttons"><button onClick={()=>setStart((start-1+portraits.length)%portraits.length)}>‹</button><button onClick={()=>setStart((start+1)%portraits.length)}>›</button></div></div><div className="portrait-track">{visible.map((src,i)=><article className="portrait" key={src+i}><img src={src} alt="Wedding portrait photography in Kolkata by Click O Shoot"/><div className="portrait-overlay"><span>0{i+1}</span><span>♡</span></div></article>)}</div><div className="center-link"><a className="text-link" href="/portfolio">View complete portfolio →</a></div></section>}
function Services({onEnquire}){return <section id="services" className="section services"><div className="center-title"><p className="eyebrow">WHAT WE CREATE</p><h2>For every <em>special moment.</em></h2><p>From your first look to the last dance, we document the moments that make your story yours.</p></div><div className="service-grid">{services.map((name,i)=><article className="service-card" key={name}><img src={serviceImgs[i]} alt={`${name} by Click O Shoot in Kolkata`}/><div className="service-shade"/><div className="service-info"><h3>{name}</h3><p>{['Candid, traditional and editorial coverage crafted around every emotion.','Beautiful locations, natural chemistry and photographs that feel like you.','Emotion-led wedding films with music, movement and a cinematic finish.','Elegant portraits for couples, families, creators and milestones.','Intimate engagement coverage with a refined, story-first visual style.','Birthdays, anniversaries, receptions and private celebrations.'][i]}</p><button onClick={()=>onEnquire(name)}>Book Now <span>→</span></button></div></article>)}</div></section>}
function Films({onEnquire}){const vids=[['Wedding Story',IMG('1492684223066-81342ee5ff30'),'04:18'],['Pre-Wedding Film',IMG('1511285560929-80b456fea0bc'),'03:26'],['Cinematic Highlights',IMG('1504150558240-0b4fd8946624'),'05:02']];const[selected,setSelected]=useState(0);return <section id="films" className="section films"><div className="film-copy"><p className="eyebrow">CINEMATIC FILMS</p><h2>Relive your moments<br/><em>in motion.</em></h2><p>Beautifully crafted wedding films that bring your celebration back to life — frame by frame, feeling by feeling.</p><button className="btn gold" onClick={()=>onEnquire('Cinematic Films')}>Book a Film <span>→</span></button></div><div className="video-showcase"><div className="main-video" style={{backgroundImage:`url(${vids[selected][1]})`}}><button className="play" onClick={()=>alert('Connect your YouTube/Vimeo video URL in the admin settings for playback.')}>▶</button><span>A Film by Click O Shoot</span></div><div className="video-list">{vids.map((v,i)=><button className={selected===i?'selected':''} key={v[0]} onClick={()=>setSelected(i)}><img src={v[1]} alt=""/><span><b>{v[0]}</b><small>{v[2]}</small></span>▶</button>)}</div></div></section>}
function Packages({onEnquire}){return <section className="section packages"><div className="center-title"><p className="eyebrow">COLLECTIONS</p><h2>Choose how you want<br/><em>your story told.</em></h2><p>Flexible coverage designed around intimate ceremonies, full wedding days and destination celebrations.</p></div><div className="package-grid">{[['Essential','Wedding Photography','Starting from ₹25,000','Perfect for intimate celebrations.'],['Signature','Photo + Cinematic Film','Starting from ₹45,000','Our most-loved complete storytelling collection.'],['Heirloom','Full Wedding Experience','Custom quotation','For multi-day and destination celebrations.']].map((p,i)=><article className={i===1?'package featured':'package'} key={p[0]}><span className="package-tag">{i===1?'MOST POPULAR':'COLLECTION 0'+(i+1)}</span><h3>{p[0]}</h3><b>{p[1]}</b><strong>{p[2]}</strong><p>{p[3]}</p><button className={i===1?'btn gold':'btn ghost'} onClick={()=>onEnquire(p[1])}>Book Now <span>→</span></button></article>)}</div></section>}
function JournalPreview(){const[fallback]=useState([{title:'How to Choose Your Wedding Photographer',excerpt:'The little things that make a big difference when choosing someone to document your day.',category:'WEDDING GUIDE',image:IMG('1519225421980-715cb0215aed'),slug:'how-to-choose-your-wedding-photographer'},{title:'A Guide to Beautiful Pre-Wedding Photos',excerpt:'Simple ways to make your pre-wedding session feel relaxed, natural and completely yours.',category:'PRE-WEDDING',image:IMG('1511285560929-80b456fea0bc'),slug:'guide-to-beautiful-pre-wedding-photos'},{title:'Why Your Wedding Film Matters',excerpt:'Photos freeze a frame. Films bring the voices, movement and atmosphere back.',category:'CINEMATIC',image:IMG('1492684223066-81342ee5ff30'),slug:'why-your-wedding-film-matters'}]);const[posts,setPosts]=useState(fallback);useEffect(()=>{fetch('/api.php?action=posts&limit=3').then(r=>r.json()).then(d=>{if(d.posts?.length)setPosts(d.posts)}).catch(()=>{})},[]);return <section className="section journal"><div className="section-head"><div><p className="eyebrow">THE JOURNAL</p><h2>Stories, tips & <em>inspiration.</em></h2></div><a className="text-link" href="/journal">Visit journal →</a></div><div className="post-grid">{posts.map(p=><article className="post" key={p.slug||p.title}><img src={p.image||p.featured_image||IMG('1519225421980-715cb0215aed')} alt={p.title}/><div className="post-body"><span>{p.category||'JOURNAL'}</span><h3>{p.title}</h3><p>{p.excerpt}</p><a href={p.slug?`/blog/${p.slug}`:'/journal'}>Read more →</a></div></article>)}</div></section>}
function Testimonials(){return <section className="section testimonials"><div className="center-title"><p className="eyebrow">KIND WORDS</p><h2>What our <em>couples say.</em></h2></div><div className="test-grid">{[['Ankita & Rahul','Kolkata','“They made us forget the camera was even there. Every photograph feels like us.”'],['Taniya & Abhishek','Howrah','“Our pre-wedding shoot became a story we will keep coming back to.”'],['Priya & Sayan','Durgapur','“A talented and incredibly kind team. We felt comfortable from the first meeting.”']].map(x=><article key={x[0]}><span className="quote">“</span><p>{x[2]}</p><div><strong>{x[0]}</strong><small>{x[1]} · <span>★★★★★</span></small></div></article>)}</div></section>}
function Contact({onEnquire}){return <section id="contact" className="contact"><div className="contact-inner"><div><p className="eyebrow">LET'S CREATE</p><h2>Your story.<br/><em>Beautifully told.</em></h2><p>Tell us about your celebration and we'll get back to you with availability, ideas and a tailored quote.</p><div className="contact-meta"><span>☎ +91 98765 43210</span><span>✉ hello@clickoshoot.in</span><span>⌖ Kolkata, West Bengal</span></div></div><div className="contact-card"><h3>Ready to make it memorable?</h3><p>Dates fill quickly. Tell us what you're planning and let's see if we're the right fit.</p><button className="btn gold" onClick={()=>onEnquire()}>Enquire Now <span>→</span></button></div></div></section>}
function Footer(){return <footer><div className="footer-top"><Brand/><p>Capturing timeless moments, beautiful stories and unforgettable memories from Kolkata and beyond.</p><div className="social"><a href="#">ig</a><a href="#">fb</a><a href="#">yt</a></div></div><div className="footer-links"><div><b>Explore</b><a href="/">Home</a><a href="/portfolio">Portfolio</a><a href="/journal">Journal</a><a href="#contact">Contact</a></div><div><b>Services</b>{services.slice(0,4).map(s=><a href="#services" key={s}>{s}</a>)}</div><div><b>Contact</b><a href="tel:+919876543210">+91 98765 43210</a><a href="mailto:hello@clickoshoot.in">hello@clickoshoot.in</a><a href="#">Kolkata, West Bengal</a></div></div><div className="copyright"><span>© 2026 Click O Shoot. All rights reserved.</span><span>Made for beautiful stories.</span></div></footer>}
function PortfolioPage({onEnquire}){const[selected,setSelected]=useState(null);return <><Header onEnquire={onEnquire}/><main className="inner-page"><section className="page-hero"><p className="eyebrow">THE COMPLETE PORTFOLIO</p><h1>Stories in <em>every frame.</em></h1><p>Explore weddings, portraits, pre-wedding stories and the quiet in-between moments captured by Click O Shoot.</p></section><section className="portfolio-page"><div className="portfolio-grid">{portfolio.map((src,i)=><button className={`portfolio-item item-${i%5}`} key={src+i} onClick={()=>setSelected(i)}><img src={src} alt={`Click O Shoot wedding photography portfolio image ${i+1}`}/><span>View <b>↗</b></span></button>)}</div></section></main><Footer/><Lightbox selected={selected} onClose={()=>setSelected(null)}/></>}
function Lightbox({selected,onClose}){if(selected===null)return null;const src=portfolio[selected];const prev=()=>onClose();return <div className="lightbox" onClick={e=>e.target===e.currentTarget&&onClose()}><button className="lightbox-close" onClick={onClose}>×</button><img src={src} alt="Expanded Click O Shoot portfolio"/><div className="lightbox-caption">Click O Shoot · Portfolio</div></div>}
function JournalPage({onEnquire}){const[fallback]=useState([{title:'How to Choose Your Wedding Photographer',excerpt:'The little things that make a big difference when choosing someone to document your day.',category:'WEDDING GUIDE',image:IMG('1519225421980-715cb0215aed'),slug:'how-to-choose-your-wedding-photographer'},{title:'A Guide to Beautiful Pre-Wedding Photos',excerpt:'Simple ways to make your pre-wedding session feel relaxed, natural and completely yours.',category:'PRE-WEDDING',image:IMG('1511285560929-80b456fea0bc'),slug:'guide-to-beautiful-pre-wedding-photos'},{title:'Why Your Wedding Film Matters',excerpt:'Photos freeze a frame. Films bring the voices, movement and atmosphere back.',category:'CINEMATIC',image:IMG('1492684223066-81342ee5ff30'),slug:'why-your-wedding-film-matters'}]);const[posts,setPosts]=useState(fallback);useEffect(()=>{fetch('/api.php?action=posts&limit=30').then(r=>r.json()).then(d=>{if(d.posts?.length)setPosts(d.posts)}).catch(()=>{})},[]);return <><Header onEnquire={onEnquire}/><main className="inner-page"><section className="page-hero journal-hero"><p className="eyebrow">THE CLICK O SHOOT JOURNAL</p><h1>Stories, ideas & <em>inspiration.</em></h1><p>Helpful guides, real wedding stories, photography inspiration and behind-the-scenes thoughts from our studio.</p></section><section className="journal-page"><div className="journal-filter"><span>{posts.length} stories</span><span>Weddings · Pre-Weddings · Films · Photography</span></div><div className="journal-list">{posts.map((p,i)=><article className="journal-card" key={p.slug||p.title+i}><img src={p.image||p.featured_image||IMG('1519225421980-715cb0215aed')} alt={p.title}/><div><span className="post-cat">{p.category||'JOURNAL'}</span><h2>{p.title}</h2><p>{p.excerpt}</p><a className="text-link" href={p.slug?`/blog/${p.slug}`:'#'}>Read more →</a></div></article>)}</div></section></main><Footer/></>}
function BlogPage({slug,onEnquire}){const[post,setPost]=useState(null);const[loading,setLoading]=useState(true);useEffect(()=>{fetch('/api.php?action=post&slug='+encodeURIComponent(slug)).then(r=>r.json()).then(d=>{setPost(d.post||null);setLoading(false)}).catch(()=>setLoading(false))},[slug]);return <><Header onEnquire={onEnquire}/><main className="blog-page">{loading?<div className="loading">Loading story…</div>:!post?<div className="not-found"><p className="eyebrow">404</p><h1>Story not found.</h1><a className="btn gold" href="/journal">Back to Journal</a></div>:<><article className="blog-article"><div className="blog-head"><span className="post-cat">{post.category||'JOURNAL'}</span><h1>{post.title}</h1><p>{post.excerpt}</p><small>{post.published_at?new Date(post.published_at).toLocaleDateString('en-IN',{year:'numeric',month:'long',day:'numeric'}):''}</small></div>{post.featured_image&&<img className="blog-cover" src={post.featured_image} alt={post.title}/>}<div className="blog-content" dangerouslySetInnerHTML={{__html:post.content}}/></article><aside className="blog-cta"><p className="eyebrow">YOUR STORY NEXT?</p><h2>Let's create something <em>beautiful.</em></h2><button className="btn gold" onClick={()=>onEnquire()}>Enquire Now <span>→</span></button></aside></>}</main><Footer/></>}
function Home({onEnquire}){return <><Header onEnquire={onEnquire}/><main><Hero onEnquire={onEnquire}/><About/><Portraits/><Services onEnquire={onEnquire}/><Films onEnquire={onEnquire}/><Packages onEnquire={onEnquire}/><JournalPreview/><Testimonials/><Contact onEnquire={onEnquire}/></main><Footer/></>}
function App(){const[modal,setModal]=useState(false);const[service,setService]=useState('');const open=s=>{setService(s||'');setModal(true)};const path=location.pathname.replace(/\/+$/,'')||'/';let content=path==='/portfolio'?<PortfolioPage onEnquire={open}/>:path==='/journal'?<JournalPage onEnquire={open}/>:path.startsWith('/blog/')?<BlogPage slug={path.split('/').slice(2).join('/')} onEnquire={open}/>:<Home onEnquire={open}/>;return <><EnquiryModal open={modal} onClose={()=>setModal(false)} defaultService={service}/>{content}</>}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);