/* Pages.jsx — Legal, Contact, CheckIn explainer */

/* =========== LEGAL =========== */
function LegalPage() {
  const [tab, setTab] = React.useState(() => (window.location.hash || '#terms').replace('#',''));
  React.useEffect(() => {
    const f = () => setTab((window.location.hash || '#terms').replace('#',''));
    window.addEventListener('hashchange', f);
    return () => window.removeEventListener('hashchange', f);
  }, []);
  const goto = (t) => { window.location.hash = t; setTab(t); };

  return (
    <>
      <section style={{ padding: '80px 0 32px', background: 'var(--sand-100)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>Fine print, plain language</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(36px, 4.4vw, 56px)', color: 'var(--navy-900)',
            margin: '12px auto 16px', letterSpacing: '-0.015em', maxWidth: 720,
          }}>The rules we live by.</h1>
          <p style={{ color: 'var(--ink-500)', fontSize: 16, maxWidth: 580, margin: '0 auto', lineHeight: 1.6 }}>
            Terms, privacy, and house rules — written in everyday English (and Spanish on request).
          </p>
        </div>
      </section>

      <style>{`
        .legal-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
        .legal-sidebar { position: static; overflow-x: auto; display: flex; gap: 4px; }
        .legal-sidebar button { white-space: nowrap; }
        @media (min-width: 900px) {
          .legal-grid { grid-template-columns: 240px 1fr; gap: 48px; }
          .legal-sidebar { position: sticky; top: 96px; align-self: flex-start; display: block; overflow: visible; }
        }
        .legal-article { padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 56px); }
      `}</style>
      <div style={{ padding: '32px 0 72px' }}>
        <div className="container legal-grid">
          <aside className="legal-sidebar">
            {[
              { id: 'terms',   label: 'Terms of Service' },
              { id: 'privacy', label: 'Privacy Policy' },
              { id: 'rules',   label: 'House Rules' },
              { id: 'cancellation', label: 'Cancellation' },
            ].map(i => (
              <button key={i.id} onClick={() => goto(i.id)} style={{
                display: 'block', textAlign: 'left',
                padding: '12px 16px', borderRadius: 10, border: 0,
                background: tab === i.id ? 'var(--navy-900)' : 'transparent',
                color: tab === i.id ? 'var(--sand-50)' : 'var(--ink-700)',
                fontSize: 13, fontWeight: 500, cursor: 'pointer', marginBottom: 4,
                fontFamily: 'inherit', flexShrink: 0, minHeight: 44,
              }}>{i.label}</button>
            ))}
          </aside>

          <article className="legal-article" style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 18, maxWidth: 780, overflow: 'hidden' }}>
            {tab === 'terms' && <Terms />}
            {tab === 'privacy' && <Privacy />}
            {tab === 'rules' && <Rules />}
            {tab === 'cancellation' && <Cancellation />}
          </article>
        </div>
      </div>
    </>
  );
}

function LegalH1({ children }) {
  return <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 36, color: 'var(--navy-900)', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{children}</h2>;
}
function LegalH2({ children }) {
  return <h3 style={{ fontFamily: 'var(--font-text)', fontWeight: 600, fontSize: 16, color: 'var(--navy-900)', margin: '24px 0 8px', letterSpacing: 0 }}>{children}</h3>;
}
function LegalBody({ children }) {
  return <p style={{ color: 'var(--ink-700)', fontSize: 15, lineHeight: 1.7, margin: '0 0 12px' }}>{children}</p>;
}
function LegalUpdated() {
  return <div style={{ color: 'var(--ink-500)', fontSize: 12, marginTop: 4 }}>Last updated: May 26, 2026</div>;
}

function Terms() {
  return (
    <div>
      <LegalH1>Terms of Service</LegalH1>
      <LegalUpdated />
      <LegalBody>
        These terms govern any reservation you make with Novus Residentials LLC ("Novus", "we"), a short-term rental and property-management company operating in Miami-Dade County, Florida.
      </LegalBody>
      <LegalH2>1 · Booking and confirmation</LegalH2>
      <LegalBody>
        A reservation is confirmed when you have agreed to these terms, paid the requested deposit, and received a confirmation by email. Direct bookings (through novusresidentials.com) get a Novus loyalty number; bookings made through Airbnb, VRBO, or Booking.com follow that platform's own additional terms.
      </LegalBody>
      <LegalH2>2 · Payment</LegalH2>
      <LegalBody>
        Direct bookings: 50% on confirmation, the balance 30 days before arrival. Stays under 30 days: paid in full at booking. We accept Visa, Mastercard, Amex, ACH, and wire transfer. A refundable damage hold may be placed on your card 48 hours before arrival.
      </LegalBody>
      <LegalH2>3 · Identity verification</LegalH2>
      <LegalBody>
        All guests over 18 must complete identity verification before the door code activates. We require a government-issued photo ID and a brief selfie capture — both stored encrypted and used only for guest registration as required in Miami-Dade County.
      </LegalBody>
      <LegalH2>4 · Concierge services</LegalH2>
      <LegalBody>
        Concierge services (chef, yacht, spa, drivers, event planning) are billed separately on confirmation. Cancellations of concierge add-ons follow each vendor's policy and are disclosed at the time of booking.
      </LegalBody>
      <LegalH2>5 · Liability</LegalH2>
      <LegalBody>
        Novus is not liable for indirect or consequential damages arising from your stay, force-majeure events, or the actions of third-party vendors. Maximum liability is capped at the value of the reservation.
      </LegalBody>
      <LegalH2>6 · Disputes</LegalH2>
      <LegalBody>
        These terms are governed by the laws of the State of Florida. Disputes will be resolved by binding arbitration in Miami-Dade County, except for small-claims matters.
      </LegalBody>
    </div>
  );
}
function Privacy() {
  return (
    <div>
      <LegalH1>Privacy Policy</LegalH1>
      <LegalUpdated />
      <LegalBody>
        We collect only what we need to host you well — your name, email, phone, payment details, and identity documents required by law. Identity documents are encrypted at rest and never sold or shared with marketing partners.
      </LegalBody>
      <LegalH2>What we collect</LegalH2>
      <LegalBody>
        Account & booking data; identity documents (ID + selfie); communications with our team; usage data from this website (cookies, page views); concierge requests you place.
      </LegalBody>
      <LegalH2>How we use it</LegalH2>
      <LegalBody>
        To process reservations, register guests with the County as legally required, send transactional messages (booking confirmation, check-in instructions, door code), and — if you opt in — occasional updates about new properties and seasonal experiences.
      </LegalBody>
      <LegalH2>Your rights</LegalH2>
      <LegalBody>
        You can request access, correction, or deletion of your personal data at any time by writing to <a href="mailto:privacy@novusresidentials.com">privacy@novusresidentials.com</a>. We respond within 30 days.
      </LegalBody>
      <LegalH2>Third parties</LegalH2>
      <LegalBody>
        We use Stripe for payments, Twilio for SMS/WhatsApp, and a small set of operational vendors (cleaning, lock systems). Each handles a narrow slice of data and is bound by data-processing agreements.
      </LegalBody>
      <LegalH2>Cookies</LegalH2>
      <LegalBody>
        We use a minimal set of cookies for session management and anonymized analytics. No ad-tech cross-site tracking.
      </LegalBody>
    </div>
  );
}
function Rules() {
  return (
    <div>
      <LegalH1>House Rules</LegalH1>
      <LegalUpdated />
      <LegalBody>Few, clear, and they exist to protect the experience for you and the neighbors.</LegalBody>

      {[
        ['Arrival', 'Check-in from 4:00 PM. The digital door code activates at that time. Late arrivals are welcome — text the host so we keep an eye out.'],
        ['Capacity', 'Maximum guests as listed for each property (typically 10 in a villa, 4 in an apartment). Events of any kind require prior written approval.'],
        ['Quiet hours', 'Music and noise moderate after 10:00 PM. Outdoor speakers off after 10:00 PM. Both properties and neighborhoods are residential.'],
        ['Smoking', 'No smoking indoors — designated outdoor areas only. Vape and cannabis are treated the same as tobacco.'],
        ['Pets', 'Welcome with prior notice and an additional cleaning fee. Up to two pets under 40 lb each. Service animals always welcome.'],
        ['Pool & water', 'Swim at your own risk. Children must be supervised at all times around pools, hot tubs, and bay access.'],
        ['Damage', 'Accidents happen — let us know. Significant or willful damage is billed against the card on file at fair-market cost.'],
        ['Departure', 'Check-out by 11:00 AM. Leave the keys (if any) on the kitchen counter. No need to strip beds — just put used towels on the floor.'],
      ].map(([k,v]) => (
        <div key={k} style={{ padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
          <div style={{ fontWeight: 500, color: 'var(--navy-900)', marginBottom: 4 }}>{k}</div>
          <div style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.65 }}>{v}</div>
        </div>
      ))}
    </div>
  );
}
function Cancellation() {
  return (
    <div>
      <LegalH1>Cancellation</LegalH1>
      <LegalUpdated />
      <LegalH2>Flexible</LegalH2>
      <LegalBody>Full refund up to 48 hours after booking, as long as arrival is at least 14 days away.</LegalBody>
      <LegalH2>Moderate</LegalH2>
      <LegalBody>50% refund up to 7 days before arrival. After that, the reservation is non-refundable but transferable to another Novus property within 12 months, subject to availability.</LegalBody>
      <LegalH2>Strict (peak weekends · F1, Art Basel, Super Bowl)</LegalH2>
      <LegalBody>Non-refundable from booking. Transferable to another Novus stay within 6 months, subject to a 10% admin fee.</LegalBody>
      <LegalH2>Travel insurance</LegalH2>
      <LegalBody>Recommended for trips over $5,000 or international guests. We can suggest a provider.</LegalBody>
    </div>
  );
}

/* =========== CONTACT =========== */
function ContactPage() {
  return (
    <>
      <section style={{ padding: '80px 0 32px', background: 'var(--sand-100)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>Get in touch</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(40px, 4.8vw, 64px)', color: 'var(--navy-900)',
            margin: '12px auto 16px', letterSpacing: '-0.02em', maxWidth: 720, textWrap: 'balance',
          }}>Tell us what you're <em style={{ fontStyle: 'italic' }}>planning</em>.</h1>
          <p style={{ color: 'var(--ink-500)', fontSize: 16, maxWidth: 580, margin: '0 auto', lineHeight: 1.6 }}>
            We respond within 20 minutes between 8 AM and midnight Miami time. Outside those hours, our automation handles urgent items.
          </p>
        </div>
      </section>

      <section style={{ padding: '32px 0 72px' }}>
        <style>{`
          .contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
          @media (min-width: 900px) {
            .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 48px; }
          }
        `}</style>
        <div className="container contact-grid">
          <ContactForm />
          <ContactSidebar />
        </div>
      </section>

      <ContactMap />
    </>
  );
}

function ContactForm() {
  const [reason, setReason] = React.useState('stay');
  const [submitted, setSubmitted] = React.useState(false);

  if (submitted) {
    return (
      <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 18, padding: 48, textAlign: 'center' }}>
        <span className="sun-bullet" style={{ width: 32, height: 32 }} />
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 32, color: 'var(--navy-900)', margin: '20px 0 10px' }}>Thank you.</h2>
        <p style={{ color: 'var(--ink-700)' }}>Miguel will be in touch shortly. <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic' }}>Nos vemos pronto.</em></p>
      </div>
    );
  }

  return (
    <form onSubmit={e => { e.preventDefault(); setSubmitted(true); }}
          style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 18, padding: 32 }}>
      <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink-500)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 14 }}>I'm reaching out about</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 24 }}>
        {[
          ['stay', 'A stay'],
          ['concierge', 'Concierge / Yacht'],
          ['event', 'Event planning'],
          ['cohost', 'Listing my property'],
          ['press', 'Press / partners'],
        ].map(([id, l]) => (
          <button type="button" key={id} onClick={() => setReason(id)} style={{
            padding: '8px 16px', borderRadius: 999,
            border: '1px solid', borderColor: reason === id ? 'var(--navy-700)' : 'var(--line)',
            background: reason === id ? 'var(--navy-900)' : '#fff',
            color: reason === id ? '#fff' : 'var(--ink-700)',
            fontSize: 13, fontWeight: 500, cursor: 'pointer',
          }}>{l}</button>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        <Field label="First name" required />
        <Field label="Last name" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
        <Field label="Email" type="email" required />
        <Field label="Phone (optional)" type="tel" />
      </div>

      {reason === 'stay' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, marginBottom: 14 }}>
          <Field label="Arrival" placeholder="Add dates" />
          <Field label="Departure" placeholder="Add dates" />
          <Field label="Guests" placeholder="2 adults" />
        </div>
      )}
      {reason === 'concierge' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
          <Field label="Service interested in" placeholder="Yacht · Chef · Spa · Driver" />
          <Field label="Date" placeholder="Approximate date" />
        </div>
      )}
      {reason === 'event' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
          <Field label="Occasion" placeholder="Birthday · Wedding · Anniversary" />
          <Field label="Guests" placeholder="Approx. 20" />
        </div>
      )}
      {reason === 'cohost' && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
          <Field label="Property address or area" required />
          <Field label="Bedrooms" />
        </div>
      )}

      <div className="field" style={{ marginBottom: 14 }}>
        <label>Tell us more</label>
        <textarea rows="5" placeholder="A few sentences on what you have in mind. The more detail, the better we can tailor a response." />
      </div>

      <div className="field" style={{ marginBottom: 18 }}>
        <label>Preferred language</label>
        <select defaultValue="en">
          <option value="en">English</option>
          <option value="es">Español</option>
          <option value="pt">Português</option>
        </select>
      </div>

      <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '16px' }}>
        Send to the concierge →
      </button>
      <div style={{ marginTop: 10, textAlign: 'center', fontSize: 12, color: 'var(--ink-500)' }}>
        We respond within 20 minutes during waking hours.
      </div>
    </form>
  );
}

function Field({ label, required, type = 'text', placeholder }) {
  return (
    <div className="field">
      <label>{label}{required && <span style={{ color: 'var(--sun-coral)', marginLeft: 4 }}>·</span>}</label>
      <input type={type} placeholder={placeholder} required={required} />
    </div>
  );
}

function ContactSidebar() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ background: 'var(--navy-900)', color: '#fff', borderRadius: 18, padding: 32 }}>
        <div className="overline" style={{ color: 'var(--horizon-200)' }}>Direct line</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 28, margin: '10px 0 24px', letterSpacing: '-0.01em' }}>
          Miguel is on it.
        </h3>
        <div style={{ display: 'grid', gap: 14, fontSize: 14 }}>
          <Row label="WhatsApp" value="+1 305-848-3113" />
          <Row label="Email" value="info@novusresidentials.com" />
          <Row label="Hours" value="8 AM – 12 AM ET, every day" />
        </div>
      </div>

      <div style={{ background: '#fff', borderRadius: 18, padding: 32, border: '1px solid var(--line)' }}>
        <div className="overline">Visit</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 26, margin: '8px 0 16px', color: 'var(--navy-900)' }}>
          Novus Residentials HQ
        </h3>
        <div style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.7 }}>
          1450 Brickell Avenue, Suite 1900<br />
          Miami, FL 33131<br /><br />
          By appointment only.
        </div>
      </div>

      <div style={{ background: 'var(--sand-100)', borderRadius: 18, padding: 24 }}>
        <div className="overline">Follow</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
          {[
            ['Instagram', 'https://www.instagram.com/novusresidentials.mia/'],
            ['TikTok', 'https://www.tiktok.com/@novusresidential'],
            ['YouTube', 'https://www.youtube.com/@NovusResidentials'],
          ].map(([n, h]) => (
            <a key={n} href={h} target="_blank" rel="noreferrer" style={{
              padding: '8px 14px', background: '#fff', border: '1px solid var(--line)', borderRadius: 999,
              fontSize: 12, color: 'var(--navy-700)', fontWeight: 600, letterSpacing: '0.06em',
            }}>{n} →</a>
          ))}
        </div>
      </div>
    </div>
  );
}

function Row({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--horizon-200)', fontWeight: 600 }}>{label}</div>
      <div style={{ marginTop: 2 }}>{value}</div>
    </div>
  );
}

/* Stylized SVG map */
function ContactMap() {
  return (
    <section style={{ padding: '0 0 80px' }}>
      <div className="container">
        <div style={{
          position: 'relative', borderRadius: 20, overflow: 'hidden', height: 420,
          background: 'linear-gradient(160deg, #BFD3E2 0%, #E4DED2 70%, #FCAC64 100%)',
        }}>
          <svg viewBox="0 0 1200 420" style={{ width: '100%', height: '100%' }} preserveAspectRatio="none">
            <defs>
              <linearGradient id="water" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#A5CFE6" />
                <stop offset="100%" stopColor="#5588AE" />
              </linearGradient>
            </defs>
            {/* sea */}
            <rect x="0" y="0" width="1200" height="420" fill="url(#water)" />
            {/* land */}
            <path d="M 0 80 Q 200 60, 360 90 T 720 100 Q 880 90, 1200 120 L 1200 420 L 0 420 Z" fill="#FAF7F2" opacity="0.95" />
            {/* roads */}
            <path d="M 0 220 L 1200 220" stroke="#E4DED2" strokeWidth="3" />
            <path d="M 600 100 L 600 420" stroke="#E4DED2" strokeWidth="3" />
            <path d="M 200 100 L 250 420" stroke="#E4DED2" strokeWidth="2" />
            <path d="M 900 100 L 940 420" stroke="#E4DED2" strokeWidth="2" />
            {/* pin */}
            <circle cx="640" cy="260" r="60" fill="rgba(252,172,100,0.18)" />
            <circle cx="640" cy="260" r="22" fill="#1A4568" />
            <circle cx="640" cy="260" r="9" fill="#fff" />
          </svg>
          <div style={{
            position: 'absolute', left: 32, bottom: 28, padding: '14px 22px',
            background: '#fff', borderRadius: 14, boxShadow: '0 8px 24px rgba(15,42,66,0.14)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <img src="../../assets/novus-logo-mark.jpg" style={{ height: 36, borderRadius: 4 }} alt="" />
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--navy-900)' }}>Novus Residentials HQ</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>1450 Brickell Ave · Miami, FL</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========== CHECK-IN EXPLAINER =========== */
function CheckInExplainer() {
  return (
    <>
      <section style={{ padding: '80px 0 60px', background: 'linear-gradient(180deg, var(--sand-100), var(--sand-50))' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <span className="sun-bullet" />
          <div className="overline" style={{ marginTop: 14 }}>The arrival, designed</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 'clamp(40px, 5.2vw, 72px)', color: 'var(--navy-900)',
            margin: '14px auto 16px', letterSpacing: '-0.02em', maxWidth: 820, textWrap: 'balance', lineHeight: 1.05,
          }}>Check in <em style={{ fontStyle: 'italic' }}>before</em> you land.</h1>
          <p style={{ color: 'var(--ink-700)', fontSize: 17, maxWidth: 580, margin: '0 auto 32px', lineHeight: 1.65 }}>
            A 90-second digital check-in. Verify your ID, sign the agreement, and your door code activates at exactly 4 PM on arrival day. No keys, no lobby waits.
          </p>
          <a href="check-in-flow.html" className="btn btn-primary" style={{ padding: '14px 28px', fontSize: 15 }}>
            Start your check-in →
          </a>
          <div style={{ marginTop: 14, fontSize: 12, color: 'var(--ink-500)' }}>
            Have a reservation? You'll see it after signing in.
          </div>
        </div>
      </section>

      <section style={{ padding: '80px 0' }}>
        <div className="container">
          <div className="checkin-steps">
            {[
              { n: '01', t: 'Confirm your identity', d: 'Government ID + live selfie. Encrypted and used only for the legally-required guest registration.' },
              { n: '02', t: 'Read & sign the agreement', d: 'House rules in plain English. Cancellation policy. Damage hold. Tap to sign.' },
              { n: '03', t: 'Tell us your arrival', d: 'Approximate ETA + how you\u2019re getting in (Uber, rental, taxi from MIA / FLL).' },
              { n: '04', t: 'Get your door code', d: 'Activated at 4 PM on the day of arrival. Wi-Fi password unlocked at the same time.' },
            ].map(s => (
              <div key={s.n} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 36, color: 'var(--sun-coral)', letterSpacing: '-0.01em' }}>{s.n}</div>
                <div style={{ fontWeight: 500, color: 'var(--navy-900)', marginTop: 8, fontSize: 16 }}>{s.t}</div>
                <p style={{ margin: '8px 0 0', fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.6 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .checkin-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
        @media (min-width: 640px) { .checkin-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
        @media (min-width: 1024px) { .checkin-steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
        .checkin-cta-grid {
          display: grid; grid-template-columns: 1fr; gap: 24px;
          align-items: center;
        }
        @media (min-width: 900px) {
          .checkin-cta-grid { grid-template-columns: 1.2fr 1fr; gap: 40px; }
        }
      `}</style>
      <section style={{ padding: '0 0 64px' }}>
        <div className="container">
          <div className="checkin-cta-grid" style={{
            background: 'var(--navy-900)', color: '#fff', borderRadius: 20,
            padding: 'clamp(24px, 5vw, 48px)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', right: -120, top: -120, width: 400, height: 400, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(252,172,100,0.24) 0%, rgba(252,172,100,0) 60%)',
            }} />
            <div style={{ position: 'relative' }}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 36, letterSpacing: '-0.01em', margin: '0 0 12px' }}>
                A premium arrival, every time.
              </h2>
              <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 15, lineHeight: 1.65 }}>
                The guest portal also gives you the Wi-Fi password, the host's WhatsApp, your stay countdown, points balance, and a Spanish/English AI concierge — all on day one.
              </p>
              <div style={{ marginTop: 22, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <a href="../guest-portal/index.html" className="btn btn-on-dark">Open the guest portal</a>
                <a href="contact.html" className="btn" style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.32)' }}>Don't have a reservation?</a>
              </div>
            </div>
            <div style={{ position: 'relative' }}>
              <img src="../../assets/properties/aria-on-the-bay-bedroom.png" alt="Inside a Novus residence"
                   style={{ width: '100%', borderRadius: 12, objectFit: 'cover', aspectRatio: '4/3' }} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.LegalPage = LegalPage;
window.ContactPage = ContactPage;
window.CheckInExplainer = CheckInExplainer;