/* global React, BrandMark, WaveDivider, IconPhone, IconClose, IconMapPin, IconMail */
const { useState, useEffect } = React;

function PricingDisclosure({ compact = false }) {
  const facts = window.BOARDWALK_FACTS;
  const fees = facts.feeDisclosure;
  return (
    <aside aria-label="Rent and fee information" style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid rgba(13,27,42,0.12)", fontSize: 13, lineHeight: 1.65, color: "var(--muted)" }}>
      <p style={{ margin: "0 0 8px" }}>{fees.summary}</p>
      <p style={{ margin: "0 0 8px" }}><span aria-hidden="true">* </span>{facts.pricingNotice}</p>
      <details>
        <summary style={{ cursor: "pointer", color: "var(--navy)", fontWeight: 600, padding: "4px 0" }}>View fees &amp; deposits</summary>
        <p>{fees.status}</p>
        <dl style={{ display: "grid", gap: compact ? 10 : 14, margin: "12px 0" }}>
          {fees.items.map(item => (
            <div key={item.label}>
              <dt style={{ fontWeight: 600, color: "var(--navy)" }}>{item.label}</dt>
              <dd style={{ margin: "2px 0 0" }}>{item.detail}</dd>
            </div>
          ))}
        </dl>
      </details>
    </aside>
  );
}

const NAV_ITEMS = [
  { id: "home", label: "Home" },
  { id: "residences", label: "Residences" },
  { id: "amenities", label: "Amenities" },
  { id: "gallery", label: "Gallery" },
  { id: "location", label: "Location" },
  { id: "contact", label: "Contact" },
];

function Header({ page, navTo, openTour, showPreLeasing }) {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    setMenuOpen(false);
  }, [page]);

  useEffect(() => {
    document.body.classList.toggle("menu-open", menuOpen);
    const onKey = (event) => {
      if (event.key === "Escape") setMenuOpen(false);
    };
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.classList.remove("menu-open");
      document.removeEventListener("keydown", onKey);
    };
  }, [menuOpen]);

  return (
    <>
      {showPreLeasing && (
        <div className="preleasing-banner">
          <span className="banner-status"><i aria-hidden="true" /><b>Waitlist Open</b></span>
          <span className="banner-detail">Fall 2026 occupancy target · Subject to certificate of occupancy</span>
        </div>
      )}
      <header className="nav">
        <div className="nav-inner">
          <a href="#home" className="brand-link" onClick={(e) => { e.preventDefault(); navTo("home"); }}>
            <img
              className="navbar-logo"
              src="images/logo-options/navbar-logo-1-transparent.png"
              alt="Boardwalk House"
            />
          </a>
          <nav className="nav-links">
            {NAV_ITEMS.map((it) => (
              <a key={it.id}
                 href={"#" + it.id}
                 className={"nav-link" + (page === it.id ? " active" : "")}
                 onClick={(e) => { e.preventDefault(); navTo(it.id); }}>
                {it.label}
              </a>
            ))}
          </nav>
          <div className="nav-cta">
            <a className="btn btn-primary btn-sm" href="#contact" onClick={(e) => { e.preventDefault(); openTour(); }}>
              Join Waitlist
            </a>
          </div>
          <button
            type="button"
            className={"nav-menu-toggle" + (menuOpen ? " open" : "")}
            aria-expanded={menuOpen}
            aria-controls="mobile-navigation"
            aria-label={menuOpen ? "Close navigation" : "Open navigation"}
            onClick={() => setMenuOpen((current) => !current)}>
            <span /><span />
          </button>
        </div>
      </header>
      <div id="mobile-navigation" className={"mobile-menu" + (menuOpen ? " open" : "")} aria-hidden={!menuOpen}>
        <nav aria-label="Mobile navigation">
          {NAV_ITEMS.map((item, index) => (
            <a
              key={item.id}
              href={`#${item.id}`}
              className={page === item.id ? "active" : ""}
              style={{ "--menu-index": index }}
              tabIndex={menuOpen ? 0 : -1}
              onClick={(event) => {
                event.preventDefault();
                setMenuOpen(false);
                navTo(item.id);
              }}>
              <span>{String(index + 1).padStart(2, "0")}</span>{item.label}
            </a>
          ))}
        </nav>
        <button className="btn btn-primary" tabIndex={menuOpen ? 0 : -1} onClick={() => { setMenuOpen(false); openTour(); }}>
          Join Waitlist
        </button>
        <p>190 S Kentucky Ave · Atlantic City</p>
      </div>
    </>
  );
}

function Footer({ navTo, onWaitlistSubmit }) {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const { send, pending, error } = window.useLeadSubmission();
  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    const saved = await send({
        subject: "[Boardwalk House] Waitlist signup — footer",
        formType: "waitlist",
        source: "footer",
        email,
    });
    if (!saved) return;
    onWaitlistSubmit && onWaitlistSubmit(email);
    setSubmitted(true);
    setEmail("");
    setTimeout(() => setSubmitted(false), 4000);
  };
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
              <BrandMark size={48} />
              <div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500, color: "var(--linen-2)" }}>
                  Boardwalk House
                </div>
                <div style={{ fontFamily: "var(--sans)", fontSize: 9.5, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--bronze-soft)", marginTop: 4 }}>
                  Atlantic City
                </div>
              </div>
            </div>
            <p style={{ fontSize: 13, color: "rgba(245,242,237,0.7)", lineHeight: 1.6, maxWidth: 320 }}>
              Forty-seven oceanfront residences on the Atlantic City Boardwalk. Built 1984. Renovated 2026.
            </p>
            <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "rgba(245,242,237,0.78)" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <IconMapPin size={16} style={{ color: "var(--bronze-soft)", marginTop: 2 }} />
                <span>190 S Kentucky Ave<br/>Atlantic City, NJ 08401</span>
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                <IconPhone size={16} style={{ color: "var(--bronze-soft)" }} />
                <a href="tel:6097107977" style={{ textDecoration: "none", color: "rgba(245,242,237,0.9)" }}>
                  Call (609) 710-7977
                </a>
              </div>
              <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                <IconMail size={16} style={{ color: "var(--bronze-soft)" }} />
                <a href="mailto:leasing@boardwalkhouseac.com" style={{ textDecoration: "none", color: "rgba(245,242,237,0.9)" }}>
                  leasing@boardwalkhouseac.com
                </a>
              </div>
            </div>
          </div>
          <div>
            <h4>Site Map</h4>
            <ul className="footer-list">
              {NAV_ITEMS.map((it) => (
                <li key={it.id}>
                  <a href={"#" + it.id} onClick={(e) => { e.preventDefault(); navTo(it.id); }}>{it.label}</a>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Programs</h4>
            <ul className="footer-list">
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>Join Waitlist</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>Reserve Interest</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>Broker Referral Program</a></li>
              <li><a href="#employer" onClick={(e) => { e.preventDefault(); navTo("employer"); }}>Preferred Employer Program</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); navTo("contact"); }}>Launch Offers</a></li>
            </ul>
          </div>
          <div>
            <h4>Waitlist · Fall 2026 Target</h4>
            <p style={{ fontSize: 13, color: "rgba(245,242,237,0.7)", margin: "0 0 14px" }}>
              Join the list for leasing-team follow-up and unit-reservation details.
            </p>
            <form onSubmit={submit} style={{ display: "grid", gap: 10 }}>
              <input
                type="email"
                placeholder="your@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                style={{
                  background: "rgba(245,242,237,0.06)",
                  border: "1px solid rgba(245,242,237,0.3)",
                  color: "var(--linen-2)",
                  padding: "12px 14px",
                  fontFamily: "var(--sans)",
                  fontSize: 14,
                  borderRadius: 2,
                }}
              />
              <button disabled={pending} type="submit" className="btn btn-primary btn-sm">
                <span key={submitted ? "done" : "ready"} className="button-label-swap">
                  {submitted ? "✓ You're on the list" : "Join the Waitlist"}
                </span>
              </button>
              {error && <p role="alert" style={{ color: "#b3261e", background: "#fff", padding: 12 }}>{error}</p>}
        </form>
          </div>
        </div>
        <div className="footer-meta">
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <span>© 2026 Boardwalk House Atlantic City</span>
            <span style={{ opacity: 0.4 }}>·</span>
            <a href="privacy.html" style={{ textDecoration: "none", color: "inherit" }}>Privacy</a>
            <a href="terms.html" style={{ textDecoration: "none", color: "inherit" }}>Terms</a>
            <a href="#" style={{ textDecoration: "none", color: "inherit" }}>Accessibility</a>
          </div>
          <div className="eho-badge">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M12 3l9 8h-2v9H5v-9H3l9-8z"/>
              <path d="M9 13h6M12 13v5"/>
              <path d="M9 16h6"/>
            </svg>
            <span>Equal Housing Opportunity</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function Modal({ open, onClose, title, eyebrow, children, wide }) {
  useEffect(() => {
    if (!open) return undefined;
    const previousOverflow = document.body.style.overflow;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = previousOverflow;
      document.removeEventListener("keydown", onKey);
    };
  }, [open, onClose]);
  return (
    <div className={"modal-backdrop" + (open ? " open" : "")} onClick={onClose} aria-hidden={!open}>
      <div
        className="modal"
        role="dialog"
        aria-modal="true"
        aria-label={title}
        style={wide ? { maxWidth: 820 } : undefined}
        onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <IconClose size={16} />
        </button>
        <div className="modal-head">
          {eyebrow && <div className="eyebrow" style={{ marginBottom: 8 }}>{eyebrow}</div>}
          <h3 style={{ fontSize: 30, margin: 0 }}>{title}</h3>
        </div>
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
}

// Section header used on every page
function SectionHead({ eyebrow, title, lede, light }) {
  return (
    <div className="section-head">
      {eyebrow && <span className={"eyebrow" + (light ? " on-dark" : "")}>{eyebrow}</span>}
      <h2 style={light ? { color: "var(--linen-2)" } : undefined}>{title}</h2>
      <WaveDivider onDark={light} />
      {lede && <p className="lede" style={light ? { color: "rgba(245,242,237,0.78)" } : undefined}>{lede}</p>}
    </div>
  );
}

function PrivacyPage() {
  return (
    <main>
      <section className="section">
        <div className="shell narrow">
          <SectionHead
            eyebrow="Privacy"
            title="Boardwalk House Privacy Policy"
            lede="How 190 S Kentucky LLC d/b/a Boardwalk House collects and uses information from leasing prospects." />
          <div className="policy-body">
            <p>190 S Kentucky LLC d/b/a Boardwalk House collects information that prospects choose to provide, including name, email address, phone number, desired residence type, move-in timing, waitlist or reservation interest, and messages submitted through our website, phone, text, email, or leasing tools.</p>
            <p>We use this information to respond to leasing inquiries, coordinate waitlist or follow-up tasks, maintain prospect records, improve leasing operations, and communicate with prospects about Boardwalk House.</p>
            <p>We may use trusted service providers to operate our website, communications, CRM, email, SMS, and leasing workflows. These providers are permitted to use information only to provide services for 190 S Kentucky LLC d/b/a Boardwalk House.</p>
            <p><strong>Text messaging originator opt-in data and consent will not be shared with any third parties or affiliates for marketing or promotional purposes.</strong> Mobile numbers and SMS consent information are used to provide 190 S Kentucky LLC d/b/a Boardwalk House leasing communications and related customer-care messages.</p>
            <p>Message frequency varies based on your inquiry and requested follow-up. Message and data rates may apply. Reply STOP to opt out of text messages. Reply HELP for help.</p>
            <p>Questions may be sent to <a href="mailto:leasing@boardwalkhouseac.com">leasing@boardwalkhouseac.com</a> or by calling or texting <a href="tel:16097107977">(609) 710-7977</a>.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

function TermsPage() {
  return (
    <main>
      <section className="section">
        <div className="shell narrow">
          <SectionHead
            eyebrow="Terms"
            title="Boardwalk House Messaging Terms"
            lede="Terms for 190 S Kentucky LLC d/b/a Boardwalk House leasing text messages." />
          <div className="policy-body">
            <p>190 S Kentucky LLC d/b/a Boardwalk House text messages provide low-volume leasing customer care and waitlist follow-up. Messages may include responses to leasing questions, follow-up after calls or website inquiries, and leasing team handoff updates.</p>
            <p>By opting in, you agree to receive recurring text messages from 190 S Kentucky LLC d/b/a Boardwalk House at the mobile number you provide. Consent is not required to rent, tour, or join the waitlist. Message frequency varies.</p>
            <p>Message and data rates may apply. Carriers are not liable for delayed or undelivered messages.</p>
            <p><strong>Reply HELP for help.</strong> You can also contact <a href="mailto:leasing@boardwalkhouseac.com">leasing@boardwalkhouseac.com</a> or call/text <a href="tel:16097107977">(609) 710-7977</a>.</p>
            <p><strong>Reply STOP to opt out.</strong> After opting out, you may receive one final confirmation message and no further 190 S Kentucky LLC d/b/a Boardwalk House text messages unless you opt in again.</p>
            <p>See the <a href="#privacy">Boardwalk House Privacy Policy</a> for how prospect and SMS consent information is handled.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

// Brand strip (the "Oceanfront Living • Enduring Quality" repeating motif)
function BrandStrip({ items }) {
  const defaults = ["Oceanfront Living.", "Enduring Quality.", "Iconic Location.", "Made for the life you've earned."];
  const list = items || defaults;
  return (
    <div className="brand-strip">
      {list.map((t, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="dot">◆</span>}
          <span>{t}</span>
        </React.Fragment>
      ))}
    </div>
  );
}

// Page hero used on sub-pages
function PageHero({ eyebrow, title, lede, photoUrl, children }) {
  return (
    <div className="page-hero">
      {photoUrl && <div className="photo" style={{ backgroundImage: `url(${photoUrl})` }} />}
      <div className="ovr" />
      <div className="inner">
        {eyebrow && <span className="eyebrow on-dark" style={{ display: "block", marginBottom: 18 }}>{eyebrow}</span>}
        <h1>{title}</h1>
        <WaveDivider onDark />
        {lede && <p className="lede" style={{ color: "rgba(245,242,237,0.85)", marginTop: 18 }}>{lede}</p>}
        {children}
      </div>
    </div>
  );
}

// Receipt values are renter preferences, never inventory or occupancy confirmations.
function LeadReceiptDetails({ data }) {
  const labels = { "1br": "1 Bedroom", "1br_den": "1 Bedroom + Den", "2br": "2 Bedroom", "fall-2026": "Fall 2026", "winter-2026": "Winter 2026/27", flexible: "Flexible", any: "Any layout", broker: "Broker partnership", employer: "Employer program" };
  const rows = [["Email", data.email], ["Phone", data.phone], ["Interest", data.interest || data.unitType], ["Requested timing", data.moveInTimeline || data.moveIn], ["Monthly rent budget", data.monthlyBudget], ["Unit preference", data.preferredUnit]];
  return <dl aria-label="Your recorded preferences" style={{ textAlign: "left", margin: "20px auto", maxWidth: 420, padding: 16, background: "var(--cream)", fontSize: 14 }}>
    {rows.filter(([, value]) => value).map(([label, value]) => <div key={label} style={{ marginBottom: 8 }}><dt style={{ color: "var(--muted)", fontSize: 12 }}>{label}</dt><dd style={{ margin: 0, overflowWrap: "anywhere" }}>{Object.hasOwn(labels, value) ? labels[value] : value}</dd></div>)}
  </dl>;
}

Object.assign(window, { LeadReceiptDetails, Header, Footer, Modal, SectionHead, BrandStrip, PageHero, NAV_ITEMS });