/* Superior Car Rental — Reservation flow, Chauffeur, About, Contact, How */

/* =========================
   RESERVATION MODAL (3-step)
   ========================= */
const ReservationModal = ({ ctx, onClose, onComplete }) => {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    pickupDate: ctx.pickupDate, returnDate: ctx.returnDate, pickupLoc: ctx.pickupLoc,
    firstName: "", lastName: "", email: "", phone: "+971 ", country: "AE",
    licence: "uae", chauffeur: false, addDriver: false, childSeat: false, simCard: false,
    notes: ""
  });
  const car = ctx.car;
  const days = Math.max(1, Math.round((new Date(data.returnDate) - new Date(data.pickupDate)) / 86400000));
  const base = car.fromRate * days;
  const addOns = (data.chauffeur ? 800 * days : 0) + (data.addDriver ? 75 * days : 0) + (data.childSeat ? 50 * days : 0) + (data.simCard ? 35 * days : 0);
  const total = base + addOns;

  const next = () => setStep(Math.min(2, step+1));
  const prev = () => setStep(Math.max(0, step-1));

  const finish = () => {
    onComplete({ ...data, car, days, base, addOns, total });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} data-screen-label="reservation-modal">
        <div className="modal-head">
          <div>
            <div className="eyebrow gold" style={{color:"var(--accent)",marginBottom:6}}>Reservation</div>
            <div style={{fontSize:20,fontWeight:600,letterSpacing:"-0.02em"}}>
              {step === 0 && "Dates & pickup"}
              {step === 1 && "Add-ons & options"}
              {step === 2 && "Your details"}
            </div>
          </div>
          <button className="modal-close" onClick={onClose}><Icon.Close/></button>
        </div>

        <div className="modal-body">
          <div className="steps">
            <div className={`step ${step>=0?(step===0?"curr":"done"):""}`}/>
            <div className={`step ${step>=1?(step===1?"curr":"done"):""}`}/>
            <div className={`step ${step>=2?(step===2?"curr":"done"):""}`}/>
          </div>

          {/* Summary always visible */}
          <div className="res-summary">
            <img src={car.image} alt=""/>
            <div>
              <div className="car-card-make" style={{color:"var(--accent)"}}>{car.make}</div>
              <div className="name">{car.model}</div>
              <div className="specs">{car.year} · {car.power} · {car.transmission.split(" ")[0]}</div>
              <div style={{marginTop:8,display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
                <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)"}}>
                  {fmtDate(data.pickupDate)} → {fmtDate(data.returnDate)} · {days} day{days>1?"s":""}
                </div>
                <div style={{fontFamily:"var(--font-display)",fontWeight:600}}>
                  <Aed/> {SCR_DATA.formatAED(total)}
                </div>
              </div>
            </div>
          </div>

          {step === 0 && (
            <div>
              <div className="form-row">
                <div className="form-field">
                  <label>Pickup date</label>
                  <input type="date" value={data.pickupDate} onChange={e => setData({...data, pickupDate: e.target.value})}/>
                </div>
                <div className="form-field">
                  <label>Return date</label>
                  <input type="date" value={data.returnDate} onChange={e => setData({...data, returnDate: e.target.value})}/>
                </div>
              </div>
              <div className="form-field" style={{marginTop:14}}>
                <label>Pickup location</label>
                <div className="pickup-options">
                  {SCR_DATA.PICKUP_LOCATIONS.map(p => (
                    <button key={p.id} type="button"
                      className={`pickup-opt ${data.pickupLoc===p.id?"on":""}`}
                      onClick={() => setData({...data, pickupLoc: p.id})}>
                      <div className="label">{p.label}</div>
                      <div className="desc">{p.desc}</div>
                    </button>
                  ))}
                </div>
              </div>
              <div style={{display:"flex",gap:10,marginTop:18,padding:14,background:"var(--noir)",border:"1px solid var(--line-2)",borderRadius:2}}>
                <Icon.Sparkle className="icon-sm" style={{color:"var(--accent)",flex:"0 0 auto",marginTop:2}}/>
                <div style={{fontSize:12,color:"var(--muted-2)",lineHeight:1.5}}>
                  Delivery is included — we'll bring the {car.model} to your chosen pickup at the start of your rental and collect it at the end. No counter visit needed.
                </div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <Checkbox checked={data.chauffeur} onChange={v => setData({...data, chauffeur: v})}
                title="Add a chauffeur" desc="English/Arabic licensed driver, available 24h."
                price={`+ AED 800 / day`}/>
              <Checkbox checked={data.addDriver} onChange={v => setData({...data, addDriver: v})}
                title="Additional driver" desc="Add a second registered driver to the rental."
                price={`+ AED 75 / day`}/>
              <Checkbox checked={data.childSeat} onChange={v => setData({...data, childSeat: v})}
                title="Child seat" desc="ISOFIX, suitable for 0–4 years."
                price={`+ AED 50 / day`}/>
              <Checkbox checked={data.simCard} onChange={v => setData({...data, simCard: v})}
                title="UAE data SIM" desc="Pre-activated 50GB Etisalat SIM card."
                price={`+ AED 35 / day`}/>
              <div className="form-field" style={{marginTop:18}}>
                <label>Notes for our team (optional)</label>
                <textarea value={data.notes} onChange={e => setData({...data, notes: e.target.value})}
                  placeholder="e.g. preferred delivery time, plate preference, occasion…"/>
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="form-row">
                <div className="form-field">
                  <label>First name</label>
                  <input value={data.firstName} onChange={e => setData({...data, firstName: e.target.value})} placeholder="Aisha"/>
                </div>
                <div className="form-field">
                  <label>Last name</label>
                  <input value={data.lastName} onChange={e => setData({...data, lastName: e.target.value})} placeholder="Al Mansouri"/>
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Email</label>
                  <input type="email" value={data.email} onChange={e => setData({...data, email: e.target.value})} placeholder="you@example.com"/>
                </div>
                <div className="form-field">
                  <label>Phone (WhatsApp)</label>
                  <input value={data.phone} onChange={e => setData({...data, phone: e.target.value})} placeholder="+971 …"/>
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Country of residence</label>
                  <select value={data.country} onChange={e => setData({...data, country: e.target.value})}>
                    <option value="AE">United Arab Emirates</option>
                    <option value="SA">Saudi Arabia</option>
                    <option value="GB">United Kingdom</option>
                    <option value="US">United States</option>
                    <option value="RU">Russia</option>
                    <option value="CN">China</option>
                    <option value="DE">Germany</option>
                    <option value="FR">France</option>
                    <option value="IN">India</option>
                    <option value="OTHER">Other</option>
                  </select>
                </div>
                <div className="form-field">
                  <label>Driving licence</label>
                  <select value={data.licence} onChange={e => setData({...data, licence: e.target.value})}>
                    <option value="uae">UAE licence</option>
                    <option value="idp">Home licence + IDP</option>
                    <option value="gcc">GCC licence</option>
                  </select>
                </div>
              </div>
              <div style={{marginTop:18,padding:14,background:"var(--noir)",border:"1px solid var(--line-2)",borderRadius:2,fontSize:12,color:"var(--muted-2)",lineHeight:1.5}}>
                <div style={{display:"flex",gap:10,marginBottom:8}}>
                  <Icon.Shield className="icon-sm" style={{color:"var(--accent)",flex:"0 0 auto",marginTop:2}}/>
                  <div><b style={{color:"var(--paper)"}}>No card charged yet.</b> We'll confirm availability and contact you within 30 minutes (24h support). Refundable deposit collected at delivery only.</div>
                </div>
              </div>
            </div>
          )}
        </div>

        <div className="modal-foot">
          <Button kind="ghost" className="dark" onClick={step===0?onClose:prev}>
            {step===0 ? "Cancel" : <><Icon.ArrowL className="icon-sm"/> Back</>}
          </Button>
          <div style={{display:"flex",alignItems:"center",gap:14}}>
            <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)"}}>STEP {step+1} / 3</div>
            {step < 2 ? (
              <Button kind="primary" onClick={next}>Continue <Icon.Arrow/></Button>
            ) : (
              <Button kind="primary" onClick={finish}
                disabled={!data.firstName || !data.email || data.phone.trim().length < 5}>
                Confirm reservation <Icon.Arrow/>
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

const Checkbox = ({ checked, onChange, title, desc, price }) => (
  <button type="button" onClick={() => onChange(!checked)}
    style={{
      display:"flex",alignItems:"flex-start",gap:14,padding:"16px 18px",
      width:"100%",textAlign:"left",
      background: checked?"rgba(242,169,22,0.06)":"var(--noir)",
      border:`1px solid ${checked?"var(--accent)":"var(--line-2)"}`,
      borderRadius:2, marginBottom:8, transition:"all 160ms"
    }}>
    <div style={{
      width:18,height:18,flex:"0 0 18px",borderRadius:3,marginTop:2,
      border:`1.5px solid ${checked?"var(--accent)":"var(--line-3)"}`,
      background: checked?"var(--accent)":"transparent",
      display:"flex",alignItems:"center",justifyContent:"center",
      color:"var(--accent-ink)"
    }}>
      {checked && <Icon.Check className="icon-sm"/>}
    </div>
    <div style={{flex:1}}>
      <div style={{display:"flex",justifyContent:"space-between",gap:14}}>
        <div style={{fontWeight:600,fontSize:14}}>{title}</div>
        <div style={{fontFamily:"var(--font-mono)",fontSize:12,color:"var(--accent)"}}>{price}</div>
      </div>
      <div style={{fontSize:12,color:"var(--muted-2)",marginTop:3,lineHeight:1.5}}>{desc}</div>
    </div>
  </button>
);

/* =========================
   CONFIRMATION SCREEN
   ========================= */
const ConfirmationScreen = ({ data, navigate }) => {
  const code = "SCR-" + Date.now().toString(36).toUpperCase().slice(-6);
  const car = data.car;
  useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <div data-screen-label="confirmation" style={{paddingTop:120,paddingBottom:80,minHeight:"100vh"}}>
      <div className="shell" style={{maxWidth:780}}>
        <div className="confirm-success">
          <Icon.Check className="icon-lg"/>
        </div>
        <Eyebrow gold>Reservation received</Eyebrow>
        <h1 style={{marginTop:18,fontSize:"clamp(40px,5vw,68px)"}}>
          Thanks, {data.firstName}.<br/>
          <span className="serif-it" style={{color:"var(--accent)"}}>Your car is on the way.</span>
        </h1>
        <p style={{color:"var(--muted-2)",marginTop:18,fontSize:17,lineHeight:1.55,maxWidth:560}}>
          A member of our team will reach out within 30 minutes by WhatsApp to confirm. Your reference is <span style={{fontFamily:"var(--font-mono)",color:"var(--accent)"}}>{code}</span>.
        </p>

        <div style={{marginTop:40,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4,overflow:"hidden"}}>
          <div style={{display:"grid",gridTemplateColumns:"1.2fr 1fr"}}>
            <div style={{aspectRatio:"16/10",overflow:"hidden",background:"#000"}}>
              <img src={car.image} alt={car.model} style={{width:"100%",height:"100%",objectFit:"cover"}}/>
            </div>
            <div style={{padding:28,display:"flex",flexDirection:"column",justifyContent:"center"}}>
              <div className="car-card-make" style={{color:"var(--accent)"}}>{car.make}</div>
              <div style={{fontSize:24,fontWeight:600,letterSpacing:"-0.02em",marginTop:2}}>{car.model}</div>
              <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",marginTop:6,letterSpacing:"0.1em"}}>
                {car.year} · {car.color}
              </div>
            </div>
          </div>
          <div style={{borderTop:"1px solid var(--line-2)",padding:"22px 28px",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24}}>
            <div>
              <div className="eyebrow">Pickup</div>
              <div style={{marginTop:6,fontWeight:600}}>{fmtDate(data.pickupDate)}</div>
              <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",marginTop:2}}>
                {SCR_DATA.PICKUP_LOCATIONS.find(p=>p.id===data.pickupLoc)?.label}
              </div>
            </div>
            <div>
              <div className="eyebrow">Return</div>
              <div style={{marginTop:6,fontWeight:600}}>{fmtDate(data.returnDate)}</div>
              <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",marginTop:2}}>
                {data.days} day{data.days>1?"s":""}
              </div>
            </div>
            <div>
              <div className="eyebrow">Indicative total</div>
              <div style={{marginTop:6,fontWeight:600,fontFamily:"var(--font-display)",fontSize:18}}>
                <Aed/> {SCR_DATA.formatAED(data.total)}
              </div>
              <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",marginTop:2}}>
                Confirmed at booking
              </div>
            </div>
            <div>
              <div className="eyebrow">Deposit (refundable)</div>
              <div style={{marginTop:6,fontWeight:600,fontFamily:"var(--font-display)",fontSize:18}}>
                <Aed/> {SCR_DATA.formatAED(car.deposit)}
              </div>
              <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",marginTop:2}}>
                Held at delivery
              </div>
            </div>
          </div>
        </div>

        <div style={{marginTop:32,display:"flex",gap:10,flexWrap:"wrap"}}>
          <Button kind="whatsapp" size="lg" onClick={() => window.open(waLink(`Hi Superior — ref ${code}. ${data.firstName} ${data.lastName} confirming ${car.year} ${car.make} ${car.model} from ${fmtDate(data.pickupDate)}.`))}>
            <Icon.Whatsapp/> Continue on WhatsApp
          </Button>
          <Button kind="ghost" size="lg" onClick={() => navigate({name:"fleet"})}>
            Back to fleet
          </Button>
        </div>

        <div style={{marginTop:48,padding:24,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:20}}>
          <div>
            <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--accent)",letterSpacing:"0.15em",textTransform:"uppercase",marginBottom:8}}>01 — Confirmation</div>
            <div style={{fontSize:13,color:"var(--muted-2)",lineHeight:1.55}}>WhatsApp from our team within 30 minutes (24/7).</div>
          </div>
          <div>
            <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--accent)",letterSpacing:"0.15em",textTransform:"uppercase",marginBottom:8}}>02 — Documents</div>
            <div style={{fontSize:13,color:"var(--muted-2)",lineHeight:1.55}}>Quick photo of your driving licence &amp; passport via WhatsApp.</div>
          </div>
          <div>
            <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--accent)",letterSpacing:"0.15em",textTransform:"uppercase",marginBottom:8}}>03 — Delivery</div>
            <div style={{fontSize:13,color:"var(--muted-2)",lineHeight:1.55}}>We hand you the keys at your chosen pickup. Drive away.</div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* =========================
   CHAUFFEUR SCREEN
   ========================= */
const ChauffeurScreen = ({ navigate }) => {
  useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <div data-screen-label="chauffeur" style={{paddingTop:120,paddingBottom:80,minHeight:"100vh"}}>
      <div className="shell-wide">
        <Eyebrow gold>Rent with a chauffeur</Eyebrow>
        <div style={{display:"grid",gridTemplateColumns:"1.2fr 1fr",gap:60,alignItems:"flex-end",marginTop:20}}>
          <h1 style={{fontSize:"clamp(48px,6vw,84px)"}}>
            For the days you'd<br/>
            <span className="serif-it" style={{color:"var(--accent)"}}>rather be driven.</span>
          </h1>
          <p style={{color:"var(--muted-2)",fontSize:17,lineHeight:1.6}}>
            English &amp; Arabic licensed chauffeurs, professionally trained. Vehicles sanitized daily. Driver included, no deposit. Tier by duration: airport one-way, half-day, full-day.
          </p>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:18,marginTop:60}}>
          {[
            {i: Icon.Pin, t: "Airport transfers", d: "DXB / DWC pickup & drop-off, meet & greet at the gate."},
            {i: Icon.Sparkle, t: "Corporate", d: "Half-day or full-day at-disposal vehicles for executives."},
            {i: Icon.Heart, t: "Weddings & events", d: "Phantom or Maybach for the most-photographed moments."},
            {i: Icon.Truck, t: "Private tours", d: "Dubai sights, Hatta drives, Abu Dhabi day-trips."}
          ].map((s, i) => (
            <div key={i} style={{padding:24,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4}}>
              <s.i/>
              <div style={{marginTop:18,fontWeight:600,fontSize:16}}>{s.t}</div>
              <div style={{marginTop:8,fontSize:13,color:"var(--muted-2)",lineHeight:1.55}}>{s.d}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:80}}>
          <h2 style={{fontSize:"clamp(28px,3vw,40px)",marginBottom:36}}>The chauffeur fleet</h2>
          <div className="chauf-grid">
            {SCR_DATA.CHAUFFEUR_FLEET.map(c => (
              <div key={c.id} className="chauf-card">
                <div className="chauf-card-media">
                  <img src={c.image} alt={c.name}/>
                </div>
                <div className="chauf-card-body">
                  <div className="car-card-make" style={{color:"var(--accent)"}}>{c.name.split(" ")[0]}</div>
                  <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.02em",marginTop:2}}>{c.name.split(" ").slice(1).join(" ")}</div>
                  <div style={{marginTop:10,color:"var(--muted-2)",fontSize:14,lineHeight:1.5}}>{c.desc}</div>
                  <div className="chauf-tiers">
                    {c.tiers.map(t => (
                      <div key={t.d} className="chauf-tier">
                        <div className="dur">{t.d}</div>
                        <div className="amt"><span className="ccy">AED</span> {SCR_DATA.formatAED(t.v)}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{display:"flex",gap:8,marginTop:18}}>
                    <Button kind="primary" style={{flex:1}} onClick={() => window.open(waLink(`Hi Superior, I'd like the ${c.name} chauffeur service.`))}>
                      <Icon.Whatsapp className="icon-sm"/> Enquire
                    </Button>
                    <Button kind="ghost" onClick={() => window.open("tel:+971567671411")}>
                      <Icon.Phone className="icon-sm"/>
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginTop:60,padding:32,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4,display:"flex",justifyContent:"space-between",alignItems:"center",gap:32,flexWrap:"wrap"}}>
          <div>
            <div className="eyebrow gold" style={{color:"var(--accent)"}}>Not seeing what you need?</div>
            <div style={{fontSize:22,fontWeight:600,marginTop:6,letterSpacing:"-0.02em"}}>Custom packages on request</div>
            <div style={{color:"var(--muted-2)",marginTop:8,fontSize:14}}>Multi-day, wedding convoys, airport-meet-greet packages with assistants.</div>
          </div>
          <Button kind="primary" size="lg" onClick={() => window.open(waLink("Hi Superior, I'd like a custom chauffeur package."))}>
            <Icon.Whatsapp/> Tell us what you need
          </Button>
        </div>
      </div>
    </div>
  );
};

/* =========================
   ABOUT
   ========================= */
const AboutScreen = ({ navigate }) => {
  useEffect(() => { window.scrollTo(0, 0); }, []);
  return (
    <div data-screen-label="about" style={{paddingTop:120,paddingBottom:80}}>
      <div className="shell" style={{maxWidth:980}}>
        <Eyebrow gold>About</Eyebrow>
        <h1 style={{marginTop:20,fontSize:"clamp(48px,6vw,80px)"}}>
          A boutique car rental<br/>
          <span className="serif-it" style={{color:"var(--accent)"}}>built around your journey.</span>
        </h1>
        <div style={{display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:60,marginTop:60,alignItems:"flex-start"}}>
          <div>
            <p style={{fontSize:18,color:"var(--muted-2)",lineHeight:1.7}}>
              Superior Car Rental was founded in Dubai in <b style={{color:"var(--paper)"}}>2019</b>. We started small — a handful of cars, one warehouse in Al Quoz, a phone that never stopped ringing. The model was simple: the right car, delivered to your door, picked up when you're done. No counter. No paperwork. No queue.
            </p>
            <p style={{fontSize:18,color:"var(--muted-2)",lineHeight:1.7,marginTop:24}}>
              Today we hold 120+ cars across 30+ marques — from the BMW M4 to the Bugatti, from the Ghost to the G63 — with the same service model. Self-drive or with a licensed chauffeur. Free delivery across the UAE. 24/7 WhatsApp.
            </p>
            <p style={{fontSize:18,color:"var(--muted-2)",lineHeight:1.7,marginTop:24}}>
              We're an <b style={{color:"var(--paper)"}}>independent rental company</b> — not affiliated with any vehicle manufacturer. We pick the cars our clients want to drive. And the ones we'd want to drive ourselves.
            </p>
          </div>
          <div style={{aspectRatio:"3/4",overflow:"hidden",borderRadius:4}}>
            <img src="assets/car-lamborghini-huracan-evo-spyder.webp" alt="" style={{width:"100%",height:"100%",objectFit:"cover"}}/>
          </div>
        </div>

        <div style={{marginTop:80,paddingTop:48,borderTop:"1px solid var(--line-2)"}}>
          <Eyebrow gold>What we stand for</Eyebrow>
          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:32,marginTop:32}}>
            {[
              {n: "01", t: "The right car", d: "We hold the cars Dubai actually rents — supercars, sedans, SUVs, off-roaders. No rebranded fleet-vehicles dressed up as luxury."},
              {n: "02", t: "Delivered", d: "Free delivery anywhere in the UAE. The car comes to you — at the gate, at the hotel, at the airport. Returned the same way."},
              {n: "03", t: "Always reachable", d: "One WhatsApp number, answered any hour of any day. The fastest path between you and your car."}
            ].map(v => (
              <div key={v.n}>
                <div style={{fontFamily:"var(--font-mono)",fontSize:12,color:"var(--accent)",letterSpacing:"0.15em"}}>{v.n}</div>
                <div style={{marginTop:14,fontSize:22,fontWeight:600,letterSpacing:"-0.02em"}}>{v.t}</div>
                <div style={{marginTop:10,color:"var(--muted-2)",fontSize:14,lineHeight:1.6}}>{v.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* =========================
   HOW IT WORKS
   ========================= */
const HowScreen = ({ navigate }) => {
  useEffect(() => { window.scrollTo(0, 0); }, []);
  const steps = [
    { n: "01", t: "Choose a car", d: "Browse the fleet — by body, brand or budget. Every car page shows the indicative rate, mileage cap and deposit." },
    { n: "02", t: "Check availability", d: "Pick your dates and pickup location. Continue to Reserve or jump straight to WhatsApp." },
    { n: "03", t: "We deliver", d: "Free delivery to your hotel, residence, DXB or any UAE address. Quick licence + passport check. Refundable deposit collected on arrival." },
    { n: "04", t: "Drive", d: "It's yours. Salik is auto-billed at our pickup rate. Anything happens? One WhatsApp number, 24/7. Collected at the end of your rental." }
  ];
  return (
    <div data-screen-label="how" style={{paddingTop:120,paddingBottom:80}}>
      <div className="shell" style={{maxWidth:1080}}>
        <Eyebrow gold>How it works</Eyebrow>
        <h1 style={{marginTop:20,fontSize:"clamp(48px,6vw,80px)"}}>
          Four steps,<br/>
          <span className="serif-it" style={{color:"var(--accent)"}}>no counter.</span>
        </h1>
        <div style={{marginTop:60}}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display:"grid",gridTemplateColumns:"100px 1fr 1fr",gap:32,
              padding:"40px 0",borderBottom: i<steps.length-1?"1px solid var(--line-2)":"none",
              alignItems:"flex-start"
            }}>
              <div style={{fontFamily:"var(--font-mono)",fontSize:14,color:"var(--accent)",letterSpacing:"0.15em"}}>{s.n}</div>
              <h2 style={{fontSize:"clamp(28px,3vw,42px)"}}>{s.t}</h2>
              <p style={{color:"var(--muted-2)",fontSize:16,lineHeight:1.6,paddingTop:12}}>{s.d}</p>
            </div>
          ))}
        </div>

        <div style={{marginTop:80}}>
          <Eyebrow gold>Requirements</Eyebrow>
          <h2 style={{marginTop:16,fontSize:"clamp(28px,3vw,42px)"}}>What you'll need to drive.</h2>
          <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18,marginTop:32}}>
            {[
              {t: "Valid driving licence", d: "UAE residents: UAE-issued licence. Visitors: home licence plus a valid International Driving Permit (IDP)."},
              {t: "Passport / Emirates ID", d: "Original passport (visitors) or Emirates ID (residents). Quick photo by WhatsApp at delivery."},
              {t: "Refundable security deposit", d: "Held at delivery. AED 2,000 for most cars; supercars and Rolls-Royce models higher. Returned at car pickup."},
              {t: "Mileage cap", d: "Typically 250 km/day, included. Beyond that — billed at the pickup rate."}
            ].map((r, i) => (
              <div key={i} style={{padding:24,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4}}>
                <Icon.Check style={{color:"var(--accent)"}}/>
                <div style={{marginTop:14,fontWeight:600,fontSize:16}}>{r.t}</div>
                <div style={{marginTop:6,color:"var(--muted-2)",fontSize:13,lineHeight:1.55}}>{r.d}</div>
              </div>
            ))}
          </div>
          <div style={{marginTop:24,padding:16,background:"var(--noir)",border:"1px solid var(--line-2)",borderRadius:2,fontSize:12,color:"var(--muted-2)",fontFamily:"var(--font-mono)",letterSpacing:"0.02em",lineHeight:1.5}}>
            Note: minimum age, insurance excess and accepted document specifics vary by car &amp; nationality. Confirm at booking — we'll cover everything by WhatsApp before delivery.
          </div>
        </div>
      </div>
    </div>
  );
};

/* =========================
   CONTACT
   ========================= */
const ContactScreen = ({ navigate }) => {
  const [form, setForm] = useState({ name: "", phone: "", message: "" });
  const [sent, setSent] = useState(false);
  useEffect(() => { window.scrollTo(0, 0); }, []);

  return (
    <div data-screen-label="contact" style={{paddingTop:120,paddingBottom:80,minHeight:"100vh"}}>
      <div className="shell-wide">
        <Eyebrow gold>Contact</Eyebrow>
        <div style={{display:"grid",gridTemplateColumns:"1.3fr 1fr",gap:80,alignItems:"flex-start",marginTop:20}}>
          <div>
            <h1 style={{fontSize:"clamp(48px,6vw,80px)"}}>
              One number.<br/>
              <span className="serif-it" style={{color:"var(--accent)"}}>Answered anytime.</span>
            </h1>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24,marginTop:48}}>
              <div style={{padding:24,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4}}>
                <Icon.Whatsapp/>
                <div style={{marginTop:16,fontFamily:"var(--font-mono)",fontSize:10,color:"var(--muted-2)",letterSpacing:"0.15em",textTransform:"uppercase"}}>WhatsApp / Call</div>
                <a href="tel:+971567671411" style={{display:"block",marginTop:8,fontSize:24,fontWeight:600,letterSpacing:"-0.01em"}}>+971 56 767 1411</a>
                <div style={{marginTop:10,fontSize:12,color:"var(--muted-2)"}}>One number for both. Answered 24/7.</div>
              </div>
              <div style={{padding:24,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4}}>
                <Icon.Pin/>
                <div style={{marginTop:16,fontFamily:"var(--font-mono)",fontSize:10,color:"var(--muted-2)",letterSpacing:"0.15em",textTransform:"uppercase"}}>Visit us</div>
                <div style={{marginTop:8,fontSize:18,fontWeight:600,letterSpacing:"-0.01em",lineHeight:1.3}}>Warehouse 89,<br/>17A Street</div>
                <div style={{marginTop:10,fontSize:12,color:"var(--muted-2)"}}>Al Quoz Industrial Area 3, Dubai, UAE</div>
              </div>
            </div>

            {/* Map placeholder */}
            <div style={{marginTop:24,aspectRatio:"16/9",background:"var(--ink-2)",border:"1px solid var(--line-2)",borderRadius:4,position:"relative",overflow:"hidden"}}>
              <div style={{
                position:"absolute",inset:0,
                background: `
                  repeating-linear-gradient(0deg, transparent 0 78px, var(--line-2) 78px 79px),
                  repeating-linear-gradient(90deg, transparent 0 78px, var(--line-2) 78px 79px),
                  linear-gradient(135deg, var(--noir), var(--ink))`
              }}/>
              {/* Fake road */}
              <div style={{position:"absolute",left:"10%",right:"15%",top:"55%",height:1,background:"var(--accent)",opacity:0.6}}/>
              <div style={{position:"absolute",left:"22%",top:"15%",bottom:"40%",width:1,background:"var(--accent)",opacity:0.4}}/>
              {/* Pin */}
              <div style={{position:"absolute",left:"42%",top:"45%",display:"flex",flexDirection:"column",alignItems:"center",color:"var(--accent)"}}>
                <Icon.Pin/>
                <div style={{marginTop:6,padding:"4px 10px",background:"var(--accent)",color:"var(--accent-ink)",fontFamily:"var(--font-mono)",fontSize:10,letterSpacing:"0.15em",borderRadius:2,whiteSpace:"nowrap"}}>SUPERIOR · AL QUOZ 3</div>
              </div>
              <div style={{position:"absolute",left:18,bottom:18,fontFamily:"var(--font-mono)",fontSize:10,letterSpacing:"0.15em",color:"var(--muted-2)"}}>
                25.1325° N · 55.2245° E · TO CONFIRM
              </div>
            </div>

            <div style={{marginTop:24,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
              {[
                {t:"Service area", d:"Dubai, Abu Dhabi, Sharjah & UAE-wide delivery"},
                {t:"Languages", d:"English · العربية · Русский · 中文"},
                {t:"Hours", d:"24/7 WhatsApp · delivery on request"}
              ].map((x,i) => (
                <div key={i}>
                  <div className="eyebrow">{x.t}</div>
                  <div style={{marginTop:6,fontSize:13}}>{x.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Form */}
          <div style={{position:"sticky",top:120,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4,padding:32}}>
            {!sent ? (
              <>
                <div className="eyebrow gold" style={{color:"var(--accent)"}}>Send a message</div>
                <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.02em",marginTop:6,marginBottom:22}}>Or just message us</div>
                <div className="form-field" style={{marginBottom:14}}>
                  <label>Your name</label>
                  <input value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
                </div>
                <div className="form-field" style={{marginBottom:14}}>
                  <label>Phone (WhatsApp)</label>
                  <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+971 …"/>
                </div>
                <div className="form-field" style={{marginBottom:18}}>
                  <label>How can we help?</label>
                  <textarea value={form.message} onChange={e => setForm({...form, message: e.target.value})}
                    placeholder="e.g. Looking for a Lamborghini Huracán from 5–7 June, delivered to Atlantis."/>
                </div>
                <Button kind="primary" size="lg" style={{width:"100%"}}
                  onClick={() => { setSent(true); }}
                  disabled={!form.name || !form.message}>
                  Send <Icon.Arrow/>
                </Button>
                <div style={{display:"flex",gap:8,marginTop:10}}>
                  <Button kind="whatsapp" style={{flex:1}} onClick={() => window.open(waLink(form.message || "Hi Superior Rental"))}>
                    <Icon.Whatsapp className="icon-sm"/> Or WhatsApp
                  </Button>
                </div>
              </>
            ) : (
              <div style={{textAlign:"center",padding:"30px 10px"}}>
                <div style={{width:56,height:56,margin:"0 auto 18px",borderRadius:"50%",background:"var(--accent)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--accent-ink)"}}>
                  <Icon.Check className="icon-lg"/>
                </div>
                <div style={{fontSize:20,fontWeight:600,letterSpacing:"-0.02em"}}>Message sent.</div>
                <div style={{color:"var(--muted-2)",marginTop:10,fontSize:14,lineHeight:1.6}}>We'll be in touch within the hour. For anything urgent — WhatsApp is fastest.</div>
                <Button kind="ghost" className="dark" style={{marginTop:24}} onClick={() => { setSent(false); setForm({name:"",phone:"",message:""}); }}>Send another</Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

/* =========================
   BRANDS SCREEN
   ========================= */
const BrandsScreen = ({ navigate }) => {
  useEffect(() => { window.scrollTo(0, 0); }, []);
  const byBrand = useMemo(() => {
    const m = {};
    SCR_DATA.FLEET.forEach(c => { (m[c.make] = m[c.make] || []).push(c); });
    return m;
  }, []);
  return (
    <div data-screen-label="brands" style={{paddingTop:120,paddingBottom:80}}>
      <div className="shell-wide">
        <Eyebrow gold>Brands</Eyebrow>
        <h1 style={{marginTop:20,fontSize:"clamp(48px,6vw,80px)"}}>
          30+ marques.<br/>
          <span className="serif-it" style={{color:"var(--accent)"}}>One showroom.</span>
        </h1>
        <p style={{maxWidth:600,marginTop:24,color:"var(--muted-2)",fontSize:17,lineHeight:1.6}}>
          From Italian supercars to British luxury sedans, German engineering to American power. Pick a marque and see what we have on the floor.
        </p>

        <div style={{marginTop:60,display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {Object.entries(byBrand).map(([brand, cars]) => (
            <div key={brand} onClick={() => navigate({name:"fleet"})} style={{
              padding:24,background:"var(--ink)",border:"1px solid var(--line-2)",borderRadius:4,
              cursor:"pointer",display:"flex",gap:16,alignItems:"center",
              transition:"all 180ms"
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = "var(--accent)"}
            onMouseLeave={e => e.currentTarget.style.borderColor = "var(--line-2)"}>
              <div style={{
                flex:"0 0 60px",width:60,height:60,background:"var(--noir)",
                border:"1px solid var(--line-2)",borderRadius:"50%",
                display:"flex",alignItems:"center",justifyContent:"center",
                fontFamily:"var(--font-display)",fontWeight:700,fontSize:18,color:"var(--accent)",letterSpacing:"-0.02em"
              }}>
                {brand.slice(0,2).toUpperCase()}
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600,fontSize:16,letterSpacing:"-0.01em"}}>{brand}</div>
                <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--muted-2)",marginTop:4}}>{cars.length} car{cars.length>1?"s":""} available</div>
              </div>
              <Icon.Arrow style={{color:"var(--muted-2)"}}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ReservationModal, ConfirmationScreen, ChauffeurScreen, AboutScreen, HowScreen, ContactScreen, BrandsScreen });