import { useState, useEffect, useRef, useCallback, useMemo, useReducer } from "react"; /* ═══════════════════════════════════════════════════════════════════════════ ROAMROUTE V1 — AI-POWERED TRAVEL PLANNER Smart Itineraries · Multi-city · Visa Checker · Budget Tracker Packing Lists · Weather Forecasts · Plan Comparison · PDF Export Social Sharing · Personalized AI · PWA · Team Collaboration · Debrief ═══════════════════════════════════════════════════════════════════════════ */ // ── TOKENS ──────────────────────────────────────────────────────────────────── const T = { gold:"#C9A96E", goldLight:"#EDD9A3", goldDark:"#A07840", bg:"#0D9488", bgCard:"#FFFFFF", bgCardHov:"rgba(201,169,110,0.08)", bgModal:"#FFFFFF", border:"rgba(201,169,110,0.35)", borderSub:"rgba(255,255,255,0.15)", text:"#FFFFFF", muted:"rgba(255,255,255,0.72)", faint:"rgba(255,255,255,0.45)", err:"#FFB3B3", ok:"#A7F3D0", warn:"#FDE68A", fd:"'Playfair Display',serif", fb:"'DM Sans',sans-serif", r:"14px", rs:"8px", tb:"all 0.22s cubic-bezier(0.4,0,0.2,1)", ts:"all 0.36s cubic-bezier(0.34,1.56,0.64,1)", }; // ── IMAGES ─────────────────────────────────────────────────────────────────── const IMGS = { paris:"https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=900&q=70", tokyo:"https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=900&q=70", bali:"https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=900&q=70", rome:"https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=900&q=70", "new york":"https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=900&q=70", london:"https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=900&q=70", barcelona:"https://images.unsplash.com/photo-1583422409516-2895a77efded?w=900&q=70", maldives:"https://images.unsplash.com/photo-1573843981267-be1999ff37cd?w=900&q=70", dubai:"https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=900&q=70", santorini:"https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?w=900&q=70", kyoto:"https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=900&q=70", iceland:"https://images.unsplash.com/photo-1476610182048-b716b8518aae?w=900&q=70", morocco:"https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?w=900&q=70", amsterdam:"https://images.unsplash.com/photo-1512470876302-972faa2aa9a4?w=900&q=70", thailand:"https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=900&q=70", singapore:"https://images.unsplash.com/photo-1525625293386-3f8f99389edd?w=900&q=70", default:"https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=900&q=70", }; const getImg = d => { const k = (d||"").toLowerCase(); for(const[n,v] of Object.entries(IMGS)) if(k.includes(n)) return v; return IMGS.default; }; const POPULAR = [ {name:"Paris",flag:"🇫🇷"},{name:"Tokyo",flag:"🇯🇵"},{name:"Bali",flag:"🇮🇩"}, {name:"New York",flag:"🇺🇸"},{name:"Santorini",flag:"🇬🇷"},{name:"Dubai",flag:"🇦🇪"}, {name:"Kyoto",flag:"🇯🇵"},{name:"Maldives",flag:"🇲🇻"},{name:"Barcelona",flag:"🇪🇸"}, {name:"Amsterdam",flag:"🇳🇱"},{name:"Morocco",flag:"🇲🇦"},{name:"Thailand",flag:"🇹🇭"}, ]; const OPT = { budget:[{v:"Budget",e:"💸"},{v:"Mid-range",e:"🏨"},{v:"Luxury",e:"✨"},{v:"Ultra-luxury",e:"💎"}], pace:[{v:"Relaxed",e:"🌿"},{v:"Balanced",e:"⚖️"},{v:"Action-packed",e:"🏃"}], interests:[ {v:"History & Culture",e:"🏛️"},{v:"Food & Dining",e:"🍽️"},{v:"Adventure",e:"🧗"}, {v:"Nature",e:"🌲"},{v:"Shopping",e:"🛍️"},{v:"Nightlife",e:"🎶"}, {v:"Wellness & Spa",e:"🧘"},{v:"Art & Museums",e:"🖼️"},{v:"Photography",e:"📸"},{v:"Beach & Water",e:"🏖️"}, ], accommodation:[{v:"Hotel",e:"🏩"},{v:"Boutique",e:"🏡"},{v:"Resort",e:"🏖️"},{v:"Airbnb",e:"🏠"}], dietary:[{v:"No restrictions",e:"🍴"},{v:"Vegetarian",e:"🥦"},{v:"Vegan",e:"🌱"},{v:"Halal",e:"🕌"},{v:"Gluten-Free",e:"🌾"}], style:[{v:"Solo explorer",e:"🎒"},{v:"Romantic",e:"💑"},{v:"Family fun",e:"👨‍👩‍👧"},{v:"Friend group",e:"🎉"},{v:"Business+leisure",e:"💼"},{v:"Adventure seeker",e:"🏔️"}], }; const PLANS = { free:{name:"Explorer",price:0,limit:1,color:T.muted,features:["1 plan/month","Basic itinerary","AI suggestions"]}, pro:{name:"Voyager",price:19,limit:999,color:T.gold,features:["Unlimited plans","Full day-by-day","PDF & email export","Saved trips","Weather forecasts","Refinement chat","Multi-city trips","Plan comparison"]}, elite:{name:"Concierge",price:49,limit:999,color:T.goldLight,features:["Everything in Pro","Priority AI","Visa checker","Collaboration links","Budget tracker","Packing lists","Post-trip debrief","White-glove support"]}, }; // ── CSS ─────────────────────────────────────────────────────────────────────── const CSS = ` @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{background:#0D9488;color:#FFFFFF;font-family:'DM Sans',sans-serif;overscroll-behavior:none;font-size:17px;font-weight:500;} button,input,textarea,select{font-family:inherit;-webkit-appearance:none;appearance:none;} button{cursor:pointer;border:none;background:none;color:inherit;} input,textarea{outline:none;border:none;} a{color:inherit;text-decoration:none;} img{display:block;max-width:100%;} ::-webkit-scrollbar{width:3px;height:3px;} ::-webkit-scrollbar-thumb{background:rgba(201,169,110,0.4);border-radius:2px;} input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.35);} .gold{background:linear-gradient(135deg,#C9A96E,#EDD9A3,#C9A96E);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .ms{color:#065F5A!important;} .gc,.gc *{color:#C9A96E!important;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .safe-bot{padding-bottom:max(16px,env(safe-area-inset-bottom));} .safe-top{padding-top:max(0px,env(safe-area-inset-top));} .ripple-wrap{position:relative;overflow:hidden;} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}} @keyframes slideR{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes twinkle{0%,100%{opacity:.1}50%{opacity:.55}} @keyframes ripple{to{transform:scale(4);opacity:0}} @keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}} @keyframes boardingPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,0.5)}70%{box-shadow:0 0 0 10px rgba(201,169,110,0)}} .pe{animation:fadeUp 0.36s cubic-bezier(0.4,0,0.2,1) both;} .se{animation:slideR 0.26s cubic-bezier(0.4,0,0.2,1) both;} .ske{background:linear-gradient(90deg,rgba(0,0,0,0.12) 25%,rgba(255,255,255,0.1) 50%,rgba(0,0,0,0.12) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;} :focus-visible{outline:2px solid rgba(201,169,110,0.8);outline-offset:3px;border-radius:6px;} `; // ── HOOKS ───────────────────────────────────────────────────────────────────── function useLS(k, init) { const [v,sv] = useState(()=>{try{const s=localStorage.getItem(k);return s?JSON.parse(s):init;}catch{return init;}}); useEffect(()=>{try{localStorage.setItem(k,JSON.stringify(v));}catch{}},[k,v]); return [v,sv]; } function useMQ(q){const[m,sm]=useState(()=>typeof window!=="undefined"?window.matchMedia(q).matches:false);useEffect(()=>{const mq=window.matchMedia(q);const h=e=>sm(e.matches);mq.addEventListener("change",h);return()=>mq.removeEventListener("change",h);},[q]);return m;} function useHaptic(){return useCallback((t="light")=>{if(navigator.vibrate)navigator.vibrate(t==="light"?10:t==="medium"?25:50);},[]);} function useRipple(ref){return useCallback((e)=>{if(!ref.current)return;const rect=ref.current.getBoundingClientRect();const r=document.createElement("span");const sz=Math.max(rect.width,rect.height);const x=(e.clientX||e.touches?.[0]?.clientX||rect.left+rect.width/2)-rect.left-sz/2;const y=(e.clientY||e.touches?.[0]?.clientY||rect.top+rect.height/2)-rect.top-sz/2;Object.assign(r.style,{position:"absolute",width:sz+"px",height:sz+"px",left:x+"px",top:y+"px",borderRadius:"50%",background:"rgba(201,169,110,0.22)",transform:"scale(0)",animation:"ripple 0.55s linear",pointerEvents:"none"});ref.current.appendChild(r);setTimeout(()=>r.remove(),600);},[ref]);} function useToast(){ const[ts,sts]=useState([]); const show=useCallback((msg,type="info",dur=3200)=>{const id=Date.now();sts(t=>[...t,{id,msg,type}]);setTimeout(()=>sts(t=>t.filter(x=>x.id!==id)),dur);},[]); return{toasts:ts,show}; } // ── AI CALL (Groq — free tier, no credit card required) ────────────────────── async function ai(prompt, max=1000) { const key = import.meta.env.VITE_GROQ_API_KEY; if (!key) throw new Error("Add VITE_GROQ_API_KEY to your .env file. Get a free key at console.groq.com"); const res = await fetch("https://api.groq.com/openai/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${key}` }, body: JSON.stringify({ model: "llama-3.3-70b-versatile", max_tokens: max, temperature: 0.7, messages: [{ role: "user", content: prompt }] }) }); if (!res.ok) { const e = await res.json(); throw new Error(e.error?.message || `Groq error ${res.status}`); } const d = await res.json(); return d.choices?.[0]?.message?.content || ""; } async function aiJSON(prompt, max=1000) { const t = await ai(prompt, max); const clean = t.replace(/```json\n?|```\n?/g, "").trim(); const match = clean.match(/\{[\s\S]*\}/); if (!match) throw new Error("No JSON in AI response"); return JSON.parse(match[0]); } // ── SIMULATED BACKEND (localStorage as DB) ──────────────────────────────────── const DB = { getUsers: ()=>JSON.parse(localStorage.getItem("vg4_users")||"{}"), saveUsers: u=>localStorage.setItem("vg4_users",JSON.stringify(u)), getUser: email=>{const u=DB.getUsers();return u[email]||null;}, upsertUser: (email,data)=>{const u=DB.getUsers();u[email]={...u[email],...data};DB.saveUsers(u);return u[email];}, getTrips: ()=>JSON.parse(localStorage.getItem("vg4_trips")||"[]"), saveTrip: trip=>{const ts=DB.getTrips();const idx=ts.findIndex(t=>t.id===trip.id);if(idx>=0)ts[idx]=trip;else ts.unshift(trip);localStorage.setItem("vg4_trips",JSON.stringify(ts.slice(0,30)));}, getUserTrips: email=>DB.getTrips().filter(t=>t.userEmail===email||!t.userEmail).slice(0,20), getSharedTrip: id=>DB.getTrips().find(t=>t.id===id)||null, }; // ── STRIPE SIMULATION ───────────────────────────────────────────────────────── async function simulateStripe(plan, user) { await new Promise(r=>setTimeout(r,1400)); const updated = DB.upsertUser(user.email,{plan,stripeSubscribed:true,subscribedAt:Date.now()}); return updated; } // ── EMAIL SIMULATION ────────────────────────────────────────────────────────── async function sendItineraryEmail(email, plan, form) { await new Promise(r=>setTimeout(r,800)); // In production: POST to /api/send-email with SendGrid/Resend console.log(`[EMAIL] Sent itinerary to ${email}:`, form.destination); return true; } // ── AFFILIATE LINKS ─────────────────────────────────────────────────────────── const aff = (dest,org)=>({ flights:`https://www.skyscanner.com/flights/${encodeURIComponent(org)}/${encodeURIComponent(dest)}/`, hotel:`https://www.booking.com/searchresults.html?ss=${encodeURIComponent(dest)}`, car:`https://www.rentalcars.com/?country=${encodeURIComponent(dest)}`, activities:`https://www.viator.com/searchResults/all?text=${encodeURIComponent(dest)}`, insurance:`https://www.worldnomads.com/`, transfers:`https://www.kiwitaxi.com/?destination=${encodeURIComponent(dest)}`, }); // ── STARS ───────────────────────────────────────────────────────────────────── function Stars(){ const s=useMemo(()=>Array.from({length:55},()=>({top:Math.random()*100,left:Math.random()*100,sz:Math.random()*1.6+0.4,del:Math.random()*8,dur:Math.random()*4+3})),[]); return(
{s.map((x,i)=>
)}
); } // ── TOAST ───────────────────────────────────────────────────────────────────── function Toast({toasts}){ return(
{toasts.map(t=>(
{t.type==="error"?"⚠️":t.type==="success"?"✓":t.type==="warn"?"⚡":"✦"}{t.msg}
))}
); } // ── ATOMS ───────────────────────────────────────────────────────────────────── function G({children,sz}){return {children};} function Ske({w="100%",h=16,r=6,mb=0}){return
;} function Btn({children,onClick,disabled,loading,variant="primary",size="lg",icon,full=true,style:sx={}}){ const ref=useRef(); const rp=useRipple(ref); const hp=useHaptic(); const ghost=variant==="ghost",sec=variant==="secondary",danger=variant==="danger"; return( ); } function Card({children,style:sx={},onClick,hov}){ const[h,sh]=useState(false); return(
hov&&sh(true)} onMouseLeave={()=>hov&&sh(false)} style={{background:h?T.bgCardHov:T.bgCard,border:`1px solid ${h?T.border:"rgba(201,169,110,0.25)"}`,borderRadius:T.r,transition:T.tb,transform:h&&hov?"translateY(-2px)":"none",cursor:onClick?"pointer":"default",...sx}}>{children}
); } function Inp({label,value,onChange,placeholder,icon,hint,type="text",required,autoFocus,inputMode,multiline,rows=3}){ const[f,sf]=useState(false);const ref=useRef(); useEffect(()=>{if(autoFocus&&ref.current)setTimeout(()=>ref.current?.focus(),220);},[autoFocus]); const shared={ref,value,onChange:e=>onChange(e.target.value),placeholder,onFocus:()=>sf(true),onBlur:()=>sf(false),"aria-label":label||placeholder,style:{width:"100%",minHeight:multiline?undefined:52,padding:icon?"13px 16px 13px 46px":"13px 16px",background:f?"rgba(201,169,110,0.07)":"rgba(0,0,0,0.12)",border:`1.5px solid ${f?T.gold:T.borderSub}`,borderRadius:T.rs,color:T.text,fontSize:18,transition:T.tb,resize:multiline?"vertical":"none",lineHeight:1.6}}; return(
{label&&}
{icon&&{icon}} {multiline?