/* global React, Icon, CV_FACTS */
const { useState } = React;

// ─────────────────────────────────────────────────────────────────────────────
// CONSIGNMENT  — the "storage-adjacent" hook
// ─────────────────────────────────────────────────────────────────────────────
function ConsignmentPage({ setPage }) {
  const [stage, setStage] = useState(1);
  const [form, setForm] = useState({
    car: "", year: "", mileage: "", price: "", name: "", phone: "", email: "", message: ""
  });
  const [submitted, setSubmitted] = useState(false);

  const stages = [
    { n: "01", h: "Inspection", c: "Free walk-through. Our team rates condition, panel, paint and mechanicals — and benchmarks the market." },
    { n: "02", h: "Photography", c: "Studio-grade stills and walk-around video, shot on our showroom floor — included." },
    { n: "03", h: "Marketed", c: "Listed across Dubizzle, DubiCars, the CV Auto site and every social channel." },
    { n: "04", h: "Negotiated", c: "We handle the inquiries, screen the buyers, and bring you the offers. You decide." },
    { n: "05", h: "Cared for", c: "Daily cleaning while displayed in the showroom. Your car stays photo-ready." },
    { n: "06", h: "Closed", c: "Buyer finance assistance, paperwork and handover — you keep full ownership until we close." }
  ];

  const onSubmit = e => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <main data-screen-label="Consignment" className="cv-svcpage">
      <section className="cv-svc-hero cv-svc-hero-dark">
        <div className="cv-svc-hero-media">
          <img src="media/showroom-interior-3.webp" alt="" />
          <div className="cv-svc-veil" />
        </div>
        <div className="cv-container cv-svc-hero-body">
          <div className="cv-eyebrow on-dark">Consignment · the standout secondary service</div>
          <h1 className="cv-h1 on-dark">
            We sell your car for you.
            <br />
            <em className="cv-italic">You keep ownership.</em>
            <br />
            We keep it photo-ready.
          </h1>
          <p className="cv-svc-sub on-dark">
            Hand your car to the CV Auto desk and we run the entire sales process — from inspection
            and studio photography to multi-platform marketing, buyer negotiation, and a daily clean
            on the showroom floor. The closest thing we offer to long-term storage, and the most
            transparent way to move a high-value car in Dubai.
          </p>
          <div className="cv-svc-cta">
            <button className="cv-btn cv-btn-primary cv-btn-lg" onClick={() => document.getElementById("consign-form")?.scrollIntoView({ block: "start" })}>
              Start a consignment <Icon.arrow />
            </button>
            <a className="cv-btn cv-btn-ghost cv-btn-lg on-dark" href={CV_FACTS.whatsapp} target="_blank" rel="noopener">
              <Icon.wa /> Ask a question first
            </a>
          </div>
        </div>
      </section>

      {/* Process strip */}
      <section className="cv-band cv-band-paper">
        <div className="cv-container">
          <header className="cv-section-head">
            <div>
              <div className="cv-eyebrow">Six-step process</div>
              <h2 className="cv-h2">How it actually runs.</h2>
            </div>
          </header>
          <div className="cv-process">
            {stages.map((s, i) => (
              <div key={s.n} className="cv-process-cell">
                <div className="cv-process-n">{s.n}</div>
                <div className="cv-process-h">{s.h}</div>
                <p>{s.c}</p>
                {i < stages.length - 1 && <div className="cv-process-arrow"><Icon.arrow /></div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What we don't do — transparency */}
      <section className="cv-band cv-band-noir">
        <div className="cv-container">
          <div className="cv-disclose">
            <div className="cv-disclose-h">
              <div className="cv-eyebrow on-dark">Worth saying plainly</div>
              <h2 className="cv-h2 on-dark">
                What consignment <em className="cv-italic">isn't</em>.
              </h2>
            </div>
            <div className="cv-disclose-cols">
              <div>
                <h4>We don't offer</h4>
                <ul>
                  <li>Climate-controlled long-term storage</li>
                  <li>A detailing studio, PPF or ceramic coating</li>
                  <li>Battery and tyre tending packages</li>
                  <li>A membership programme</li>
                </ul>
                <p className="cv-disclose-fine">
                  If the brief on your side calls for any of the above, talk to us — we'll point you
                  to the right partner in the Al Quoz cluster rather than overpromising.
                </p>
              </div>
              <div>
                <h4>We do offer</h4>
                <ul>
                  <li>Full sales process on your behalf</li>
                  <li>Studio photography and walk-around video</li>
                  <li>Distribution to every Dubai luxury channel</li>
                  <li>Daily cleaning while the car is on display</li>
                  <li>Buyer finance &amp; insurance assistance</li>
                  <li>You retain ownership until handover</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Consignment form */}
      <section id="consign-form" className="cv-band cv-band-paper">
        <div className="cv-container cv-form-grid">
          <div>
            <div className="cv-eyebrow">Step {stage} of 3</div>
            <h2 className="cv-h2">
              Tell us about <em className="cv-italic">the car.</em>
            </h2>
            <p className="cv-body">
              A few essentials gets a desk advisor on the phone. Hi-res photos and the V5 are
              welcome but not required — we'll arrange the inspection visit.
            </p>
            <div className="cv-form-fine">
              <Icon.phone /> Or call the desk directly · <a href={`tel:${CV_FACTS.phone.replace(/\s/g,"")}`}>{CV_FACTS.phone}</a>
            </div>
          </div>

          <form className="cv-form-card" onSubmit={onSubmit}>
            {submitted ? (
              <div className="cv-enquire-success">
                <div className="cv-tick cv-tick-lg" />
                <h4>Consignment request received.</h4>
                <p>
                  A senior advisor will call within one business day to book your inspection.
                  Please have the V5 and any service history ready.
                </p>
                <button type="button" className="cv-btn cv-btn-ghost" onClick={() => { setSubmitted(false); setStage(1); }}>
                  Submit another <Icon.arrow />
                </button>
              </div>
            ) : (
              <>
                <div className="cv-form-stepper">
                  <button type="button" className={stage===1?"is-on":""} onClick={() => setStage(1)}>1 · The car</button>
                  <button type="button" className={stage===2?"is-on":""} onClick={() => setStage(2)}>2 · You</button>
                  <button type="button" className={stage===3?"is-on":""} onClick={() => setStage(3)}>3 · Send</button>
                </div>

                {stage === 1 && (
                  <>
                    <div className="cv-field">
                      <label>Make &amp; model</label>
                      <input required value={form.car} onChange={e => setForm({...form, car: e.target.value})} placeholder="e.g. 2019 Mercedes-AMG GT R" />
                    </div>
                    <div className="cv-field-row">
                      <div className="cv-field">
                        <label>Year</label>
                        <input value={form.year} onChange={e => setForm({...form, year: e.target.value})} />
                      </div>
                      <div className="cv-field">
                        <label>Mileage (km)</label>
                        <input value={form.mileage} onChange={e => setForm({...form, mileage: e.target.value})} />
                      </div>
                    </div>
                    <div className="cv-field">
                      <label>Asking price expectation (optional)</label>
                      <input value={form.price} onChange={e => setForm({...form, price: e.target.value})} placeholder="AED — or leave blank for our assessment" />
                    </div>
                    <button type="button" className="cv-btn cv-btn-primary cv-btn-full" onClick={() => setStage(2)}>
                      Continue <Icon.arrow />
                    </button>
                  </>
                )}

                {stage === 2 && (
                  <>
                    <div className="cv-field">
                      <label>Your name</label>
                      <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})} />
                    </div>
                    <div className="cv-field-row">
                      <div className="cv-field">
                        <label>Phone</label>
                        <input required value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+971…" />
                      </div>
                      <div className="cv-field">
                        <label>Email</label>
                        <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} />
                      </div>
                    </div>
                    <div className="cv-field">
                      <label>Anything we should know?</label>
                      <textarea rows="3" value={form.message} onChange={e => setForm({...form, message: e.target.value})} />
                    </div>
                    <div className="cv-field-row">
                      <button type="button" className="cv-btn cv-btn-ghost" onClick={() => setStage(1)}>Back</button>
                      <button type="button" className="cv-btn cv-btn-primary cv-btn-full" onClick={() => setStage(3)}>
                        Review &amp; send <Icon.arrow />
                      </button>
                    </div>
                  </>
                )}

                {stage === 3 && (
                  <>
                    <div className="cv-summary">
                      <div className="cv-summary-h">Your consignment request</div>
                      <table className="cv-summary-t">
                        <tbody>
                          <tr><th>Vehicle</th><td>{form.car || <em style={{ color: "var(--muted)" }}>—</em>}</td></tr>
                          <tr><th>Year / km</th><td>{form.year || "—"} · {form.mileage || "—"}</td></tr>
                          <tr><th>Expectation</th><td>{form.price || "Our assessment"}</td></tr>
                          <tr><th>Owner</th><td>{form.name || "—"}</td></tr>
                          <tr><th>Phone</th><td>{form.phone || "—"}</td></tr>
                          <tr><th>Email</th><td>{form.email || "—"}</td></tr>
                        </tbody>
                      </table>
                    </div>
                    <div className="cv-checks">
                      <label><input type="checkbox" defaultChecked /> I'd like a same-day WhatsApp confirmation</label>
                      <label><input type="checkbox" defaultChecked /> Send me the consignment agreement to review</label>
                    </div>
                    <div className="cv-field-row">
                      <button type="button" className="cv-btn cv-btn-ghost" onClick={() => setStage(2)}>Back</button>
                      <button type="submit" className="cv-btn cv-btn-primary cv-btn-full">
                        Send to the desk <Icon.arrow />
                      </button>
                    </div>
                  </>
                )}
              </>
            )}
          </form>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SELL / FINANCE — leaner pages with the same form pattern
// ─────────────────────────────────────────────────────────────────────────────
function SellPage({ setPage }) {
  const [sent, setSent] = useState(false);
  return (
    <main data-screen-label="Sell" className="cv-svcpage">
      <section className="cv-svc-hero cv-svc-hero-light">
        <div className="cv-container cv-svc-hero-body">
          <div className="cv-eyebrow">We buy cars</div>
          <h1 className="cv-h1">
            One desk, one offer,
            <br />
            <em className="cv-italic">paid the same day.</em>
          </h1>
          <p className="cv-svc-sub">
            Prefer not to consign? Send us the details and we'll come back with a direct offer.
            Fast, transparent, no surprises. If we don't want the car, we'll tell you why.
          </p>
        </div>
      </section>

      <section className="cv-band cv-band-paper">
        <div className="cv-container cv-form-grid">
          <div>
            <h2 className="cv-h2">Send the car to the desk.</h2>
            <p className="cv-body">
              A senior advisor reviews every submission. You'll have an indicative figure within
              business hours, and a firm one after a brief inspection.
            </p>
            <ul className="cv-bullets">
              <li>No obligation, no admin fee.</li>
              <li>Pickup from anywhere in the UAE.</li>
              <li>Bank transfer within 24 hours of agreement.</li>
            </ul>
          </div>
          <form className="cv-form-card" onSubmit={e => { e.preventDefault(); setSent(true); }}>
            {sent ? (
              <div className="cv-enquire-success">
                <div className="cv-tick cv-tick-lg" />
                <h4>Offer in progress.</h4>
                <p>You'll hear back within business hours.</p>
              </div>
            ) : (
              <>
                <div className="cv-field"><label>Make &amp; model</label><input required placeholder="e.g. 2020 Range Rover Vogue" /></div>
                <div className="cv-field-row">
                  <div className="cv-field"><label>Year</label><input /></div>
                  <div className="cv-field"><label>Mileage (km)</label><input /></div>
                </div>
                <div className="cv-field"><label>Asking figure (optional)</label><input placeholder="AED" /></div>
                <div className="cv-field"><label>Photos</label>
                  <div className="cv-drop">Drop up to 8 photos here, or <span className="cv-link-inline">browse</span></div>
                </div>
                <div className="cv-field-row">
                  <div className="cv-field"><label>Your name</label><input required /></div>
                  <div className="cv-field"><label>Phone</label><input required placeholder="+971…" /></div>
                </div>
                <button type="submit" className="cv-btn cv-btn-primary cv-btn-full">Get my offer <Icon.arrow /></button>
              </>
            )}
          </form>
        </div>
      </section>
    </main>
  );
}

function FinancePage() {
  const [sent, setSent] = useState(false);
  return (
    <main data-screen-label="Finance" className="cv-svcpage">
      <section className="cv-svc-hero cv-svc-hero-light">
        <div className="cv-container cv-svc-hero-body">
          <div className="cv-eyebrow">Finance &amp; insurance support</div>
          <h1 className="cv-h1">
            Quiet introductions
            <br />
            <em className="cv-italic">to the right desks.</em>
          </h1>
          <p className="cv-svc-sub">
            CV Auto isn't a lender — we introduce buyers to partners we trust to move quickly on
            high-value cars. Tell us the figure and we'll set the conversation up.
          </p>
          <p className="cv-svc-sub" style={{ marginTop: 12, opacity: 0.7 }}>
            <em>No rates or EMIs are published on this site. All terms are confirmed by the
            financier — not by us.</em>
          </p>
        </div>
      </section>

      <section className="cv-band cv-band-paper">
        <div className="cv-container cv-form-grid">
          <div>
            <h2 className="cv-h2">Open a finance conversation.</h2>
            <ul className="cv-bullets">
              <li>UAE-resident and non-resident structures.</li>
              <li>Buyout and refinance routes for cars already with you.</li>
              <li>Trade-in equity rolled into the term.</li>
            </ul>
          </div>
          <form className="cv-form-card" onSubmit={e => { e.preventDefault(); setSent(true); }}>
            {sent ? (
              <div className="cv-enquire-success">
                <div className="cv-tick cv-tick-lg" />
                <h4>Conversation opened.</h4>
                <p>A partner desk will reach out within business hours.</p>
              </div>
            ) : (
              <>
                <div className="cv-field"><label>Car of interest (if known)</label><input placeholder="Or 'browsing the floor'" /></div>
                <div className="cv-field-row">
                  <div className="cv-field"><label>Approx. budget</label><input placeholder="AED" /></div>
                  <div className="cv-field"><label>Term</label>
                    <select><option>24 months</option><option>36 months</option><option>48 months</option><option>60 months</option></select>
                  </div>
                </div>
                <div className="cv-field-row">
                  <div className="cv-field"><label>Your name</label><input required /></div>
                  <div className="cv-field"><label>Phone</label><input required placeholder="+971…" /></div>
                </div>
                <button type="submit" className="cv-btn cv-btn-primary cv-btn-full">Open a conversation <Icon.arrow /></button>
              </>
            )}
          </form>
        </div>
      </section>
    </main>
  );
}

window.ConsignmentPage = ConsignmentPage;
window.SellPage = SellPage;
window.FinancePage = FinancePage;