/* SPLASH (C) — engraved invitation card, two-door */

const M = window.MAF;

function Splash() {
  const { navigate } = M.useRoute();
  return (
    <div className="wf-screen" style={{ minHeight: '100vh', position: "relative", padding: 32, background: "var(--bg-secondary)" }}>
      <div style={{
        minHeight: 'calc(100vh - 64px)',
        background: "var(--bg-primary)",
        border: "1px solid var(--neutral-300)",
        borderRadius: 4,
        display: "flex",
        flexDirection: "column"
      }}>
        <div className="row between center" style={{ padding: "20px 32px", borderBottom: "1px solid var(--neutral-200)" }}>
          <M.Eyebrow>No. 001 · Athens, GA · MMXXVI</M.Eyebrow>
          <M.Eyebrow>Confidential to the bearer</M.Eyebrow>
        </div>

        <div className="col center" style={{ flex: 1, padding: "72px 56px", textAlign: "center", gap: 18 }}>
          <M.Wordmark height={56} />
          <M.Eyebrow style={{ marginTop: 12 }}>An inspired enclave · Madison County, Georgia</M.Eyebrow>
          <div className="t-h1" style={{ fontSize: 92, lineHeight: 1.05, maxWidth: 880, fontStyle: "italic", fontWeight: 400 }}>
            Southern grace<br/>meets European<br/>sophistication.
          </div>
          <M.Note style={{ maxWidth: 580, fontSize: 14, lineHeight: 1.75 }}>
            One hundred and forty-seven homesites across three hundred acres of pristine Georgia countryside,
            just minutes from Athens and The Rose Golf Club. Site plan, builders, plans, and pricing are
            visible to invited guests only.
          </M.Note>

          <div style={{ width: 80, height: 1, background: "var(--neutral-300)", margin: "24px auto" }} />

          <div className="row gap-12 center" style={{ marginTop: 4 }}>
            <div className="col center gap-2" style={{ width: 300 }}>
              <M.Eyebrow>Invited</M.Eyebrow>
              <div className="t-h4" style={{ fontStyle: "italic" }}>Begin the walkthrough</div>
              <M.Note style={{ fontSize: 12 }}>Magic-link sent to your invited email.</M.Note>
              <div className="col gap-2" style={{ width: '100%', marginTop: 12 }}>
                <div className="wf-input" style={{ width: '100%' }}>you@example.com</div>
                <button className="wf-btn" style={{ justifyContent: 'center' }}
                        onClick={() => navigate('landing')}>
                  Sign In →
                </button>
              </div>
            </div>

            <div style={{ width: 1, height: 200, background: "var(--neutral-300)", margin: "0 var(--space-6)" }} />

            <div className="col center gap-2" style={{ width: 300 }}>
              <M.Eyebrow>Uninvited</M.Eyebrow>
              <div className="t-h4" style={{ fontStyle: "italic" }}>Request a place</div>
              <M.Note style={{ fontSize: 12 }}>Rose Golf Club members hold first priority through October 31.</M.Note>
              <div className="col gap-2" style={{ width: '100%', marginTop: 12 }}>
                <div className="row gap-2">
                  <div className="wf-input" style={{ flex: 1 }}>First name</div>
                  <div className="wf-input" style={{ flex: 1 }}>Last name</div>
                </div>
                <div className="wf-input">Email address</div>
                <button className="wf-btn wf-btn-ghost" style={{ justifyContent: 'center' }}>
                  Request Invitation →
                </button>
              </div>
            </div>
          </div>
        </div>

        <div className="row between center" style={{
          padding: "16px 32px",
          borderTop: "1px solid var(--neutral-200)",
          background: "var(--bg-secondary)"
        }}>
          <M.Eyebrow>Madison Fields</M.Eyebrow>
          <M.Eyebrow>Athens, Georgia</M.Eyebrow>
          <M.Eyebrow>Spring MMXXVI</M.Eyebrow>
        </div>
      </div>
    </div>
  );
}

window.MAF.Splash = Splash;