// Sections: Nav, Hero, Experience, Firm, Partners, Audience, Pricing, Credit, Footer, LoginModal

const { useState, useEffect, useRef } = React;

/* ---------------- Nav ---------------- */
const Nav = ({ onLogin, openWaitlist }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"top " + (scrolled ? "scrolled" : "")}>
      <a href="#top" className="brand" aria-label="Redlined home">
        <span className="dot" />
        <span><span className="red-part">RED</span>LINED</span>
      </a>
      <div className="nav-links">
        <a href="#experience">How It Works</a>
        <a href="#firm">The Firm</a>
        <a href="#pricing">Pricing</a>
        <button className="btn btn-primary" onClick={openWaitlist}>Join the Waitlist</button>
      </div>
    </nav>
  );
};

/* ---------------- Hero ---------------- */
const Hero = ({ onCta, variant }) => {
  const variants = {
    default: ["A law firm partner just left you a message.", "They're not happy."],
    billable: ["The billable clock is running.", "You have forty-five seconds."],
    draft: ["The draft is on your desk.", "It shouldn't be."],
  };
  const [l1, l2] = variants[variant] || variants.default;
  return (
    <header className="hero" id="top">
      <div className="hero-bg"><div className="skyline" /></div>
      <div className="wrap">
        <div className="hero-meta"><span className="ping" />
          <span className="mono" style={{fontSize:14,letterSpacing:"0.22em",textTransform:"uppercase"}}>
            Broad &amp; Stone · Associate Portal · Incoming
          </span>
        </div>
        <h1 className="hero-h h-display">
          <span className="line l1">{l1}</span>
          <span className="line l2">{l2}</span>
        </h1>
        <p className="lede">
          Enter an interactive experience where elite law firm partners test your judgment,
          challenge your instincts, and teach you real law — under pressure, against the clock,
          with consequences.
        </p>
        <div className="hero-ctas">
          <button className="btn btn-primary" onClick={onCta}>
            Join the Waitlist <span className="arrow">→</span>
          </button>
        </div>
      </div>
      <div className="hero-ticker">
        <span>CASE NO. 2026-A-0413</span>
        <span className="dotline"></span>
        <span className="r">PRIVILEGED &amp; CONFIDENTIAL</span>
        <span className="dotline"></span>
        <span>NEW YORK · N.Y.</span>
      </div>
    </header>
  );
};

/* ---------------- Redline Vignette (Machaon / Turandot) ---------------- */
const RedlineVignette = () => {
  return (
    <div className="vig reveal d1 redline-vig">
      <div className="tag">02 · The Redline</div>
      {/* numbering preserved by render order; see Experience grid */}

      <div className="doc termsheet">
        <div className="doc-head ts-head">
          <div className="ts-title">
            <div className="ts-co">MACHAON SURGICAL, INC.</div>
            <div className="ts-sub">Series C Preferred Stock Financing</div>
            <div className="ts-sub muted">Proposed Term Sheet — Marked Up by Lead Investor</div>
            <div className="ts-sub muted">Lead Investor: Turandot Capital Partners</div>
          </div>
          <div className="ts-stamp">TRACKED CHANGES</div>
        </div>

        <div className="ts-table">
          <div className="ts-row ghost">
            <div className="ts-label">Dividends</div>
            <div className="ts-value">The holders of Series C Preferred Stock shall be entitled to cumulative dividends at the rate of 8% per annum…</div>
          </div>
          <div className="ts-row active">
            <div className="ts-label">Board Composition</div>
            <div className="ts-value">
              The Board of Directors shall consist of five (5) members:
              two (2) designated by holders of a majority of Common Stock,{" "}
              <span className="ins-block">
                <span className="ins-text">one of whom shall be the Chief Executive Officer of the Company,</span>
              </span>{" "}
              two (2) designated by holders of a majority of Series C Preferred Stock,
              and one (1) independent director mutually agreed upon by the Common
              and Preferred holders.
            </div>
          </div>
          <div className="ts-row ghost">
            <div className="ts-label">Protective Provisions</div>
            <div className="ts-value">So long as any Series C Preferred remains outstanding, consent of the holders of a majority of the Series C…</div>
          </div>
        </div>
      </div>

      <h3>Spot the trap.</h3>
      <p className="copy">Real contract language. Real negotiation tactics. The change that looks favorably may turn out to be a power grab.</p>
    </div>
  );
};

/* ---------------- Experience ---------------- */
const Experience = () => {
  const [typed, setTyped] = useState(false);
  const [seconds, setSeconds] = useState(45);
  const ref = useRef(null);

  useEffect(() => {
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setTimeout(()=>setTyped(true), 900); io.disconnect(); } });
    }, { threshold: 0.05 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  useEffect(() => {
    if (!typed) return;
    const t = setInterval(() => setSeconds(s => (s <= 1 ? 45 : s - 1)), 1000);
    return () => clearInterval(t);
  }, [typed]);

  return (
    <section id="experience" ref={ref}>
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="num">01 <span>/ 04</span></div>
            <h2 className="reveal d1">This is not a course.<br/>This is a proving ground.</h2>
          </div>
          <div className="sub reveal d2">
            Different modes, woven into every scenario, spanning many areas of the law. Each one borrows from a tool you'll
            use on the job — and weaponizes it against the clock. No AI to the rescue.
          </div>
        </div>

        <div className="vig-grid">
          {/* 03 · Partner Message — rendered third below; placed here originally for state.
               Moving the JSX itself to keep DOM order = visual order. */}
          {/* Vignette 1 — The Client */}
          <div className="vig reveal">
            <div className="tag">01 · The Client</div>
            <div className="voice">
              <div className="vm-head">
                <span className="vm-label">New Message</span>
                <span className="vm-priority">Priority: Urgent</span>
              </div>
              <div className="vm-meta">
                <span className="who">David Chen</span>
                <span className="role">CEO, Machaon Surgical</span>
                <span className="vm-time">Received 6:42 AM</span>
              </div>
              <div className="frame video-frame">
                <video
                  className="vm-video"
                  poster={window.CHEN_POSTER_SRC || "src/chen-voicemail-poster.png"}
                  preload="metadata"
                  playsInline
                  webkit-playsinline="true"
                  x5-playsinline="true"
                  controls
                  controlsList="nodownload"
                  ref={(el) => {
                    if (!el || el.dataset.bound) return;
                    el.dataset.bound = "1";
                    const KEY = "redlined.chenVideoTime";
                    const saved = parseFloat(localStorage.getItem(KEY) || "0");
                    if (!isNaN(saved) && saved > 0) {
                      el.addEventListener("loadedmetadata", () => { try { el.currentTime = Math.min(saved, (el.duration||0) - 0.1); } catch(_){} }, { once:true });
                    }
                    el.addEventListener("timeupdate", () => {
                      localStorage.setItem(KEY, String(el.currentTime || 0));
                    });
                  }}
                >
                  <source src={window.CHEN_VIDEO_SRC || "src-v2/chen-voicemail.mp4"} type="video/mp4" />
                </video>
                <div className="ts">06:42 · MON</div>
                <div className="rec">RECORDED</div>
              </div>
              <div className="vm-preview">
                <p>"Caroline, I just got off the phone with Turandot's managing partner. He's saying the board language is standard but I've been on enough boards to know when someone's trying to —"</p>
                <div className="vm-foot">
                  <span className="vm-cta">▸ Contains profanity</span>
                  <span className="dur">1:23</span>
                </div>
              </div>
            </div>
            <div className="portal portal-followup">
              <div className="bar">
                <span><span className="dot"/>B&amp;S · Associate Portal</span>
                <span>Follow-Up</span>
              </div>
              <div className="body">
                <div className="msg-meta">
                  <span className="who">Caroline Pryce</span>
                  <span>·</span>
                  <span>6:58 AM</span>
                  <span>·</span>
                  <span>Corporate / M&amp;A</span>
                </div>
                <div className="msg-body">
                  I just listened to Chen's message. Draft me a proposed response.
                  Use your <strong className="emph-judgment">JUDGMENT</strong>.
                </div>
              </div>
            </div>
            <h3>High stakes disputes and negotiations.</h3>
            <p className="copy">Client messages arrive without warning. A panicked CEO. A smug opposing counsel. A board chair who's gone off-script. You decide how to respond.</p>
          </div>

          {/* Vignette 2 — The Redline */}
          <RedlineVignette />

          {/* Vignette 3 — The Partner Message */}
          <div className="vig reveal d2" style={{gridRow:"span 1"}}>
            <div className="tag">03 · The Partner Message</div>
            <div className="portal">
              <div className="bar">
                <span><span className="dot"/>B&amp;S · Associate Portal</span>
                <span>End-to-End Encrypted</span>
              </div>
              <div className="body">
                <div className="msg-meta">
                  <span className="who">Caroline Pryce</span>
                  <span>·</span>
                  <span>6:15 AM</span>
                  <span>·</span>
                  <span>Corporate / M&amp;A</span>
                </div>
                {!typed ? (
                  <div className="typing"><span/><span/><span/></div>
                ) : (
                  <div className="msg-body">
                    Turandot Capital's revisions to our proposed term sheet for the
                    Series C Preferred Stock financing just came in. I need your
                    substantive review of their revisions by 9:00 AM.
                    If you get the proposed change to the board composition wrong,
                    don't bother coming in tomorrow. Remember, our client is
                    Machaon Surgical, Inc.
                  </div>
                )}
                {typed && (
                  <>
                    <div className="timer">
                      <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="none" stroke="currentColor"/></svg>
                      00:{String(seconds).padStart(2,"0")} to respond
                    </div>
                    <div style={{marginTop:14}}>
                      <div className="choice"><span className="caret">▸</span> Understood. I'll review the full term sheet mark-up and send you a summary of substantive issues with my redline by 9:00 AM sharp.</div>
                      <div className="choice"><span className="caret">▸</span> I'll focus on the board composition change and have my analysis to you by 8:30 AM.</div>
                    </div>
                  </>
                )}
              </div>
            </div>
            <h3>Timed choices under pressure.</h3>
            <p className="copy">Your partner is remote. Impatient. Watching. Every answer shapes what happens next.</p>
          </div>

          {/* Vignette 4 — The Debrief */}
          <div className="vig reveal d3">
            <div className="tag">04 · The Debrief</div>
            <div className="brief brief-debrief">
              <div className="bh">
                <span className="stamp">Legal Brief</span>
                <span className="by">Caroline Pryce</span>
              </div>
              <div className="db-body">
                <p>
                  You missed the boat completely on the proposed revisions to the
                  board composition. <strong>Unreal.</strong> I even flagged this
                  issue for you.
                </p>
                <p>
                  This is a very complex issue for this particular financing. You
                  are obviously not thinking about board dynamics — or you
                  simply lack judgment. You needed to consider the different
                  outcomes based on the proposed language. How will they play out
                  for our client? What happens after the financing closes? What
                  about six months later? You didn't think any of that through.
                </p>
                <p>
                  Oh, and by the way — you didn't even consider <strong>who our
                  client is. And who is NOT our client.</strong>
                </p>
                <p>
                  I know you are new here. But if you want a future at this firm,
                  this is not how you go about it. See me in my office first thing
                  tomorrow morning and I will make this quite clear.
                </p>
                <p className="db-turn">Now, as to your "analysis":</p>
              </div>
              <div className="redact" aria-label="Redacted legal analysis">
                <span className="rb" style={{width:"96%"}} />
                <span className="rb" style={{width:"88%"}} />
                <span className="rb" style={{width:"92%"}} />
                <span className="rb" style={{width:"74%"}} />
                <span className="rb" style={{width:"94%"}} />
                <span className="rb" style={{width:"81%"}} />
                <span className="rb" style={{width:"68%"}} />
              </div>
              <div className="db-cta">Play the full scenario to unlock this brief.</div>
            </div>
            <h3>You learn law by practicing. Start here.</h3>
            <p className="copy">Expect direct feedback — the kind you'd get at an elite firm. Faint praise when you're right. Something worse when you're wrong.</p>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------------- Firm ---------------- */
const Firm = () => (
  <section id="firm" className="firm-section">
    <div className="firm-video-wrap" aria-hidden="true">
      <video
        className="firm-video"
        src="src-v2/firm-bg.mp4"
        poster="src-v2/firm-bg-poster.png"
        autoPlay muted loop playsInline
        preload="auto"
        webkit-playsinline="true"
        ref={(el) => {
          if (!el || el.dataset.bound) return;
          el.dataset.bound = "1";
          // iOS: muted must be a real property before play() or autoplay is blocked
          el.muted = true;
          el.defaultMuted = true;
          el.setAttribute("muted", "");
          const kick = () => { const p = el.play(); if (p && p.catch) p.catch(()=>{}); };
          if (el.readyState >= 2) kick();
          el.addEventListener("loadeddata", kick, { once: true });
          el.addEventListener("canplay", kick, { once: true });
          // Fallback: first user tap anywhere starts it if autoplay was blocked
          const onTouch = () => { kick(); document.removeEventListener("touchstart", onTouch); };
          document.addEventListener("touchstart", onTouch, { passive: true, once: true });
        }}
      />
      <div className="firm-video-wash" />
    </div>
    <div className="wrap">
      <div className="section-head reveal">
        <div>
          <div className="num">02 <span>/ the world</span></div>
          <h2 className="reveal d1">Welcome to Broad &amp; Stone.</h2>
        </div>
        <div className="sub reveal d2">
          Thirty partners. Fifty associates. You've just been hired.
        </div>
      </div>
      <div className="firm">
        <div className="reveal d1" style={{gridColumn:"1 / -1",display:"flex",justifyContent:"center"}}>
          <a className="portal-link portal-link-lg" href="https://broadandstone.com" target="_blank" rel="noreferrer">
            Visit the firm <span className="arr">→</span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

/* ---------------- Partners ---------------- */
const Partners = () => {
  const partners = [
    { kind:"a", name:"Caroline Pryce", practice:"Corporate / M&A",
      quote:"Help me understand why you sent that draft to the client without running it by me." },
    { kind:"b", name:"Victoria Reade", practice:"Complex Commercial Litigation",
      quote:"Don't you DARE check with AI. Think. What does the statute actually say?" },
    { kind:"c", name:"Marcus Webb", practice:"Securities & Regulatory",
      quote:"The SEC doesn't care about your intentions. They care about your disclosures." },
    { kind:"d", name:"Diane Kowalski", practice:"Corporate / M&A",
      quote:"Read Section 7.3 again. Slowly this time. Tell me what you missed." },
  ];
  return (
    <section id="partners">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="num">03 <span>/ the characters</span></div>
            <h2 className="reveal d1">Meet your new bosses.</h2>
          </div>
          <div className="sub reveal d2">
            Every partner is different, with a track record, and a threshold of patience. You'll learn
            all three.
          </div>
        </div>
        <div className="partner-row">
          {partners.map((p, i) => (
            <div className={`partner reveal d${Math.min(i,3)}`} key={p.name}>
              <div className="portrait">
                <window.Portrait kind={p.kind} />
                <div className="tag">PLACEHOLDER · PORTRAIT</div>
              </div>
              <p className="name">{p.name}</p>
              <p className="practice">{p.practice}</p>
              <blockquote>{p.quote}</blockquote>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------------- Audience ---------------- */
const Audience = () => {
  const items = [
    { mark:"A", title:"Law Students",
      body:"Bridge the gap between doctrine and practice. Experience what lawyers actually do — under pressure, with consequences — before you graduate." },
    { mark:"B", title:"Bar Prep Candidates",
      body:"Learn the rules by applying them. Every scenario is built on real legal principles, delivered through narrative instead of flashcards." },
    { mark:"C", title:"Junior Associates",
      body:"The training your firm didn't give you. Develop the judgment, political navigation, and substantive instincts that take most associates years to build." },
    { mark:"D", title:"Pre-Law",
      body:"Test-drive the legal profession. Find out if this is really what you want — and if you're built for it." },
  ];
  return (
    <section id="who">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <div className="num">03 <span>/ the audience</span></div>
            <h2 className="reveal d1">Built for people who take law seriously.</h2>
          </div>
          <div className="sub reveal d2">No gamification. No badges. No streaks. Just the work, and whether you can do it.</div>
        </div>
        <div className="aud-grid reveal">
          {items.map(i => (
            <div className="aud" key={i.title}>
              <div className="mark">EXHIBIT {i.mark}</div>
              <h4>{i.title}</h4>
              <p>{i.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------------- AI Question ---------------- */
const AIQuestion = () => (
  <section id="ai" className="aiq">
    <div className="thin-red top" />
    <div className="wrap" style={{paddingTop:48, paddingBottom:48}}>
      <div className="aiq-inner">
        <div className="lhs reveal">
          <div className="stamp-row">
            <span className="stamp">Exhibit E · The AI Question</span>
          </div>
          <h2>
            AI can draft a contract.
            <em>It can't negotiate one.</em>
          </h2>
          <p className="kicker">
            The profession is changing. The skills that matter most aren't.
          </p>
          <div className="tag-list">
            <span>Judgment</span>
            <span>Context</span>
            <span>Negotiation</span>
            <span>Reading a Room</span>
            <span>Knowing What to Ask</span>
          </div>
        </div>
        <div className="rhs reveal d1">
          <p className="first">
            AI can draft agreements, summarize depositions, research case law, and flag
            regulatory risk faster than any associate. That's not a future scenario. That's
            Tuesday.
          </p>
          <p><strong>So what's left for you?</strong></p>
          <p>
            Everything that matters. Context. Judgment. The ability to read a room, spot
            what's missing from a document, push back on a partner who's wrong, and advise
            a client who's scared. The ability to understand <em>why</em> a clause exists
            before you decide whether to change it. The ability to know what questions to
            ask — of the law, of the facts, of the people across the table or on the witness stand.
          </p>
          <p>
            AI is a tool. If you don't understand the law, you can't prompt it. If you
            don't understand how agreements are structured, you can't evaluate what it
            produces. If you've never negotiated under pressure or prepared a witness for
            cross-examination, you won't know when the AI's output would destroy your
            client's position.
          </p>
          <div className="pull">
            Redlined teaches the skills AI cannot replace.
          </div>
          <p>
            The lawyers who thrive in an AI world won't be the ones who fear it or the
            ones who blindly trust it. They'll be the ones who can <strong>command</strong> it —
            who understand the law deeply enough to direct AI precisely, catch its mistakes
            instantly, and apply judgment that no model can replicate.
          </p>
          <p>
            AI will answer any legal question you ask it. Perfectly. Confidently. And
            sometimes completely wrong — because you didn't know what to ask. The skill
            isn't using AI. The skill is knowing which questions matter, which facts
            change the answer, and which context you didn't realize was missing until it
            was too late.
          </p>
          <p><strong>Redlined teaches you to think like a lawyer. That's the one thing AI can't do for you.</strong></p>
        </div>
      </div>
    </div>
    <div className="thin-red bot" />
  </section>
);

/* ---------------- Pricing / Waitlist ---------------- */
const Pricing = ({ openWaitlist, emailRef }) => {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const FORMSPREE_URL = "https://formspree.io/f/mdaqozdo";
  const submit = async (e) => {
    e.preventDefault();
    setError("");
    const value = email.trim();
    if (!value || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      setError("Please enter a valid email address.");
      return;
    }
    setBusy(true);
    try {
      const res = await fetch(FORMSPREE_URL, {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({ email: value }),
      });
      if (res.ok) {
        setDone(true);
        setEmail("");
      } else {
        const data = await res.json().catch(()=>({}));
        setError((data.errors && data.errors[0] && data.errors[0].message) || "Something went wrong. Please try again.");
      }
    } catch {
      setError("Network error. Please try again.");
    } finally {
      setBusy(false);
    }
  };
  return (
    <section id="pricing">
      <div className="wrap">
        <div className="pricing reveal">
          <div className="pricing-grid">
            <div>
              <div className="num mono" style={{fontSize:12,color:"var(--red-soft)",letterSpacing:".2em",marginBottom:14}}>06 / PRICING</div>
              <h3>We open the doors soon.</h3>
              <p>
                Pricing will be published at launch. Join the waitlist to be first in when we
                open the doors. You'll get a scenario preview a week before public access — no
                obligation, no credit card.
              </p>
            </div>
            <div>
              {done ? (
                <div className="waitlist-success" role="status" style={{padding:"18px 4px",fontSize:16,fontWeight:500,color:"var(--gold, #9a7b3f)",lineHeight:1.5}}>
                  You're on the list. We'll be in touch.
                </div>
              ) : (
                <form className="waitlist" onSubmit={submit} noValidate>
                  <input
                    ref={emailRef}
                    type="email" required placeholder="you@example.edu"
                    value={email} onChange={e=>{setEmail(e.target.value); if(error) setError("");}}
                    aria-label="Email address" aria-invalid={!!error}
                  />
                  <button type="submit" className="btn btn-primary" disabled={busy}>
                    {busy ? "Joining…" : "Join the Waitlist →"}
                  </button>
                </form>
              )}
              {error && !done && (
                <span role="alert" style={{color:"var(--red-soft, #8B2020)",fontSize:12,marginTop:8,display:"block"}}>{error}</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------------- Credit ---------------- */
const Credit = () => (
  <section id="credit" style={{paddingTop:40,paddingBottom:40}}>
    <div className="wrap">
      <div className="credit reveal">
        <p className="line">Content created by a law professor with decades of experience in Big Law.</p>
        <p className="sub">Built on real legal doctrine, real negotiation tactics, and real professional judgment.</p>
      </div>
    </div>
  </section>
);

/* ---------------- Footer ---------------- */
const Footer = () => (
  <footer>
    <div className="wrap">
      <div className="row">
        <div>
          <div className="brand-foot"><span style={{color:"var(--red-soft)"}}>RED</span>LINED</div>
          <p className="copy">© 2026 LexDye, Inc. All rights reserved.</p>
        </div>
        <div className="links">
          <a href="privacy.html">Privacy</a>
          <a href="terms.html">Terms</a>
          <a href="mailto:info@lexdye.com">Contact</a>
        </div>
        <div>
        </div>
      </div>
    </div>
  </footer>
);

/* ---------------- Login modal (secure portal) ---------------- */
const LoginModal = ({ open, onClose }) => {
  const firstRef = useRef(null);
  useEffect(() => {
    if (open && firstRef.current) setTimeout(()=>firstRef.current.focus(), 200);
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  return (
    <div className={"modal-bg " + (open ? "open" : "")} onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="scan" />
        <div className="close" onClick={onClose} aria-label="Close">✕</div>
        <div className="sys">SECURE TERMINAL · SESSION 7F-92A</div>
        <div className="firm-name">BROAD <span className="amp">&amp;</span> STONE</div>
        <h3 className="h-display">Associate Portal</h3>
        <div className="hint">Authorized personnel only.</div>

        <div className="field">
          <label htmlFor="u">Email</label>
          <input id="u" ref={firstRef} type="email" placeholder="m.webb@broadandstone.com" autoComplete="username"/>
        </div>
        <div className="field">
          <label htmlFor="p">Passphrase</label>
          <input id="p" type="password" placeholder="••••••••••••" autoComplete="current-password"/>
        </div>
        <button className="btn btn-primary" onClick={onClose}>Enter the Firm →</button>
        <a className="forgot" href="#" onClick={e=>e.preventDefault()}>Forgot passphrase</a>

        <div className="mono" style={{marginTop:22,paddingTop:16,borderTop:"1px solid var(--rule)",fontSize:10,color:"var(--ink-mute)",letterSpacing:".2em",textTransform:"uppercase",textAlign:"center"}}>
          Unauthorized access logged. All activity recorded.
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Nav, Hero, Experience, Firm, Partners, Audience, AIQuestion, Pricing, Credit, Footer, LoginModal, RedlineVignette });