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

function PreferredEmployerPage({ navTo, openTour }) {
  const benefitCards = [
    {
      title: "Priority Scheduling",
      body: "Employees of participating employers receive a direct path to request preferred tour windows and leasing follow-up.",
      bullets: ["Priority tour requests", "Dedicated leasing contact", "Early floor plan updates"],
    },
    {
      title: "Limited Move-In Perks",
      body: "Eligible residents may select a one-time move-in benefit, subject to verification, availability, and current program rules.",
      bullets: ["Application fee waiver when approved", "Move-in or setup credit", "Welcome package option"],
    },
    {
      title: "Simple Verification",
      body: "Eligibility can be confirmed with ordinary employment proof before lease signing.",
      bullets: ["Work email", "Employee badge", "Redacted employment proof"],
    },
  ];

  const perkMenu = [
    "Application fee waiver when approved",
    "Move-in credit",
    "Internet setup credit",
    "Parking setup credit",
    "Boardwalk House welcome package",
  ];

  const guardrails = [
    "All applicants are evaluated under the same published rental criteria.",
    "Lawful source of income and lawful source of rent payment are accepted.",
    "Employer participation does not guarantee approval, availability, rent, concessions, or a specific residence.",
    "Program benefits are limited, subject to verification, and may change before lease signing.",
  ];

  return (
    <div>
      <PageHero
        eyebrow="Preferred Employer Program"
        title="A private access lane for local employees."
        lede="Boardwalk House offers participating employer teams priority leasing support, preferred tour handling, and limited one-time move-in perks without changing our rental criteria."
        photoUrl="images/aerial-1.jpeg">
        <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 30 }}>
          <button className="btn btn-primary" onClick={openTour}>
            Request a Preferred Tour <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="Access First"
            title="Perks that make move-in easier."
            lede="The program is designed around service, speed, and capped one-time value instead of permanent rent discounts." />
          <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">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)" }} className="contact-grid">
            <div>
              <span className="eyebrow">Benefit Menu</span>
              <h2 style={{ marginTop: 14 }}>One-time value, clearly capped.</h2>
              <WaveDivider />
              <p className="lede" style={{ marginTop: 18 }}>
                Eligible preferred-employer residents may receive one approved move-in benefit valued within the current program cap.
              </p>
              <div style={{ marginTop: 26, padding: 24, background: "#fff", border: "1px solid rgba(13,27,42,0.08)" }}>
                <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--bronze)", fontWeight: 600 }}>
                  Current target cap
                </div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 38, color: "var(--navy)", marginTop: 6 }}>$250-$750</div>
                <p style={{ color: "var(--muted)", fontSize: 13, lineHeight: 1.65, marginTop: 8 }}>
                  Final benefit amount and eligibility are confirmed by the leasing team before lease signing.
                </p>
              </div>
            </div>

            <div style={{ background: "#fff", border: "1px solid rgba(13,27,42,0.08)", padding: 32 }}>
              <h3 style={{ color: "var(--navy)" }}>Examples of eligible benefits</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "grid", gap: 12 }}>
                {perkMenu.map((perk) => (
                  <li key={perk} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14 }}>
                    <IconCheck size={15} style={{ color: "var(--bronze)" }} /> {perk}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-cream">
        <div className="shell">
          <SectionHead
            eyebrow="Equal Housing"
            title="Same rental criteria for every applicant."
            lede="Preferred-employer eligibility affects limited program perks only. It does not change the application standard or availability process." />
          <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 }}>Ask about bringing Boardwalk House to 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={["Priority access.", "Equal criteria.", "Clear move-in perks.", "Atlantic City living."]} />
    </div>
  );
}

Object.assign(window, { PreferredEmployerPage });