/* global React, BrandStrip, SectionHead, PageHero, WaveDivider,
   IconArrow, IconCheck, IconMail */

function PreferredEmployerPage({ navTo, openTour }) {
  const benefitCards = [
    { title: "$250 off your first month's rent", body: "Receive a one-time $250 rent credit when you move in.", bullets: ["Applied to your first month's rent", "Included with the other program benefits"] },
    { title: "Application fees credited back", body: "At lease signing, receive a credit for the actual Boardwalk House application fees paid by all leaseholders on your apartment.", bullets: ["Fees are paid when you apply", "Credit issued when your lease is signed"] },
    { title: "Priority application review", body: "Your completed application receives priority review by our leasing team.", bullets: ["Same rental criteria for every applicant", "Approval and apartment availability are not guaranteed"] },
    { title: "One year of free bike storage", body: "Store your bike in our secure indoor bike room at no charge for your first 12 months.", bullets: ["Select bike storage when arranging your lease", "Subject to bike storage availability"] },
    { title: "First month of parking free", body: "Sign up for monthly parking and receive your first month at no charge.", bullets: ["Monthly parking subscription required", "Subject to parking availability; regular charges begin in month two"] },
    { title: "Neighborhood Welcome Kit", body: "A welcome kit to help you settle in and get to know your new neighborhood.", bullets: ["Provided at move-in", "One welcome kit per apartment"] },
  ];
  const guardrails = [
    "For new residents signing a lease of at least 12 months. One benefit package per apartment; all six benefits are included. Bike storage and parking apply when selected and available.",
    "Employees of approved Atlantic City restaurants, casinos, local law firms, AtlantiCare, South Jersey Gas, and Stockton University can submit directly. No employer agreement is required. Leasing verifies your employer and employment before lease signing.",
    "The $250 credit reduces your first month's rent. Actual Boardwalk House application fees paid by all leaseholders are credited at lease signing. These are credits, not cash payments.",
    "All applicants are evaluated under the same published rental criteria. Lawful sources of income and rent payment are accepted. Program eligibility and priority review do not guarantee approval or an available apartment.",
  ];

  return (
    <div>
      <PageHero
        eyebrow="Preferred Employer Program"
        title="Work local. Live on the boardwalk."
        lede="Employees of approved local employers receive $250 off their first month’s rent, application-fee credits, priority application review, one year of free bike storage, their first month of monthly parking free, and a Neighborhood Welcome Kit."
        photoUrl="images/aerial-1.jpeg">
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 30 }}>
          <button className="btn btn-primary" onClick={openTour}>
            Join the Employer Interest List <IconArrow size={14} />
          </button>
          <button className="btn btn-ghost" onClick={() => navTo("contact")}>
            Contact Leasing
          </button>
        </div>
      </PageHero>

      <section className="section bg-cream">
        <div className="shell">
          <SectionHead
            eyebrow="Your Six Benefits"
            title="Perks that make move-in easier."
            lede="One package with all six benefits for eligible new residents signing a lease of at least 12 months." />
          <div className="card-grid cols-3">
            {benefitCards.map((card) => (
              <article key={card.title} style={{ background: "#fff", border: "1px solid rgba(13,27,42,0.08)", padding: 32 }}>
                <h3 style={{ color: "var(--navy)" }}>{card.title}</h3>
                <WaveDivider />
                <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.65, marginTop: 14 }}>
                  {card.body}
                </p>
                <ul style={{ listStyle: "none", padding: 0, margin: "20px 0 0", display: "grid", gap: 10 }}>
                  {card.bullets.map((bullet) => (
                    <li key={bullet} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13, color: "var(--ink)" }}>
                      <IconCheck size={14} style={{ color: "var(--bronze)" }} /> {bullet}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section bg-linen">
        <div className="shell">
          <SectionHead eyebrow="Who Qualifies" title="Local employees. A direct path to getting started."
            lede="For employees of approved Atlantic City restaurants, casinos, local law firms, AtlantiCare, South Jersey Gas, and Stockton University." />
          <div className="card-grid cols-3">
            {[
              ["1. Join the interest list", "Tell our leasing team you are interested in the Preferred Employer Program and where you work. Your employer does not need to sign an agreement."],
              ["2. Verify your employment", "Leasing confirms your employer and employment before lease signing using a work email, employee badge, or redacted employment document."],
              ["3. Sign your lease and receive your benefits", "Once approved, sign a lease of at least 12 months. Application fees are credited at signing and the $250 rent credit applies to your first month. Select bike storage and monthly parking with leasing, subject to availability."],
            ].map(([title, body]) => <article key={title} style={{ background: "#fff", padding: 28 }}><h3>{title}</h3><p style={{ marginTop: 14, lineHeight: 1.65, color: "var(--muted)" }}>{body}</p></article>)}
          </div>
          <p style={{ marginTop: 24, color: "var(--muted)", lineHeight: 1.65 }}>The interest list is open now. Joining is not a rental application and does not reserve an apartment. Tell leasing your employer name when you submit; employment documents are not needed to join.</p>
          <button className="btn btn-navy" style={{ marginTop: 24 }} onClick={openTour}>Join the Employer Interest List <IconArrow size={14} /></button>
        </div>
      </section>

      <section className="section bg-cream">
        <div className="shell">
          <SectionHead
            eyebrow="Program Terms"
            title="Clear terms. The same rental criteria."
            lede="These terms apply to the Preferred Employer benefit package." />
          <div className="card-grid cols-2">
            {guardrails.map((text) => (
              <article key={text} style={{ background: "#fff", border: "1px solid rgba(13,27,42,0.08)", padding: 28, display: "flex", gap: 14, alignItems: "flex-start" }}>
                <IconCheck size={18} style={{ color: "var(--bronze)", marginTop: 2, flexShrink: 0 }} />
                <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.65 }}>{text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-navy section-tight">
        <div className="shell" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="eyebrow on-dark">Employer partners</div>
            <h3 style={{ marginTop: 8, color: "var(--linen-2)", fontSize: 32 }}>Share these benefits with your team.</h3>
          </div>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navTo("contact")}>Contact Leasing</button>
            <a className="btn btn-ghost" href="mailto:leasing@boardwalkhouseac.com">
              Email Us <IconMail size={14} />
            </a>
          </div>
        </div>
      </section>

      <BrandStrip items={["$250 rent credit.", "Six included benefits.", "Local employees.", "Atlantic City living."]} />
    </div>
  );
}

Object.assign(window, { PreferredEmployerPage });