// RD Travels — About page
const AboutPage = () => (
  <main>
    <section className="section">
      <div className="container">
        <div className="about-hero">
          <div className="about-hero__text">
            <span className="eyebrow">About</span>
            <h1 style={{ margin: "var(--space-5) 0 var(--space-5)", maxWidth: "20ch" }}>
              A travels yard in Ahmedabad, <span className="accent">since 2015.</span>
            </h1>
            <p className="lead" style={{ maxWidth: "52ch" }}>
              We started with two sedans and one Tempo Traveller. Today we run a
              [CAR COUNT] / [TEMPO COUNT] / [BUS COUNT] yard with employed drivers,
              our own mechanics, and a route desk that's plotted every National
              Highway out of Gujarat.
            </p>
          </div>
          <div className="about-hero__portrait">
            <img
              src="public/images/ronak-portrait-fleet.webp"
              alt="Ronak Dineshbhai Barot, founder of RD Travels, standing with the fleet"
            />
          </div>
        </div>
      </div>
    </section>

    <hr className="divider" />

    <section className="section section--alt">
      <div className="container">
        <span className="eyebrow">The yard</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-6)" }}>
          What ten years <span className="accent">looks like.</span>
        </h2>
        <div className="grid-3" style={{ gap: "var(--space-6)" }}>
          <div>
            <div style={{ fontSize: "3rem", fontWeight: 200, color: "var(--color-saffron)", letterSpacing: "-0.04em", lineHeight: 1 }}>[CAR COUNT]</div>
            <p style={{ margin: "var(--space-3) 0 0", color: "var(--color-ink-soft)" }}>Vehicles in the yard, sedan to 56-seater Volvo. Every one with a tracker, a fitness certificate, and our own mechanic on call.</p>
          </div>
          <div>
            <div style={{ fontSize: "3rem", fontWeight: 200, color: "var(--color-saffron)", letterSpacing: "-0.04em", lineHeight: 1 }}>[DRIVER COUNT]</div>
            <p style={{ margin: "var(--space-3) 0 0", color: "var(--color-ink-soft)" }}>Drivers on payroll — not contracted. Police-verified, trained on highway protocol, and known to us by name.</p>
          </div>
          <div>
            <div style={{ fontSize: "3rem", fontWeight: 200, color: "var(--color-saffron)", letterSpacing: "-0.04em", lineHeight: 1 }}>11</div>
            <p style={{ margin: "var(--space-3) 0 0", color: "var(--color-ink-soft)" }}>Years of GST-compliant invoicing. Same family-run office, same WhatsApp number, since 2015.</p>
          </div>
        </div>
      </div>
    </section>

    <hr className="divider" />

    <section className="section">
      <div className="container">
        <span className="eyebrow">How we work</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-3)" }}>
          Booking takes <span className="accent">3 steps</span> and 5 minutes.
        </h2>
        <div style={{ maxWidth: "820px", marginTop: "var(--space-6)" }}>
          <Pillar n="01" title="Tell us where, when, how many."
            body="WhatsApp or call. Pickup, destination, dates, group size. That's enough for us to send back vehicle options and a GST-itemised quote." />
          <Pillar n="02" title="Confirm with a small advance."
            body="No advance to enquire. Once you've picked the vehicle and seen the number, a small advance reserves the trip on the calendar." />
          <Pillar n="03" title="We pick you up. You travel."
            body="The driver calls 30 minutes before pickup. The vehicle is fuelled, cleaned, AC'd. You travel; we monitor." />
        </div>
      </div>
    </section>

    <section className="section section--saffron">
      <div className="container" style={{ textAlign: "center", maxWidth: "760px" }}>
        <h2 style={{ margin: "0 0 var(--space-4)", color: "var(--color-white)" }}>
          Got a trip in mind? <span style={{ color: "rgba(255,255,255,0.78)" }}>Tell us</span> on WhatsApp.
        </h2>
        <div style={{ display: "flex", gap: "var(--space-3)", justifyContent: "center", flexWrap: "wrap" }}>
          <a href="#" className="btn btn-whatsapp"><WhatsAppIcon /> WhatsApp us your trip</a>
        </div>
      </div>
    </section>
  </main>
);

// RD Travels — Contact page
const ContactPage = () => (
  <main>
    <section className="section">
      <div className="container">
        <span className="eyebrow">Contact</span>
        <h1 style={{ margin: "var(--space-5) 0 var(--space-5)", maxWidth: "20ch" }}>
          Booking takes <span className="accent">3 steps</span> and 5 minutes.
        </h1>
        <p className="lead" style={{ maxWidth: "60ch", marginBottom: "var(--space-7)" }}>
          The fastest path is WhatsApp — most quotes go out in 15 minutes.
          For complex itineraries (weddings, multi-vehicle, corporate retainer), call.
        </p>

        <div className="grid-2" style={{ gap: "var(--space-7)" }}>
          {/* SCENARIOS */}
          <div>
            <span className="eyebrow">Common bookings — one tap</span>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", marginTop: "var(--space-4)" }}>
              <ScenarioCard icon={<PlaneIcon />} title="Mumbai Airport drop" sub="Sedan or Innova · 9–10 hours" />
              <ScenarioCard icon={<TempleIcon />} title="Somnath–Dwarka pilgrimage" sub="Tempo or Innova · 3–4 days" />
              <ScenarioCard icon={<RingIcon />} title="Wedding transport" sub="Bridal car + band bus + family Tempos" />
              <ScenarioCard icon={<BuildingIcon />} title="Corporate retainer" sub="Monthly billing, dedicated vehicle" />
            </div>
          </div>

          {/* FORM */}
          <div>
            <span className="eyebrow">Or send a quote request</span>
            <h3 style={{ margin: "var(--space-3) 0 var(--space-5)" }}>
              We'll WhatsApp you <span className="accent">in 15 minutes.</span>
            </h3>
            <QuoteForm />
          </div>
        </div>
      </div>
    </section>

    <hr className="divider" />

    <section className="section section--alt">
      <div className="container" style={{ maxWidth: "820px" }}>
        <span className="eyebrow">Find us</span>
        <h2 style={{ margin: "var(--space-4) 0 var(--space-5)" }}>
          The yard is in <span className="accent">Ahmedabad.</span>
        </h2>
        <div className="grid-3" style={{ gap: "var(--space-5)" }}>
          <div>
            <p style={{ fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-saffron-deep)", margin: 0 }}>WhatsApp</p>
            <p style={{ margin: "var(--space-2) 0 0", fontWeight: 600 }}>+91 98765 43210</p>
            <p style={{ margin: "var(--space-1) 0 0", color: "var(--color-ink-mute)", fontSize: "0.9rem" }}>Quotes in 15 minutes</p>
          </div>
          <div>
            <p style={{ fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-saffron-deep)", margin: 0 }}>Call</p>
            <p style={{ margin: "var(--space-2) 0 0", fontWeight: 600 }}>+91 98765 43210</p>
            <p style={{ margin: "var(--space-1) 0 0", color: "var(--color-ink-mute)", fontSize: "0.9rem" }}>Mon–Sat · 8am to 9pm IST</p>
          </div>
          <div>
            <p style={{ fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-saffron-deep)", margin: 0 }}>Office</p>
            <p style={{ margin: "var(--space-2) 0 0", fontWeight: 600 }}>[OFFICE ADDRESS]</p>
            <p style={{ margin: "var(--space-1) 0 0", color: "var(--color-ink-mute)", fontSize: "0.9rem" }}>Ahmedabad, Gujarat 380001</p>
          </div>
        </div>
      </div>
    </section>
  </main>
);

const QuoteForm = () => {
  const [phone, setPhone] = React.useState("");
  const phoneError = phone && !/^[6-9]/.test(phone.replace(/\D/g, "").slice(-10, -9));
  const Field = ({ label, value, onChange, placeholder, help, error }) => (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: "0.7rem", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-saffron-deep)" }}>{label}</span>
      <input
        value={value || ""}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          background: "#fff",
          border: `1px solid ${error ? "var(--color-error)" : "rgba(26,24,21,0.18)"}`,
          borderRadius: 10,
          padding: "12px 14px",
          fontFamily: "var(--font-sans)",
          fontSize: "0.95rem",
          color: "var(--color-ink)",
        }}
      />
      <span style={{ fontSize: "0.78rem", color: error ? "var(--color-error)" : "var(--color-ink-mute)" }}>
        {error || help}
      </span>
    </label>
  );
  return (
    <form onSubmit={(e) => e.preventDefault()} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-4)" }}>
      <Field label="Pickup" placeholder="Ahmedabad — Satellite" help="Your pickup neighbourhood or address." />
      <Field label="Destination" placeholder="Mumbai International Airport" help="Pan-India · we route via NH 48." />
      <Field label="Travel date" placeholder="DD / MM / YYYY" help="Outward date; we'll ask about return on WhatsApp." />
      <Field label="Group size" placeholder="2 adults, 1 child" help="Helps us pick the right vehicle." />
      <Field label="Phone" placeholder="+91 98xxx xxxxx" value={phone} onChange={(e) => setPhone(e.target.value)}
        help="We'll WhatsApp the quote here." error={phoneError && "Indian numbers start with 6, 7, 8, or 9."} />
      <Field label="Email (optional)" placeholder="you@example.com" help="Only if you want a GST invoice copy." />
      <div style={{ gridColumn: "1 / -1", display: "flex", gap: "var(--space-3)", flexWrap: "wrap", marginTop: "var(--space-2)" }}>
        <button className="btn btn-primary" type="submit">Get instant quote</button>
        <a href="#" className="btn btn-whatsapp"><WhatsAppIcon /> WhatsApp instead</a>
      </div>
      <p style={{ gridColumn: "1 / -1", fontSize: "0.82rem", color: "var(--color-ink-mute)", margin: 0 }}>
        No spam. No advance to enquire. GST-clear pricing.
      </p>
    </form>
  );
};

Object.assign(window, { AboutPage, ContactPage, QuoteForm });