// invest.jsx — "Invest With Us" partner / vehicle-listing page
const INVEST_STEPS = [
  { n: "01", title: "Apply", body: "Tell us about your vehicle and share a few photos. We review every car personally — presence and condition first." },
  { n: "02", title: "Inspect & Onboard", body: "We inspect, detail, and photograph your vehicle through Bally & Co. Motors, then add it to the Reserve collection." },
  { n: "03", title: "We Rent & Manage", body: "Bookings, vetted renters, insurance, delivery, cleaning, and support — handled end to end. You do nothing." },
  { n: "04", title: "You Earn", body: "Your car works while it would otherwise sit. We share the revenue on a transparent split, paid on schedule." },
];

const INVEST_BENEFITS = [
  { icon: "income",   title: "Passive Monthly Income", body: "Turn an idle asset into recurring revenue. Your vehicle earns when you’re not driving it." },
  { icon: "shield",   title: "Full Insurance Coverage", body: "Every reservation is backed by full-coverage protection, so your vehicle is never exposed." },
  { icon: "wrench",   title: "Maintained by Bally & Co.", body: "Professional detailing and upkeep between every rental — your car comes back better than it left." },
  { icon: "vetted",   title: "Vetted Renters Only", body: "Licensed, insured, screened, and deposit-backed. We rent to the right people, not just anyone." },
  { icon: "calendar", title: "You Set Availability", body: "Block out the dates you want your car. Drive it whenever you like — it’s still yours." },
  { icon: "split",    title: "Transparent Split", body: "A clear revenue share with itemized statements. No hidden fees, no surprises." },
];

function Invest({ onHome, onReserve }) {
  return (
    <main className="marine invest">
      <section className="marine-hero">
        <div className="marine-hero-bg" />
        <div className="container marine-hero-inner">
          <Reveal className="marine-hero-content">
            <div className="eyebrow"><span className="eyebrow-tick" />Partner With Us</div>
            <h1 className="marine-title">Invest With Us</h1>
            <p className="marine-sub">
              Own a vehicle worth driving? Put it to work. Partner with Chairman’s Reserve and we’ll
              rent, manage, insure, and maintain your car to our standard — while you share in the
              revenue. Your asset, our operation, a return on both.
            </p>
            <div className="invest-hero-actions">
              <GoldButton size="lg" onClick={() => scrollToInquiry("invest-inquiry")}>List Your Vehicle</GoldButton>
              <button className="text-link" onClick={onHome}>← Back to Chairman’s Reserve</button>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section process">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <Eyebrow>How It Works</Eyebrow>
              <h2 className="section-title">From Your Driveway to Ours</h2>
            </div>
          </Reveal>
          <div className="steps">
            <div className="steps-rule" />
            {INVEST_STEPS.map((s, i) => (
              <Reveal key={s.n} delay={i * 90} className="step">
                <span className="step-n">{s.n}</span>
                <h3 className="step-title">{s.title}</h3>
                <p className="step-body">{s.body}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section standard">
        <div className="container">
          <Reveal>
            <div className="section-head">
              <Eyebrow>Why Partner</Eyebrow>
              <h2 className="section-title">Your Car, Looked After</h2>
              <p className="section-intro">
                We treat every partner vehicle the way we treat our own collection — because to our
                clients, there’s no difference. Here’s what you get when your car joins the Reserve.
              </p>
            </div>
          </Reveal>
          <div className="pillars">
            {INVEST_BENEFITS.map((p, i) => (
              <Reveal key={p.title} delay={i * 80} className="pillar">
                <span className="pillar-ico"><PillarIcon name={p.icon} /></span>
                <h3 className="pillar-title">{p.title}</h3>
                <p className="pillar-body">{p.body}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section invest-earn">
        <div className="container">
          <Reveal className="invest-earn-band">
            <Eyebrow>The Arrangement</Eyebrow>
            <h2 className="section-title">A Partnership, Not a Handover</h2>
            <p className="section-intro">
              Revenue split, eligibility, and payout terms are tailored to your vehicle and shared on
              request — we’d rather talk it through than box you into a template. Reach out and we’ll
              walk you through exactly what your car could earn.
            </p>
            <div className="invest-earn-actions">
              <GoldButton size="lg" onClick={() => scrollToInquiry("invest-inquiry")}>Start the Conversation</GoldButton>
            </div>
          </Reveal>
        </div>
      </section>

      <InquiryForm
        id="invest-inquiry"
        eyebrow="Become a Partner"
        title="List Your Vehicle"
        intro="Tell us about your vehicle and how to reach you. A member of the Reserve will follow up personally to discuss terms and next steps."
        interestLabel="Vehicle Type"
        interestPlaceholder="Select a type…"
        interestOptions={["Luxury Sedan / Coupe", "Luxury SUV", "Exotic / Sports", "Convertible", "Other"]}
        extraFields={[
          { key: "vehicleinfo", label: "Year / Make / Model", placeholder: "e.g. 2021 Mercedes-Benz AMG GLE" },
          { key: "mileage", label: "Approx. Mileage", placeholder: "e.g. 24,000" },
        ]}
        docUploads={[
          { key: "photos", label: "Vehicle Photos", hint: "JPG or PNG", icon: "doc" },
          { key: "registration", label: "Registration", hint: "PDF, JPG or PNG", icon: "id" },
        ]}
        docUploadsLabel="Vehicle Documents"
        showDates={false}
        submitText="Submit Your Vehicle"
        sentTitle="Application Received"
        messagePlaceholder="Condition, modifications, availability, anything we should know…"
      />
    </main>
  );
}

Object.assign(window, { Invest });