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

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────────────────────
function AboutPage({ setPage }) {
  return (
    <main data-screen-label="About" className="cv-svcpage">
      <section className="cv-about-hero">
        <div className="cv-about-hero-media">
          <img src="media/showroom-best-luxury.webp" alt="" />
          <div className="cv-svc-veil" />
        </div>
        <div className="cv-container cv-svc-hero-body">
          <div className="cv-eyebrow on-dark">CV Auto — C V Used Automobile LLC</div>
          <h1 className="cv-h1 on-dark">
            A trusted destination —
            <br />
            <em className="cv-italic">since 2017.</em>
          </h1>
          <p className="cv-svc-sub on-dark">
            Founded in Al Quoz, run by a team with thirty-five years' combined experience
            across the Gulf luxury market. We sell new and pre-owned cars from every major
            European, Japanese and American marque, consign on behalf of private owners,
            and quietly help good buyers find the right car.
          </p>
        </div>
      </section>

      <section className="cv-band cv-band-paper">
        <div className="cv-container cv-about-grid">
          <div>
            <div className="cv-eyebrow">The principles</div>
            <h2 className="cv-h2">
              No theatre.
              <br />
              <em className="cv-italic">Just the right car.</em>
            </h2>
          </div>
          <div className="cv-about-list">
            <article>
              <h4>Transparent first</h4>
              <p>
                Every spec is verifiable, every inspection independent on request. We'd rather lose
                the sale than oversell the car.
              </p>
            </article>
            <article>
              <h4>Independent, multi-brand</h4>
              <p>
                We are not a franchise dealer for any of the marques on the floor. That keeps us
                honest about each one — and lets us source from the auction houses and private
                owners other desks can't.
              </p>
            </article>
            <article>
              <h4>One desk, end to end</h4>
              <p>
                The same advisor handles your enquiry, viewing, paperwork and after-sale.
                You don't get passed.
              </p>
            </article>
            <article>
              <h4>Built for the GCC &amp; beyond</h4>
              <p>
                Re-export, paperwork and shipping support for buyers across the GCC, CIS and Asia.
                Multilingual desk on the way.
              </p>
            </article>
          </div>
        </div>
      </section>

      <section className="cv-band cv-band-noir">
        <div className="cv-container">
          <header className="cv-section-head">
            <div>
              <div className="cv-eyebrow on-dark">The shape of the business</div>
              <h2 className="cv-h2 on-dark">What we actually do.</h2>
            </div>
          </header>
          <div className="cv-about-services">
            {[
              ["Sales", "New & pre-owned luxury cars, sourced multi-brand."],
              ["Consignment", "We sell your car for you, with daily care while displayed."],
              ["We-buy", "Same-day direct offers for sellers who want a quick exit."],
              ["Auction sourcing", "Cars hunted at auction on your brief."],
              ["Inspection", "Pre-purchase and valuation inspections."],
              ["Finance support", "Introductions to financiers — no in-house lending."]
            ].map(([h, c]) => (
              <div key={h} className="cv-about-svc">
                <div className="cv-about-svc-h">{h}</div>
                <p>{c}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cv-band cv-band-paper">
        <div className="cv-container cv-about-cta">
          <h2 className="cv-h2">
            Want a quiet look at the floor?
          </h2>
          <p>Send a message, or stop by the Al Quoz showroom — opposite Al Serkal Avenue.</p>
          <div className="cv-split-cta">
            <button className="cv-btn cv-btn-primary" onClick={() => setPage({ name: "contact" })}>Book a viewing <Icon.arrow /></button>
            <a className="cv-btn cv-btn-ghost" href={CV_FACTS.whatsapp} target="_blank" rel="noopener"><Icon.wa /> WhatsApp the desk</a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CONTACT
// ─────────────────────────────────────────────────────────────────────────────
function ContactPage({ setPage }) {
  const [sent, setSent] = useState(false);

  return (
    <main data-screen-label="Contact" className="cv-svcpage">
      <section className="cv-svc-hero cv-svc-hero-light">
        <div className="cv-container cv-svc-hero-body">
          <div className="cv-eyebrow">Visit · Call · WhatsApp · Email</div>
          <h1 className="cv-h1">
            4B&nbsp;Street, opposite
            <br />
            <em className="cv-italic">Al&nbsp;Serkal&nbsp;Avenue,</em>
            <br />
            Al&nbsp;Quoz, Dubai.
          </h1>
        </div>
      </section>

      <section className="cv-band cv-band-paper">
        <div className="cv-container cv-contact-grid">
          <div className="cv-contact-info">
            <div className="cv-contact-block">
              <div className="cv-contact-h"><Icon.pin /> Showroom</div>
              <p>{CV_FACTS.address}</p>
              <button className="cv-link" onClick={() => {}}>Open in Maps <Icon.arrow /></button>
              <div className="cv-contact-fine">
                Map embed wires to the verified coordinates once the client resolves
                the published Google Maps short link.
              </div>
            </div>
            <div className="cv-contact-block">
              <div className="cv-contact-h"><Icon.phone /> Call</div>
              <p><a href={`tel:${CV_FACTS.phone.replace(/\s/g,"")}`}>{CV_FACTS.phone}</a> &nbsp;·&nbsp; showroom</p>
              <p><a href={`tel:${CV_FACTS.mobile.replace(/\s/g,"")}`}>{CV_FACTS.mobile}</a> &nbsp;·&nbsp; mobile</p>
            </div>
            <div className="cv-contact-block">
              <div className="cv-contact-h"><Icon.wa /> WhatsApp</div>
              <p><a href={CV_FACTS.whatsapp} target="_blank" rel="noopener">{CV_FACTS.whatsapp}</a></p>
              <div className="cv-contact-fine">Confirm underlying number with client before launch.</div>
            </div>
            <div className="cv-contact-block">
              <div className="cv-contact-h"><Icon.mail /> Email</div>
              <p><a href={`mailto:${CV_FACTS.email}`}>{CV_FACTS.email}</a></p>
            </div>
            <div className="cv-contact-block">
              <div className="cv-contact-h">Hours</div>
              {CV_FACTS.hours.map(([d, t]) => (
                <p key={d}><span style={{ color: "var(--muted)" }}>{d}</span> &nbsp;&nbsp; {t}</p>
              ))}
              <div className="cv-contact-fine">{CV_FACTS.hoursNote}</div>
            </div>
          </div>

          <div className="cv-contact-mapcol">
            <div className="cv-map-placeholder">
              <div className="cv-map-grid" />
              <div className="cv-map-pin">
                <Icon.pin /> CV Auto
              </div>
              <div className="cv-map-note">
                Live map will be wired here after the client confirms map coordinates
                (Google Maps short link to be resolved).
              </div>
            </div>

            <form className="cv-form-card cv-contact-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
              {sent ? (
                <div className="cv-enquire-success">
                  <div className="cv-tick cv-tick-lg" />
                  <h4>Message received.</h4>
                  <p>The desk replies within business hours.</p>
                </div>
              ) : (
                <>
                  <div className="cv-enquire-h">Send a message</div>
                  <div className="cv-field-row">
                    <div className="cv-field"><label>Name</label><input required /></div>
                    <div className="cv-field"><label>Phone</label><input required placeholder="+971…" /></div>
                  </div>
                  <div className="cv-field"><label>Email</label><input type="email" required /></div>
                  <div className="cv-field"><label>How can we help?</label><textarea rows="3" defaultValue="Hi CV Auto, I'd like to…" /></div>
                  <button type="submit" className="cv-btn cv-btn-primary cv-btn-full">Send message <Icon.arrow /></button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>
    </main>
  );
}

window.AboutPage = AboutPage;
window.ContactPage = ContactPage;