// ─── Process (7 Steps) ────────────────────────────────────
const PROCESS_STEPS = [
{ num: '01', tag: 'Deal Sourcing', title: 'Deal Sourcing',
  body: "Most deals come through RePrime's direct relationships with brokers, owners, and operators built over decades. We focus on assets where the seller is motivated — distressed maturities, generational transitions, or repositioning candidates.",
  body2: "Beyond RePrime's direct relationships, our AI systems scan the entire commercial real estate market every 24 hours — aggregating deal flow from every major listing platform, brokerage network, and auction site nationwide. We monitor over 3,100 counties for auction opportunities — sheriff's sales, foreclosure auctions, bank REOs, and tax deed sales. Many of these counties are not on major platforms, creating a massive untapped opportunity. We can also skip trace property owners nationwide for off-market outreach — targeting pre-foreclosures, tax liens, and distressed owners who may never list publicly.",
  extras: ['map','broker'] },
{ num: '02', tag: 'Initial Diligence', title: 'First-Pass Underwriting',
  body: "A trained analyst reviews the rent roll, T-12 financials, market comparables, and physical condition. They build an initial proforma and stress-test it against pessimistic assumptions. Roughly 90% of deals are eliminated at this stage.",
  body2: "Our AI tools analyze every piece of incoming deal information automatically. Every offering memorandum is analyzed the moment it arrives — key financial metrics, tenant information, and risk factors extracted instantly. Tenant leases up to 50 pages are analyzed in 3-5 minutes with full summaries of every critical metric. Tenant intelligence reports are generated automatically — covering credit quality, local and national track records, and risk factors. Foot traffic analytics using cell phone data assess shopping center performance before we ever see financials. Every single email that comes into our team gets analyzed by AI and updated in our database — saving an estimated 3-5 hours per day.",
  extras: ['readout','docIcons','metrics'] },
{ num: '03', tag: 'Negotiation', title: 'Securing the Deal',
  body: "For deals that pass underwriting, RePrime personally leads negotiation with sellers and brokers. The goal is to lock in pricing well below market — leveraging timing, certainty of close, and reputation built over decades. Once terms are agreed, the deal enters the Marketplace, where investors get early visibility while we move toward contract.",
  extras: ['negotiationFlow'] },
{ num: '04', tag: 'Under Contract', title: 'Listed in the Terminal',
  body: "The moment a deal goes under contract, it appears in the Terminal. Every document — purchase agreement, financial models, market reports, tenant analysis — is uploaded and visible to qualified investors in real-time. Investors can review independently, ask questions, and decide whether to participate.",
  extras: ['liveNotification','closing'] },
{ num: '05', tag: 'Deep Diligence', title: 'Verification & Stress-Testing',
  body: "During the contract period, our team conducts deep due diligence: physical inspection, environmental review, lease audit, tenant interviews, market validation, and final underwriting. Every finding is uploaded to the Terminal as it's discovered. Investors see the diligence happen in real-time, not in a polished memo at the end.",
  extras: ['diligenceChecklist'] },
{ num: '06', tag: 'Close', title: 'Capital Deployment',
  body: "Investors who choose to participate fund their commitments. The deal closes. Title transfers. Whether the structure is a direct acquisition or a GP/LP partnership, every detail of the close is documented in the Terminal. Investors retain access to all records — settlement statements, loan documents, insurance binders, everything.",
  extras: ['closeFlow'] },
{ num: '07', tag: 'Asset Management', title: 'Ongoing Operations',
  body: "After close, the Terminal becomes the investor's ongoing window into the asset. Monthly financials, occupancy reports, leasing updates, capital improvements, and distributions are posted as they occur. There are no quarterly surprises and no opaque update letters. You see the asset operate, in real-time, for the life of the investment.",
  extras: ['assetDashboard'] }];


function ProcessSection() {
  const [active, setActive] = useState(0);
  return (
    <section id="our-process" style={{ background: 'var(--bg-2)', padding: '140px 0', position: 'relative' }}>
      <div className="mx-auto px-6 lg:px-10" style={{ maxWidth: 1400 }}>
        <div className="grid lg:grid-cols-12 gap-16 items-start">
          <div className="lg:col-span-4 lg:sticky" style={{ top: 100 }}>
            <div className="fade-up section-label">The Methodology</div>
            <h2 className="fade-up h-display mt-6" style={{ fontSize: 'clamp(2.4rem, 4vw, 3.4rem)' }}>
              Our 7-Step <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>Deal Sourcing & Execution Process</span>
            </h2>
            <p className="fade-up body-copy mt-7">
              Every deal in the Terminal moves through the same disciplined process — from Deal Sourcing to ongoing asset management. Investors see each step as it happens.
            </p>
            <div className="fade-up mt-10 hidden lg:block">
              <div className="glass p-6">
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '.16em', color: 'var(--tx-3)', textTransform: 'uppercase' }}>Currently Viewing</div>
                <div className="font-serif mt-3" style={{ fontSize: 24, color: 'var(--gold)' }}>{PROCESS_STEPS[active].num} · {PROCESS_STEPS[active].tag}</div>
                <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-2)', marginTop: 14, lineHeight: 1.6 }}>
                  {PROCESS_STEPS[active].title}
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-8 fade-up" style={{ position: 'relative' }}>
            <div className="timeline-line" />
            <div className="flex flex-col gap-10">
              {PROCESS_STEPS.map((s, i) =>
              <ProcessStep key={i} s={s} idx={i} setActive={setActive} active={active === i} />
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function ProcessStep({ s, idx, setActive, active }) {
  const ref = useRef(null);
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) setActive(idx);});
    }, { rootMargin: '-30% 0px -50% 0px' });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [idx, setActive]);
  return (
    <div ref={ref} className="flex gap-6" style={{ position: 'relative' }}>
      <div style={{ width: 36, flexShrink: 0, position: 'relative' }}>
        <div className="timeline-node" style={{
          background: active ? 'var(--gold)' : 'var(--bg-2)',
          color: active ? 'var(--bg-1)' : 'var(--gold)',
          borderColor: active ? 'var(--gold)' : 'rgba(201,169,98,0.5)',
          transition: 'all .3s ease'
        }}>{s.num}</div>
      </div>
      <div className="glass hover-card p-7 flex-1" style={{
        borderColor: active ? 'rgba(201,169,98,0.25)' : 'rgba(255,255,255,0.08)',
        transition: 'all .3s ease',
        minWidth: 0,
        overflow: 'hidden'
      }}>
        <div className="flex items-baseline justify-between gap-4 flex-wrap">
          <span className="tag" style={{ background: 'rgba(201,169,98,0.1)', color: 'var(--gold)', border: '1px solid rgba(201,169,98,0.25)' }}>{s.tag}</span>
          <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.1em' }}>STEP {s.num} OF 07</span>
        </div>
        <h3 className="font-serif mt-4" style={{ fontWeight: 500, fontSize: 24, color: 'var(--tx-1)', lineHeight: 1.3 }}>{s.title}</h3>
        <p className="body-copy mt-3" style={{ fontSize: 14.5 }}>{s.body}</p>
        {s.body2 && <p className="body-copy mt-3" style={{ fontSize: 14.5 }}>{s.body2}</p>}
        {s.extras && s.extras.includes('map') && <USMap/>}
        {s.extras && s.extras.includes('broker') && <BrokerPortalCallout/>}
        {s.extras && s.extras.includes('readout') && <TerminalReadout/>}
        {s.extras && s.extras.includes('docIcons') && <DocIconRow/>}
        {s.extras && s.extras.includes('metrics') && <MetricCards/>}
        {s.extras && s.extras.includes('negotiationFlow') && <NegotiationFlow/>}
        {s.extras && s.extras.includes('liveNotification') && <LiveNotification/>}
        {s.extras && s.extras.includes('closing') && <ClosingMethods/>}
        {s.extras && s.extras.includes('diligenceChecklist') && <DiligenceChecklist/>}
        {s.extras && s.extras.includes('closeFlow') && <CloseFlow/>}
        {s.extras && s.extras.includes('assetDashboard') && <AssetDashboard/>}
      </div>
    </div>);

}

// ─── How You Participate (replaces the previous Terminal Product section) ───
function useFadeInParticipate(delay = 0) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
      { threshold: 0.1 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
  return {
    ref,
    style: {
      opacity: visible ? 1 : 0,
      transform: visible ? "translateY(0)" : "translateY(40px)",
      transition: `opacity 0.8s cubic-bezier(0.16,1,0.3,1) ${delay}s, transform 0.8s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
    },
  };
}

function TerminalProduct() {
  const [hoveredCard, setHoveredCard] = useState(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

  const fade1 = useFadeInParticipate(0);
  const fade2 = useFadeInParticipate(0.1);
  const fade3 = useFadeInParticipate(0.15);
  const fade4 = useFadeInParticipate(0.2);

  const handleMouseMove = (e, cardId) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
    const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
    setMousePos({ x, y });
    setHoveredCard(cardId);
  };

  const handleMouseLeave = () => {
    setHoveredCard(null);
    setMousePos({ x: 0, y: 0 });
  };

  const getCardTransform = (cardId) => {
    if (hoveredCard !== cardId) return "perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0px)";
    return `perspective(800px) rotateX(${mousePos.y * -3}deg) rotateY(${mousePos.x * 3}deg) translateY(-8px)`;
  };

  const FlowStep = ({ label, active, isLast }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 0 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
        <div style={{ width: 10, height: 10, borderRadius: "50%", background: active ? "#C9A962" : "rgba(255,255,255,0.12)", boxShadow: active ? "0 0 12px rgba(201,169,98,0.3)" : "none" }} />
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: active ? "#C9A962" : "#6B6860", letterSpacing: "0.05em", textTransform: "uppercase", textAlign: "center", maxWidth: 72, lineHeight: 1.3 }}>
          {label}
        </span>
      </div>
      {!isLast && (
        <div style={{ width: 28, height: 1, background: active ? "linear-gradient(90deg, #C9A962, rgba(201,169,98,0.3))" : "rgba(255,255,255,0.06)", marginBottom: 20, marginLeft: 4, marginRight: 4 }} />
      )}
    </div>
  );

  const TermRow = ({ label, value, highlight }) => (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "11px 0", borderBottom: "1px solid rgba(255,255,255,0.03)" }}>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "#6B6860", letterSpacing: "0.06em", textTransform: "uppercase" }}>{label}</span>
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: highlight ? "#C9A962" : "#F2F0ED", fontWeight: highlight ? 600 : 500 }}>{value}</span>
    </div>
  );

  return (
    <section id="the-terminal" style={{ background: "#0D1117", padding: "120px 24px", fontFamily: "'DM Sans', sans-serif", position: "relative", overflow: "hidden" }}>
      <link
        href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet" />

      <div style={{ position: "absolute", top: "40%", left: "50%", transform: "translate(-50%, -50%)", width: 800, height: 500, borderRadius: "50%", background: "radial-gradient(circle, rgba(201,169,98,0.03) 0%, transparent 70%)", pointerEvents: "none" }} />

      <div style={{ maxWidth: 1400, margin: "0 auto", position: "relative" }}>
        <div ref={fade1.ref} style={{ ...fade1.style, textAlign: "center", maxWidth: 800, margin: "0 auto 64px" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, marginBottom: 24 }}>
            <div style={{ width: 32, height: 1, background: "linear-gradient(270deg, #C9A962, transparent)" }} />
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", color: "#C9A962", textTransform: "uppercase" }}>
              How You Participate
            </span>
            <div style={{ width: 32, height: 1, background: "linear-gradient(90deg, #C9A962, transparent)" }} />
          </div>
          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(2.2rem, 4.5vw, 3.6rem)", fontWeight: 600, color: "#F2F0ED", lineHeight: 1.08, margin: "0 0 20px 0", letterSpacing: "-0.02em" }}>
            Two Paths to{" "}
            <span style={{ fontStyle: "italic", color: "#C9A962" }}>Ownership</span>
          </h2>
          <p style={{ fontSize: 16, color: "#B8B5AE", lineHeight: 1.75, margin: 0 }}>
            Every deal in the Terminal offers two participation structures. Choose the path that aligns with your investment thesis — whether you want to take title directly or invest alongside us as a limited partner.
          </p>
        </div>

        <div ref={fade2.ref} style={{ ...fade2.style, display: "flex", justifyContent: "center", gap: 48, padding: "20px 32px", background: "rgba(255,255,255,0.02)", borderRadius: 12, border: "1px solid rgba(255,255,255,0.04)", maxWidth: 700, margin: "0 auto 40px" }}>
          {[
            { label: "Example Deal", value: "$10M Retail Center" },
            { label: "Cap Rate", value: "8.5%" },
            { label: "NOI", value: "$850,000" },
          ].map((item) => (
            <div key={item.label} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.1em", color: "#6B6860", textTransform: "uppercase", marginBottom: 4 }}>{item.label}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 15, color: "#F2F0ED", fontWeight: 500 }}>{item.value}</div>
            </div>
          ))}
        </div>

        <div ref={fade3.ref} style={{ ...fade3.style, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginBottom: 48 }}>

          <div
            onMouseMove={(e) => handleMouseMove(e, "direct")}
            onMouseLeave={handleMouseLeave}
            style={{
              background: "rgba(255,255,255,0.02)",
              backdropFilter: "blur(20px)",
              WebkitBackdropFilter: "blur(20px)",
              border: `1px solid ${hoveredCard === "direct" ? "rgba(201,169,98,0.25)" : "rgba(255,255,255,0.06)"}`,
              borderRadius: 20,
              overflow: "hidden",
              transition: "border-color 0.4s ease, box-shadow 0.4s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1)",
              transform: getCardTransform("direct"),
              boxShadow: hoveredCard === "direct" ? "0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(201,169,98,0.04)" : "0 4px 20px rgba(0,0,0,0.2)",
              willChange: "transform",
            }}>
            <div style={{ height: 2, background: "linear-gradient(90deg, rgba(201,169,98,0.5), rgba(201,169,98,0.05))" }} />
            <div style={{ padding: "40px 36px 44px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(201,169,98,0.06)", border: "1px solid rgba(201,169,98,0.12)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#C9A962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                      <polyline points="9 22 9 12 15 12 15 22" />
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.12em", color: "#C9A962", textTransform: "uppercase", marginBottom: 2 }}>Path One</div>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#6B6860" }}>Direct Acquisition</div>
                  </div>
                </div>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: "rgba(201,169,98,0.3)" }}>/01</span>
              </div>

              <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 500, color: "#F2F0ED", margin: "0 0 14px 0", lineHeight: 1.15 }}>
                Acquire the Property{" "}<span style={{ fontStyle: "italic", color: "#C9A962" }}>Directly</span>
              </h3>
              <p style={{ fontSize: 14, color: "#B8B5AE", lineHeight: 1.75, margin: "0 0 28px 0" }}>
                You purchase the property outright through an assignment structure. RePrime sources, negotiates, and underwrites the deal. Once under contract, we assign the purchase agreement to you or your entity. You take title, you own the asset, you control the outcome.
              </p>

              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "20px 0", marginBottom: 24, background: "rgba(255,255,255,0.015)", borderRadius: 12, border: "1px solid rgba(255,255,255,0.03)" }}>
                {["We Source", "Under Contract", "Assignment", "You Take Title", "You Manage"].map((label, i, arr) => (
                  <FlowStep key={label} label={label} active={true} isLast={i === arr.length - 1} />
                ))}
              </div>

              <div style={{ background: "rgba(255,255,255,0.015)", borderRadius: 12, padding: "4px 20px", border: "1px solid rgba(255,255,255,0.03)", marginBottom: 20 }}>
                <TermRow label="Structure" value="Direct Assignment" highlight />
                <TermRow label="Acquisition Fee" value="3% at Close" />
                <TermRow label="Ownership" value="100% Yours" highlight />
                <TermRow label="Control" value="Full" />
                <TermRow label="Management" value="Your Responsibility" />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div style={{ background: "rgba(255,255,255,0.02)", borderRadius: 10, padding: "16px 18px", border: "1px solid rgba(255,255,255,0.03)", textAlign: "center" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#6B6860", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Your Equity</div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 600, color: "#F2F0ED" }}>$2.5M</div>
                  <div style={{ fontSize: 11, color: "#6B6860", marginTop: 2 }}>on a $10M deal</div>
                </div>
                <div style={{ background: "rgba(255,255,255,0.02)", borderRadius: 10, padding: "16px 18px", border: "1px solid rgba(255,255,255,0.03)", textAlign: "center" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#6B6860", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>Fee at Close</div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 600, color: "#C9A962" }}>$300K</div>
                  <div style={{ fontSize: 11, color: "#6B6860", marginTop: 2 }}>3% acquisition fee</div>
                </div>
              </div>

              <div style={{ marginTop: 24, padding: "12px 18px", borderRadius: 10, background: "rgba(201,169,98,0.04)", border: "1px solid rgba(201,169,98,0.08)", textAlign: "center" }}>
                <span style={{ fontSize: 13, color: "#C9A962", fontWeight: 500 }}>Full ownership. Full control. You run the asset.</span>
              </div>
            </div>
          </div>

          <div
            onMouseMove={(e) => handleMouseMove(e, "gplp")}
            onMouseLeave={handleMouseLeave}
            style={{
              background: "rgba(255,255,255,0.025)",
              backdropFilter: "blur(20px)",
              WebkitBackdropFilter: "blur(20px)",
              border: `1px solid ${hoveredCard === "gplp" ? "rgba(201,169,98,0.35)" : "rgba(201,169,98,0.1)"}`,
              borderRadius: 20,
              overflow: "hidden",
              transition: "border-color 0.4s ease, box-shadow 0.4s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1)",
              transform: getCardTransform("gplp"),
              boxShadow: hoveredCard === "gplp" ? "0 20px 60px rgba(0,0,0,0.3), 0 0 50px rgba(201,169,98,0.06)" : "0 4px 20px rgba(0,0,0,0.2), 0 0 30px rgba(201,169,98,0.02)",
              willChange: "transform",
            }}>
            <div style={{ height: 2, background: "linear-gradient(90deg, #C9A962, rgba(201,169,98,0.15))" }} />
            <div style={{ padding: "40px 36px 44px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 28 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(201,169,98,0.08)", border: "1px solid rgba(201,169,98,0.15)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#C9A962" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
                      <circle cx="9" cy="7" r="4" />
                      <path d="M23 21v-2a4 4 0 00-3-3.87" />
                      <path d="M16 3.13a4 4 0 010 7.75" />
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.12em", color: "#C9A962", textTransform: "uppercase", marginBottom: 2 }}>Path Two</div>
                    <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#6B6860" }}>GP / LP Partnership</div>
                  </div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#07090F", background: "#C9A962", padding: "4px 10px", borderRadius: 5, letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 700 }}>Most Common</span>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 14, color: "rgba(201,169,98,0.3)" }}>/02</span>
                </div>
              </div>

              <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 500, color: "#F2F0ED", margin: "0 0 14px 0", lineHeight: 1.15 }}>
                Invest as a{" "}<span style={{ fontStyle: "italic", color: "#C9A962" }}>Limited Partner</span>
              </h3>
              <p style={{ fontSize: 14, color: "#B8B5AE", lineHeight: 1.75, margin: "0 0 28px 0" }}>
                RePrime serves as the sole General Partner and manages every aspect — acquisition, financing, asset management, and disposition. You invest alongside other qualified investors, receive quarterly distributions, and retain full transparency through the Terminal without the operational burden.
              </p>

              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "20px 0", marginBottom: 24, background: "rgba(201,169,98,0.02)", borderRadius: 12, border: "1px solid rgba(201,169,98,0.06)" }}>
                {["We Source", "Under Contract", "You Invest", "We Manage", "Quarterly Cash"].map((label, i, arr) => (
                  <FlowStep key={label} label={label} active={true} isLast={i === arr.length - 1} />
                ))}
              </div>

              <div style={{ background: "rgba(201,169,98,0.02)", borderRadius: 12, padding: "4px 20px", border: "1px solid rgba(201,169,98,0.06)", marginBottom: 20 }}>
                <TermRow label="Structure" value="GP/LP Partnership" highlight />
                <TermRow label="Acquisition Fee" value="1%" />
                <TermRow label="Asset Management" value="2% Annual" />
                <TermRow label="Promote" value="20% Above 8% Pref" highlight />
                <TermRow label="Distributions" value="Quarterly" highlight />
                <TermRow label="Min. Commitment" value="$250,000" highlight />
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                {[
                  { label: "Min. Entry", value: "$250K", color: "#F2F0ED" },
                  { label: "Pref Return", value: "8%", color: "#4ADE80" },
                  { label: "Distributions", value: "Qtrly", color: "#C9A962" },
                ].map((item) => (
                  <div key={item.label} style={{ background: "rgba(201,169,98,0.02)", borderRadius: 10, padding: "16px 14px", border: "1px solid rgba(201,169,98,0.06)", textAlign: "center" }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#6B6860", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>{item.label}</div>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 600, color: item.color }}>{item.value}</div>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: 24, padding: "12px 18px", borderRadius: 10, background: "rgba(201,169,98,0.04)", border: "1px solid rgba(201,169,98,0.1)", textAlign: "center" }}>
                <span style={{ fontSize: 13, color: "#C9A962", fontWeight: 500 }}>Hands-off investing. Full transparency. Quarterly cash flow.</span>
              </div>
            </div>
          </div>
        </div>

        <div ref={fade4.ref} style={{ ...fade4.style, textAlign: "center", maxWidth: 700, margin: "0 auto", padding: "32px 0" }}>
          <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 20, fontStyle: "italic", color: "#C9A962", margin: "0 0 12px 0", lineHeight: 1.5 }}>
            Every deal in the Terminal includes the full information you need to evaluate either path. The choice is yours.
          </p>
          <p style={{ fontSize: 13, color: "#6B6860", margin: 0 }}>
            Structure details are deal-specific and outlined in each deal's documentation within the Terminal.
          </p>
        </div>

        <div style={{ height: 1, marginTop: 48, background: "linear-gradient(90deg, transparent, rgba(201,169,98,0.3), transparent)" }} />
      </div>

      <style>{`
        @media (max-width: 960px) {
          #the-terminal > div > div:nth-child(3) {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </section>);

}

// ─── Terminal Dashboard Preview (browser-chrome mockup with tabs) ────────
function TerminalDashboardPreview() {
  const [tab, setTab] = useState('overview');
  const tabs = [
    { id: 'overview', label: 'Overview' },
    { id: 'financials', label: 'Financials' },
    { id: 'documents', label: 'Documents' },
    { id: 'diligence', label: 'Diligence' },
  ];
  return (
    <section className="terminal-dashboard-preview" style={{ background: 'var(--bg-1)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '10%', right: '-20%', width: 600, height: 600, background: 'radial-gradient(circle, rgba(201,169,98,0.08), transparent 60%)', filter: 'blur(40px)' }} />
      <div className="mx-auto px-6 lg:px-10" style={{ position: 'relative', maxWidth: 1400 }}>
        <div className="text-center mb-12">
          <div className="fade-up" style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--gold)' }}>
            Inside the Platform
          </div>
          <h2 className="fade-up font-serif mt-5" style={{ fontSize: 'clamp(2.2rem, 4vw, 3.4rem)', color: 'var(--tx-1)', fontWeight: 500, letterSpacing: '-0.02em' }}>
            The Terminal, <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>up close</span>
          </h2>
          <p className="fade-up body-copy mt-5 mx-auto" style={{ maxWidth: 640, fontSize: 15.5 }}>
            A glimpse inside the investor view — every deal renders the same way, with full documentation, financial models, and live diligence visible from the moment it goes under contract.
          </p>
        </div>

        <div className="fade-up corner-bracket" style={{ background: '#0A0D12', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 16, overflow: 'hidden', position: 'relative' }}>
          <span className="br-bl" /><span className="br-br" />

          {/* Browser chrome */}
          <div className="term-bar">
            <span className="dot" style={{ background: '#ff5f57' }} />
            <span className="dot" style={{ background: '#febc2e' }} />
            <span className="dot" style={{ background: '#28c840' }} />
            <div style={{ flex: 1, textAlign: 'center', fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--tx-3)' }}>reprimeterminal.com  /  deals  /  TERM-0142</div>
            <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 6 }}>
              <span className="pulse" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--success)' }} /> LIVE
            </span>
          </div>

          {/* Header */}
          <div style={{ padding: '24px 32px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
            <div className="flex items-start justify-between flex-wrap gap-4">
              <div>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.12em' }}>TERM-0142 · UNDER CONTRACT · 47 DAYS REMAINING</div>
                <div className="font-serif mt-2" style={{ fontSize: 30, color: 'var(--tx-1)', fontWeight: 600 }}>Anchor Plaza Center</div>
                <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-3)', marginTop: 6 }}>Grocery-Anchored Retail · 142,300 SF · Marion, IA</div>
              </div>
              <div className="flex gap-8">
                <Stat label="Purchase Price" value="$18.4M" />
                <Stat label="Cap Rate (T-12)" value="8.6%" />
                <Stat label="Target IRR" value="22.4%" gold />
              </div>
            </div>

            {/* Tabs */}
            <div className="flex gap-1 mt-7 overflow-x-auto no-scrollbar">
              {tabs.map((t) =>
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  padding: '10px 18px', borderRadius: 8, fontSize: 12,
                  fontFamily: 'DM Sans', fontWeight: 500, letterSpacing: '.04em',
                  background: tab === t.id ? 'rgba(201,169,98,0.12)' : 'transparent',
                  color: tab === t.id ? 'var(--gold)' : 'var(--tx-2)',
                  border: tab === t.id ? '1px solid rgba(201,169,98,0.25)' : '1px solid transparent',
                  cursor: 'pointer', whiteSpace: 'nowrap',
                }}>{t.label}</button>
              )}
              <div style={{ flex: 1 }} />
              <button className="flex items-center gap-2" style={{ padding: '10px 16px', borderRadius: 8, fontSize: 12, fontFamily: 'JetBrains Mono', color: 'var(--tx-2)', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)' }}>
                <span style={{ color: 'var(--gold)' }}>✦</span> Ask Terminal AI
              </button>
            </div>
          </div>

          {/* Tab content */}
          <div className="p-8 grid lg:grid-cols-3 gap-6" style={{ minHeight: 480 }}>
            {tab === 'overview' && <Overview />}
            {tab === 'financials' && <Financials />}
            {tab === 'documents' && <Documents />}
            {tab === 'diligence' && <Diligence />}
          </div>
        </div>

        {/* Feature grid */}
        <div className="grid md:grid-cols-3 gap-6 mt-12">
          <FeatureCard title="Live Documents" body="Every PDF, spreadsheet, and report syncs in real-time. Version history is preserved. Annotations are visible. Nothing is staged for an LP update." />
          <FeatureCard title="Direct Q&A" body="Ask a question on any document or metric. Our team responds in the Terminal — and the answer is visible to every other investor reviewing the same deal." />
          <FeatureCard title="Terminal AI" body="An AI research assistant trained on every deal document. Ask 'What's the lease expiry schedule for the top 3 tenants?' and get a sourced answer in seconds." />
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value, gold }) {
  return (
    <div>
      <div style={{ fontFamily: 'JetBrains Mono', fontSize: 9.5, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--tx-3)' }}>{label}</div>
      <div className="font-serif mt-2" style={{ fontSize: 24, color: gold ? 'var(--gold)' : 'var(--tx-1)', fontWeight: 600, lineHeight: 1 }}>{value}</div>
    </div>);

}

function Overview() {
  return (
    <>
      <div className="lg:col-span-2 flex flex-col gap-4">
        <div className="glass p-6">
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Asset Snapshot</div>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-y-5 gap-x-6 mt-4">
            {[
            ['Year Built', '1998'], ['Year Renovated', '2019'], ['Occupancy', '94.2%'],
            ['Anchor Tenant', 'Hy-Vee'], ['WALT', '7.4 yrs'], ['Parking Ratio', '5.2 / 1,000']].
            map(([k, v]) =>
            <div key={k}>
                <div style={{ fontFamily: 'DM Sans', fontSize: 11, color: 'var(--tx-3)', textTransform: 'uppercase', letterSpacing: '.08em' }}>{k}</div>
                <div style={{ fontFamily: 'DM Sans', fontSize: 14, color: 'var(--tx-1)', marginTop: 4, fontWeight: 500 }}>{v}</div>
              </div>
            )}
          </div>
        </div>
        <div className="glass p-6">
          <div className="flex items-baseline justify-between">
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>NOI Trend (T-36)</div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--success)' }}>+12.4% YoY</div>
          </div>
          <div style={{ height: 130, marginTop: 14, position: 'relative' }}>
            <svg viewBox="0 0 400 130" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
              <defs>
                <linearGradient id="ng" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#C9A962" stopOpacity="0.3" />
                  <stop offset="1" stopColor="#C9A962" stopOpacity="0" />
                </linearGradient>
              </defs>
              {[0, 1, 2, 3].map((i) => <line key={i} x1="0" x2="400" y1={i * 32 + 8} y2={i * 32 + 8} stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4" />)}
              <path d="M0,90 L40,82 L80,86 L120,70 L160,66 L200,55 L240,58 L280,40 L320,38 L360,28 L400,22 L400,130 L0,130 Z" fill="url(#ng)" />
              <path d="M0,90 L40,82 L80,86 L120,70 L160,66 L200,55 L240,58 L280,40 L320,38 L360,28 L400,22" stroke="#C9A962" strokeWidth="1.5" fill="none" />
              {[[0, 90], [80, 86], [160, 66], [240, 58], [320, 38], [400, 22]].map(([x, y], i) => <circle key={i} cx={x} cy={y} r="2.5" fill="#C9A962" />)}
            </svg>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-4">
        <div className="glass p-5" style={{ borderColor: 'rgba(201,169,98,0.18)' }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--gold)', letterSpacing: '.14em' }}>INVESTMENT SUMMARY</div>
          <div className="mt-4 flex flex-col gap-3">
            {[['Equity Required', '$5.5M'], ['Min. Commitment', '$250K'], ['Hold Period', '5–7 yrs'], ['Distributions', 'Quarterly'], ['Structure', 'GP/LP Avail.']].map(([k, v]) =>
            <div key={k} className="flex justify-between text-sm">
                <span style={{ color: 'var(--tx-3)' }}>{k}</span>
                <span style={{ color: 'var(--tx-1)', fontWeight: 500 }}>{v}</span>
              </div>
            )}
          </div>
          <button className="btn-gold mt-5 w-full">Review Full Deck →</button>
        </div>
        <div className="glass p-5">
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em' }}>COMMITTED</div>
          <div className="font-serif mt-2" style={{ fontSize: 22, color: 'var(--gold)' }}>$3.8M / $5.5M</div>
          <div style={{ height: 5, background: 'rgba(255,255,255,0.06)', borderRadius: 3, marginTop: 12 }}>
            <div style={{ height: 5, background: 'var(--gold)', width: '69%', borderRadius: 3, boxShadow: '0 0 12px rgba(201,169,98,0.4)' }} />
          </div>
          <div className="flex justify-between text-xs mt-2" style={{ color: 'var(--tx-3)', fontFamily: 'JetBrains Mono' }}>
            <span>14 LPs</span><span>69% subscribed</span>
          </div>
        </div>
      </div>
    </>);

}

function Financials() {
  const rows = [
  ['Gross Potential Rent', '$2,184,400', '$2,310,200', '$2,484,600'],
  ['Vacancy & Credit Loss', '($109,200)', '($115,500)', '($124,200)'],
  ['Effective Gross Income', '$2,075,200', '$2,194,700', '$2,360,400'],
  ['Operating Expenses', '($492,400)', '($508,800)', '($528,300)'],
  ['Net Operating Income', '$1,582,800', '$1,685,900', '$1,832,100']];

  return (
    <div className="lg:col-span-3 grid lg:grid-cols-3 gap-6">
      <div className="lg:col-span-2 glass p-6">
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Pro Forma Income Statement</div>
        <table className="w-full mt-4" style={{ fontFamily: 'JetBrains Mono', fontSize: 12 }}>
          <thead>
            <tr style={{ color: 'var(--tx-3)', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
              <th className="text-left py-2 font-normal">LINE ITEM</th>
              <th className="text-right py-2 font-normal">YEAR 1</th>
              <th className="text-right py-2 font-normal">YEAR 2</th>
              <th className="text-right py-2 font-normal">YEAR 3</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) =>
            <tr key={i} style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
                <td className="py-3" style={{ color: i === 4 ? 'var(--gold)' : 'var(--tx-2)', fontWeight: i === 4 ? 600 : 400 }}>{r[0]}</td>
                <td className="py-3 text-right" style={{ color: i === 4 ? 'var(--gold)' : 'var(--tx-1)', fontWeight: i === 4 ? 600 : 400 }}>{r[1]}</td>
                <td className="py-3 text-right" style={{ color: i === 4 ? 'var(--gold)' : 'var(--tx-1)', fontWeight: i === 4 ? 600 : 400 }}>{r[2]}</td>
                <td className="py-3 text-right" style={{ color: i === 4 ? 'var(--gold)' : 'var(--tx-1)', fontWeight: i === 4 ? 600 : 400 }}>{r[3]}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="flex flex-col gap-4">
        <div className="glass p-5">
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em' }}>RETURN METRICS</div>
          <div className="mt-4 flex flex-col gap-4">
            {[['Target IRR', '22.4%'], ['Equity Multiple', '2.1x'], ['Cash-on-Cash Yr 1', '9.1%'], ['Avg Cash-on-Cash', '11.7%']].map(([k, v]) =>
            <div key={k}>
                <div style={{ fontFamily: 'DM Sans', fontSize: 11, color: 'var(--tx-3)' }}>{k}</div>
                <div className="font-serif mt-1" style={{ fontSize: 22, color: 'var(--gold)', fontWeight: 600 }}>{v}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

}

function Documents() {
  const docs = [
  { name: 'Purchase Agreement', tag: 'PSA', size: '4.2 MB', updated: 'Today, 2:14 PM', status: 'verified' },
  { name: 'Underwriting Model v3', tag: 'XLSX', size: '1.8 MB', updated: 'Today, 11:02 AM', status: 'verified' },
  { name: 'Tenant Rent Roll', tag: 'PDF', size: '612 KB', updated: 'Yesterday', status: 'verified' },
  { name: 'Phase I Environmental', tag: 'PDF', size: '8.4 MB', updated: 'Yesterday', status: 'verified' },
  { name: 'Property Condition Report', tag: 'PDF', size: '12.1 MB', updated: '2 days ago', status: 'verified' },
  { name: 'Market Comparables', tag: 'PDF', size: '3.6 MB', updated: '3 days ago', status: 'verified' },
  { name: 'Loan Term Sheet', tag: 'PDF', size: '480 KB', updated: '4 days ago', status: 'pending' },
  { name: 'Hy-Vee Anchor Lease', tag: 'PDF', size: '2.2 MB', updated: '1 week ago', status: 'verified' }];

  return (
    <div className="lg:col-span-3 glass p-6">
      <div className="flex items-center justify-between mb-5 flex-wrap gap-3">
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Document Library · 142 files</div>
        <div className="flex items-center gap-2">
          <input placeholder="Search documents..." style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 6, padding: '7px 12px', fontSize: 12, color: 'var(--tx-1)', fontFamily: 'DM Sans', width: 220 }} />
          <button style={{ padding: '7px 14px', borderRadius: 6, fontSize: 11, color: 'var(--gold)', background: 'rgba(201,169,98,0.08)', border: '1px solid rgba(201,169,98,0.2)', fontFamily: 'JetBrains Mono', letterSpacing: '.06em' }}>FILTER</button>
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
        {docs.map((d, i) =>
        <div key={i} className="flex items-center gap-4 p-3" style={{ borderRadius: 8, transition: 'background .2s', cursor: 'pointer' }} onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
            <div style={{ width: 36, height: 44, background: 'rgba(201,169,98,0.06)', border: '1px solid rgba(201,169,98,0.2)', borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'JetBrains Mono', fontSize: 9, color: 'var(--gold)', flexShrink: 0 }}>{d.tag}</div>
            <div className="flex-1 min-w-0">
              <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-1)', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</div>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', marginTop: 2 }}>{d.size} · {d.updated}</div>
            </div>
            <div className="flex items-center gap-1.5" style={{ fontFamily: 'JetBrains Mono', fontSize: 9.5, color: d.status === 'verified' ? 'var(--success)' : 'var(--warn)', letterSpacing: '.08em' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: d.status === 'verified' ? 'var(--success)' : 'var(--warn)' }} />
              {d.status === 'verified' ? 'VERIFIED' : 'PENDING'}
            </div>
          </div>
        )}
      </div>
    </div>);

}

function Diligence() {
  const items = [
  { cat: 'Physical', task: 'Roof condition assessment', status: 'complete', note: 'Replaced 2019 · 15-yr warranty active' },
  { cat: 'Physical', task: 'HVAC systems inspection', status: 'complete', note: '4 of 6 units >70% remaining life' },
  { cat: 'Physical', task: 'Parking lot resealing', status: 'flag', note: '~$84K capex needed Yr 1' },
  { cat: 'Financial', task: 'Tenant credit verification', status: 'complete', note: 'Anchor: Investment grade BBB+' },
  { cat: 'Financial', task: 'Operating expense audit', status: 'complete', note: 'No variances >3% identified' },
  { cat: 'Legal', task: 'Title commitment review', status: 'complete', note: 'No exceptions of concern' },
  { cat: 'Legal', task: 'Anchor lease estoppel', status: 'progress', note: 'Awaiting tenant signature' },
  { cat: 'Market', task: 'Submarket vacancy analysis', status: 'complete', note: 'Submarket vacancy: 4.8% (vs 7.2% MSA)' }];

  const dot = (s) => s === 'complete' ? 'var(--success)' : s === 'flag' ? 'var(--warn)' : 'var(--tx-3)';
  const lab = (s) => s === 'complete' ? 'COMPLETE' : s === 'flag' ? 'FLAGGED' : 'IN PROGRESS';
  return (
    <div className="lg:col-span-3 grid lg:grid-cols-4 gap-6">
      <div className="lg:col-span-3 glass p-6">
        <div className="flex items-center justify-between flex-wrap gap-3">
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Due Diligence Tracker</div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10.5, color: 'var(--tx-2)' }}>32 of 47 items complete · 68%</div>
        </div>
        <div style={{ height: 4, background: 'rgba(255,255,255,0.05)', borderRadius: 2, marginTop: 10 }}>
          <div style={{ height: 4, background: 'linear-gradient(90deg, var(--gold), var(--gold-l))', width: '68%', borderRadius: 2 }} />
        </div>
        <div className="mt-5 flex flex-col gap-1">
          {items.map((it, i) =>
          <div key={i} className="flex items-center gap-4 p-3" style={{ borderRadius: 6 }}>
              <span className="tag" style={{ background: 'rgba(255,255,255,0.04)', color: 'var(--tx-2)', minWidth: 80, textAlign: 'center' }}>{it.cat}</span>
              <div className="flex-1 min-w-0">
                <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-1)', fontWeight: 500 }}>{it.task}</div>
                <div style={{ fontFamily: 'DM Sans', fontSize: 12, color: 'var(--tx-3)', marginTop: 2 }}>{it.note}</div>
              </div>
              <div className="flex items-center gap-2" style={{ fontFamily: 'JetBrains Mono', fontSize: 9.5, color: dot(it.status), letterSpacing: '.08em' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: dot(it.status) }} />
                {lab(it.status)}
              </div>
            </div>
          )}
        </div>
      </div>
      <div className="glass p-5" style={{ borderColor: 'rgba(201,169,98,0.2)' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--gold)', letterSpacing: '.14em' }}>✦ TERMINAL AI</div>
        <div style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-2)', marginTop: 14, lineHeight: 1.6 }}>
          "Summarize the diligence findings I should be most concerned about."
        </div>
        <div style={{ fontFamily: 'DM Sans', fontSize: 12.5, color: 'var(--tx-1)', marginTop: 14, lineHeight: 1.7, padding: 12, background: 'rgba(201,169,98,0.04)', border: '1px solid rgba(201,169,98,0.12)', borderRadius: 8 }}>
          One flag: parking lot resealing requires ~$84K Yr 1 capex (already in proforma, line 14). Anchor estoppel pending — typical timing. No material concerns identified.
        </div>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 9, color: 'var(--tx-3)', marginTop: 10, letterSpacing: '.08em' }}>SOURCED FROM 12 DOCUMENTS · 0.4S</div>
      </div>
    </div>);

}

function FeatureCard({ title, body }) {
  return (
    <div className="glass hover-card fade-up p-7">
      <div className="font-serif" style={{ fontSize: 22, color: 'var(--tx-1)', fontWeight: 500 }}>{title}</div>
      <p className="body-copy mt-3" style={{ fontSize: 14.5 }}>{body}</p>
    </div>);

}

// ─── Track Record ─────────────────────────────────────────
function TrackRecord() {
  const deals = [
  { name: 'Westfield Crossing', type: 'Retail', sf: '186K SF', acq: '$22.4M', irr: '24.8%', mult: '2.3x', status: 'Realized', loc: 'Indianapolis, IN' },
  { name: 'Belmont Industrial', type: 'Industrial', sf: '412K SF', acq: '$31.6M', irr: '28.1%', mult: '2.6x', status: 'Realized', loc: 'Columbus, OH' },
  { name: 'Riverside Apartments', type: 'Multifamily', sf: '212 Units', acq: '$48.2M', irr: '19.4%', mult: '1.9x', status: 'Realized', loc: 'Milwaukee, WI' },
  { name: 'Oakridge Plaza', type: 'Retail', sf: '124K SF', acq: '$16.8M', irr: '21.7%', mult: '2.0x', status: 'Active', loc: 'Des Moines, IA' },
  { name: 'Crown Point Center', type: 'Mixed-Use', sf: '94K SF', acq: '$14.2M', irr: '25.3%', mult: '2.4x', status: 'Realized', loc: 'Crown Point, IN' }];

  return (
    <section style={{ background: 'var(--bg-2)', padding: '140px 0' }}>
      <div className="mx-auto px-6 lg:px-10" style={{ maxWidth: 1400 }}>
        <div className="grid lg:grid-cols-12 gap-12 mb-16">
          <div className="lg:col-span-5">
            <div className="fade-up section-label">Three Decades</div>
            <h2 className="fade-up h-display mt-6" style={{ fontSize: 'clamp(2.4rem, 4.4vw, 3.6rem)' }}>
              Track Record &<br /><span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>Pedigree</span>
            </h2>
          </div>
          <div className="lg:col-span-7 fade-up">
            <p className="body-copy">
              Gideon and the RePrime team have spent the past three decades acquiring, operating, and exiting commercial real estate assets across the central United States. The Terminal is a productization of the way we've always worked — disciplined sourcing, conservative underwriting, and full investor transparency. Below are select realized and active deals.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-px fade-up" style={{ background: 'rgba(255,255,255,0.06)', borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.06)' }}>
          {[
          { v: <Counter value={847} suffix="M+" prefix="$" />, l: 'Total Acquisitions' },
          { v: <Counter value={142} />, l: 'Closed Deals' },
          { v: <Counter value={22.4} suffix="%" decimals={1} />, l: 'Avg. Realized IRR' },
          { v: <Counter value={31} />, l: 'Years of Operation' }].
          map((s, i) =>
          <div key={i} className="p-8 text-center" style={{ background: 'var(--bg-2)' }}>
              <div className="metric-num" style={{ fontSize: 'clamp(2rem,3vw,2.8rem)' }}>{s.v}</div>
              <div className="mt-3" style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>{s.l}</div>
            </div>
          )}
        </div>

        <div className="fade-up mt-10 glass p-2" style={{ overflow: 'hidden' }}>
          <div className="overflow-x-auto">
            <table className="w-full" style={{ fontFamily: 'DM Sans', fontSize: 13, minWidth: 780 }}>
              <thead>
                <tr style={{ color: 'var(--tx-3)', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                  {['Property', 'Type', 'Size', 'Acquisition', 'Realized IRR', 'Multiple', 'Status'].map((h) =>
                  <th key={h} className="text-left p-4" style={{ fontFamily: 'JetBrains Mono', fontSize: 10, fontWeight: 500, letterSpacing: '.14em', textTransform: 'uppercase' }}>{h}</th>
                  )}
                </tr>
              </thead>
              <tbody>
                {deals.map((d, i) =>
                <tr key={i} style={{ borderBottom: i < deals.length - 1 ? '1px solid rgba(255,255,255,0.03)' : 'none' }}>
                    <td className="p-4">
                      <div style={{ color: 'var(--tx-1)', fontWeight: 500 }}>{d.name}</div>
                      <div style={{ color: 'var(--tx-3)', fontSize: 11, marginTop: 2 }}>{d.loc}</div>
                    </td>
                    <td className="p-4" style={{ color: 'var(--tx-2)' }}>{d.type}</td>
                    <td className="p-4" style={{ color: 'var(--tx-2)', fontFamily: 'JetBrains Mono', fontSize: 12 }}>{d.sf}</td>
                    <td className="p-4" style={{ color: 'var(--tx-2)', fontFamily: 'JetBrains Mono', fontSize: 12 }}>{d.acq}</td>
                    <td className="p-4" style={{ color: 'var(--gold)', fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 500 }}>{d.irr}</td>
                    <td className="p-4" style={{ color: 'var(--tx-2)', fontFamily: 'JetBrains Mono', fontSize: 12 }}>{d.mult}</td>
                    <td className="p-4">
                      <span className="tag" style={{
                      background: d.status === 'Realized' ? 'rgba(74,222,128,0.08)' : 'rgba(201,169,98,0.08)',
                      color: d.status === 'Realized' ? 'var(--success)' : 'var(--gold)',
                      border: '1px solid ' + (d.status === 'Realized' ? 'rgba(74,222,128,0.2)' : 'rgba(201,169,98,0.2)')
                    }}>{d.status}</span>
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="fade-up mt-6 text-center" style={{ fontFamily: 'DM Sans', fontSize: 12, color: 'var(--tx-3)' }}>
          Selected deals shown. Full track record available to qualified investors upon request.
        </div>
      </div>
    </section>);

}

// ─── CTA ─────────────────────────────────────────────────
function CTA() {
  return (
    <section id="invest" style={{ background: 'var(--bg-1)', padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.4 }}>
        <div className="mesh-bg" />
      </div>
      <div className="mx-auto px-6 lg:px-10" style={{ position: 'relative', maxWidth: 1100 }}>
        <div className="glass glass-gold gold-glow corner-bracket text-center" style={{ padding: '80px 40px', position: 'relative', borderColor: 'rgba(201,169,98,0.25)', background: 'linear-gradient(180deg, rgba(201,169,98,0.06) 0%, rgba(255,255,255,0.02) 100%)' }}>
          <span className="br-bl" /><span className="br-br" />

          {/* Gideon Quote */}
          <div className="fade-up mx-auto" style={{ maxWidth: 820, marginBottom: 56 }}>
            <div style={{ fontSize: 60, color: 'var(--gold)', lineHeight: 0.3, fontFamily: 'Cormorant Garamond', opacity: 0.5, marginBottom: 8 }}>“</div>
            <p className="font-serif" style={{ fontStyle: 'italic', fontSize: 22, color: 'var(--gold)', textAlign: 'center', lineHeight: 1.5, fontWeight: 400 }}>
              For a patient investor with cash, a debt crunch is like a rare clearance sale in real estate. It doesn't happen often, but when everything must go, those with cash and courage will walk away with the gold.
            </p>
            <div className="text-center mt-5" style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-3)' }}>
              — Gideon Gratsiani, Founder, RePrime Group
            </div>
          </div>

          <div className="fade-up section-label" style={{ justifyContent: 'center' }}><span style={{ marginLeft: 32 }}>Limited Access</span></div>
          <h2 className="fade-up h-display mt-7 mx-auto" style={{ fontSize: 'clamp(2.8rem, 5vw, 4.4rem)', maxWidth: 880 }}>
            Request access to <span style={{ fontStyle: 'italic', color: 'var(--gold)' }}>The Terminal</span>
          </h2>
          <p className="fade-up body-copy mt-7 mx-auto" style={{ maxWidth: 600 }}>
            The Terminal is open to accredited investors and family offices. Access is granted after a brief intake call to review your investment objectives, capacity, and asset preferences. There are no fees to access the platform.
          </p>

          <div className="fade-up mt-10 flex flex-wrap justify-center items-center gap-4">
            <a
              href="https://www.reprimeterminal.com/en/join"
              target="_blank"
              rel="noopener noreferrer"
              onMouseEnter={(e) => {
                e.currentTarget.style.background = '#D4B978';
                e.currentTarget.style.boxShadow = '0 0 50px rgba(201,169,98,0.25)';
                e.currentTarget.style.transform = 'translateY(-2px)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = '#C9A962';
                e.currentTarget.style.boxShadow = '0 0 30px rgba(201,169,98,0.15)';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
              style={{
                background: '#C9A962',
                color: '#07090F',
                fontFamily: 'DM Sans, sans-serif',
                fontSize: 17,
                fontWeight: 700,
                padding: '18px 48px',
                borderRadius: 10,
                boxShadow: '0 0 30px rgba(201,169,98,0.15)',
                textDecoration: 'none',
                display: 'inline-block',
                transition: 'background .25s ease, box-shadow .25s ease, transform .25s ease',
              }}
            >
              Apply for Membership →
            </a>
            <a
              href="https://scheduler.zoom.us/gideon-gratsiani/schedule-with-gideon-czf4njv8"
              target="_blank"
              rel="noopener noreferrer"
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = 'rgba(201,169,98,0.6)';
                e.currentTarget.style.background = 'rgba(201,169,98,0.06)';
                e.currentTarget.style.transform = 'translateY(-2px)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = 'rgba(201,169,98,0.35)';
                e.currentTarget.style.background = 'transparent';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
              style={{
                background: 'transparent',
                color: '#C9A962',
                fontFamily: 'DM Sans, sans-serif',
                fontSize: 17,
                fontWeight: 600,
                padding: '17px 40px',
                borderRadius: 10,
                border: '1px solid rgba(201,169,98,0.35)',
                textDecoration: 'none',
                display: 'inline-block',
                transition: 'border-color .25s ease, background .25s ease, transform .25s ease',
              }}
            >
              Schedule a Call
            </a>
          </div>

          <div className="fade-up mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-3" style={{ fontFamily: 'JetBrains Mono', fontSize: 10.5, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--tx-3)' }}>
            <span className="flex items-center gap-2"><span style={{ color: 'var(--gold)' }}>✓</span> Accredited Only</span>
            <span className="flex items-center gap-2"><span style={{ color: 'var(--gold)' }}>✓</span> Personal Onboarding</span>
          </div>

          {/* Contact strip — kept in sync with the footer */}
          <div className="fade-up mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-2" style={{ fontFamily: 'DM Sans', fontSize: 12.5, color: 'var(--tx-3)', borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 24 }}>
            {/* UPDATE PHONE NUMBER IF NEEDED */}
            <span><span style={{ color: 'var(--tx-2)' }}>Toll Free:</span> +1 (917) 703-0365</span>
            {/* UPDATE EMAIL IF NEEDED */}
            <span><span style={{ color: 'var(--tx-2)' }}>Email:</span> terminal@reprimeterminal.com</span>
            <span><span style={{ color: 'var(--tx-2)' }}>Web:</span> reprime.com</span>
            <span>RePrime Group · 123 N. Lawler St, Postville, IA 52162</span>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Footer ──────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--bd)', padding: '80px 0 40px' }}>
      <div className="mx-auto px-6 lg:px-10" style={{ maxWidth: 1400 }}>
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-5">
            <a href="#top" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>
              <img src="uploads/terminal-logo-stacked-gold%20(1).svg" alt="The Terminal · by RePrime Group" style={{ height: 64, width: 'auto', display: 'block' }} />
            </a>
            <p style={{ fontFamily: 'DM Sans', fontSize: 13.5, color: 'var(--tx-3)', marginTop: 18, lineHeight: 1.7, maxWidth: 380 }}>
              Disciplined commercial real estate acquisition and asset management since 1995. The Terminal is our investor platform — built for transparency.
            </p>
          </div>
          <div className="md:col-span-2">
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Platform</div>
            <ul className="mt-4 flex flex-col gap-2.5" style={{ listStyle: 'none', padding: 0, fontFamily: 'DM Sans', fontSize: 13 }}>
              {['The Terminal', 'The Marketplace', 'Process', 'Track Record'].map((x) => <li key={x}><a href="#" style={{ color: 'var(--tx-2)', textDecoration: 'none' }}>{x}</a></li>)}
            </ul>
          </div>
          <div className="md:col-span-2">
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Company</div>
            <ul className="mt-4 flex flex-col gap-2.5" style={{ listStyle: 'none', padding: 0, fontFamily: 'DM Sans', fontSize: 13 }}>
              {['About', 'Team', 'Press', 'Contact'].map((x) => <li key={x}><a href="#" style={{ color: 'var(--tx-2)', textDecoration: 'none' }}>{x}</a></li>)}
            </ul>
          </div>
          <div className="md:col-span-3">
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'var(--tx-3)', letterSpacing: '.14em', textTransform: 'uppercase' }}>Get In Touch</div>
            <div className="mt-4 flex flex-col gap-2" style={{ fontFamily: 'DM Sans', fontSize: 13, color: 'var(--tx-2)' }}>
              <span style={{ color: 'var(--tx-3)', fontSize: 11, letterSpacing: '.06em' }}>TOLL FREE</span>
              {/* UPDATE PHONE NUMBER IF NEEDED */}
              <span style={{ marginTop: -4 }}>+1 (917) 703-0365</span>
              <span style={{ color: 'var(--tx-3)', fontSize: 11, letterSpacing: '.06em', marginTop: 6 }}>EMAIL</span>
              {/* UPDATE EMAIL IF NEEDED */}
              <span style={{ marginTop: -4 }}>terminal@reprimeterminal.com</span>
              <span style={{ color: 'var(--tx-3)', fontSize: 11, letterSpacing: '.06em', marginTop: 6 }}>WEB</span>
              <span style={{ marginTop: -4 }}>reprime.com</span>
              <span style={{ color: 'var(--tx-3)', fontSize: 12, marginTop: 10, lineHeight: 1.5 }}>RePrime Group<br />123 N. Lawler St<br />Postville, IA 52162</span>
            </div>
          </div>
        </div>

        <div className="divider-gold mt-14" />

        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mt-8" style={{ fontFamily: 'DM Sans', fontSize: 11.5, color: 'var(--tx-3)' }}>
          <span>© 2026 RePrime Group, LLC. All rights reserved.</span>
          <span style={{ maxWidth: 680, lineHeight: 1.6, fontSize: 11 }}>
            All investment information is subject to verification and accredited investor confirmation. Past performance does not guarantee future results.
          </span>
          <div className="flex gap-5">
            <a href="#" style={{ color: 'var(--tx-3)', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'var(--tx-3)', textDecoration: 'none' }}>Terms</a>
            <a href="#" style={{ color: 'var(--tx-3)', textDecoration: 'none' }}>Disclosures</a>
          </div>
        </div>
      </div>
    </footer>);

}



// ─── Institutional Team Section ───────────────────────────
function InstitutionalTeamSection() {
  const useFadeIn = (delay = 0) => {
    const ref = useRef(null);
    const [visible, setVisible] = useState(false);
    useEffect(() => {
      const observer = new IntersectionObserver(
        ([entry]) => { if (entry.isIntersecting) setVisible(true); },
        { threshold: 0.1 }
      );
      if (ref.current) observer.observe(ref.current);
      return () => observer.disconnect();
    }, []);
    return {
      ref,
      style: {
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(40px)",
        transition: `opacity 0.8s cubic-bezier(0.16,1,0.3,1) ${delay}s, transform 0.8s cubic-bezier(0.16,1,0.3,1) ${delay}s`,
      },
    };
  };

  // Counter animation
  const useCountUp = (target, duration = 2000, prefix = "", suffix = "") => {
    const [count, setCount] = useState(0);
    const [hasAnimated, setHasAnimated] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting && !hasAnimated) {
            setHasAnimated(true);
            const startTime = performance.now();
            const animate = (currentTime) => {
              const elapsed = currentTime - startTime;
              const progress = Math.min(elapsed / duration, 1);
              const eased = 1 - Math.pow(1 - progress, 3);
              setCount(Math.floor(eased * target));
              if (progress < 1) requestAnimationFrame(animate);
              else setCount(target);
            };
            requestAnimationFrame(animate);
          }
        },
        { threshold: 0.3 }
      );
      if (ref.current) observer.observe(ref.current);
      return () => observer.disconnect();
    }, [target, duration, hasAnimated]);
    return { ref, display: prefix + count.toLocaleString() + suffix };
  };

  const fade1 = useFadeIn(0);
  const fade2 = useFadeIn(0.1);
  const fade3 = useFadeIn(0.15);
  const fade4 = useFadeIn(0.2);
  const fade5 = useFadeIn(0.25);

  const savingsCounter = useCountUp(1200000, 2500, "$", "+");

  const comparisonData = [
    {
      category: "Market Data & Analytics",
      traditional: "CoStar, Placer.ai, REIS, and other institutional data subscriptions",
      traditionalCost: "$200K+ / year",
      terminal: "Included — institutional-grade market data, foot traffic analytics, vacancy and rent comparables for every property type, nationwide",
      terminalLabel: "Included",
    },
    {
      category: "Underwriting & Analysis Team",
      traditional: "3–4 analysts reviewing rent rolls, T-12s, building proformas, stress-testing assumptions",
      traditionalCost: "$400K+ / year",
      terminal: "AI analyzes every property in 3–5 minutes — financials, tenant risk, market position, and lease terms extracted automatically",
      terminalLabel: "AI · 3–5 min",
    },
    {
      category: "Tenant Research & Credit Analysis",
      traditional: "Manual research per tenant — credit reports, litigation history, national presence, local track record",
      traditionalCost: "Days per property",
      terminal: "Automated tenant intelligence reports — credit quality, local and national records, pros and cons — generated for every deal instantly",
      terminalLabel: "Automated",
    },
    {
      category: "Lease Abstraction",
      traditional: "Outsourced to third-party firms at $500–$1,000+ per lease, turnaround in days",
      traditionalCost: "$500–$1K / lease",
      terminal: "AI abstracts 50-page leases in 3–5 minutes — renewal terms, escalations, termination rights, expense responsibilities, all extracted",
      terminalLabel: "AI · Minutes",
    },
    {
      category: "Deal Sourcing Network",
      traditional: "Years of broker relationships, attending conferences, building reputation in target markets",
      traditionalCost: "Years to build",
      terminal: "30+ years of direct broker relationships plus 24/7 AI scanning every major platform and 3,100+ counties for auctions",
      terminalLabel: "30+ yrs + AI",
    },
    {
      category: "Legal Structuring & LOIs",
      traditional: "Outside counsel drafting each LOI and PSA — $25K–$50K+ per deal in legal fees",
      traditionalCost: "$25K–$50K / deal",
      terminal: "Templated dual-option LOIs with seller mezzanine, IRC §453 language, and five closing methods — turned around same day",
      terminalLabel: "Same Day",
    },
  ];

  const [hoveredRow, setHoveredRow] = useState(null);
  const [showTerminal, setShowTerminal] = useState(true);

  return (
    <section
      className="institutional-team"
      style={{
        background: "#07090F",
        padding: "120px 24px",
        fontFamily: "'DM Sans', sans-serif",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <link
        href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet"
      />

      {/* Ambient glow */}
      <div
        style={{
          position: "absolute",
          top: "30%",
          right: "-5%",
          width: 600,
          height: 600,
          borderRadius: "50%",
          background: "radial-gradient(circle, rgba(201,169,98,0.03) 0%, transparent 70%)",
          pointerEvents: "none",
        }}
      />

      <div style={{ maxWidth: 1400, margin: "0 auto", position: "relative" }}>
        {/* ═══ HEADER ═══ */}
        <div ref={fade1.ref} style={{ ...fade1.style, maxWidth: 800, marginBottom: 64 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
            <div style={{ width: 32, height: 1, background: "linear-gradient(90deg, #C9A962, transparent)" }} />
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", color: "#C9A962", textTransform: "uppercase" }}>
              Why The Terminal
            </span>
          </div>

          <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(2.2rem, 4.5vw, 3.6rem)", fontWeight: 600, color: "#F2F0ED", lineHeight: 1.08, margin: "0 0 20px 0", letterSpacing: "-0.02em" }}>
            Your Institutional Team —{" "}
            <span style={{ fontStyle: "italic", color: "#C9A962" }}>
              Without the Overhead
            </span>
          </h2>

          <p style={{ fontSize: 17, color: "#B8B5AE", lineHeight: 1.75, margin: "0 0 12px 0" }}>
            A typical institutional CRE investor maintains an in-house team of analysts, underwriters, asset managers, market researchers, and legal counsel — at a cost of millions per year in payroll and data subscriptions alone.
          </p>
          <p style={{ fontSize: 17, color: "#F2F0ED", lineHeight: 1.75, margin: 0, fontWeight: 500 }}>
            The Terminal replaces that entire team. Every analysis. Every report. Every data source. Every workflow. Built, running, and included.
          </p>
        </div>

        {/* ═══ SAVINGS CALLOUT ═══ */}
        <div
          ref={fade2.ref}
          style={{
            ...fade2.style,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 48,
            padding: "32px 48px",
            background: "rgba(201,169,98,0.04)",
            border: "1px solid rgba(201,169,98,0.12)",
            borderRadius: 16,
            marginBottom: 48,
            textAlign: "center",
          }}
        >
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "#6B6860", textTransform: "uppercase", marginBottom: 8 }}>
              Estimated Annual Cost to Build This In-House
            </div>
            <div
              ref={savingsCounter.ref}
              style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(2.5rem, 5vw, 3.5rem)", fontWeight: 600, color: "#EF4444", lineHeight: 1 }}
            >
              {savingsCounter.display}
            </div>
            <div style={{ fontSize: 12, color: "#6B6860", marginTop: 6 }}>
              Analysts + data subscriptions + legal + overhead
            </div>
          </div>
          <div style={{ width: 1, height: 60, background: "rgba(201,169,98,0.2)" }} />
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "#6B6860", textTransform: "uppercase", marginBottom: 8 }}>
              Through The Terminal
            </div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: "clamp(2.5rem, 5vw, 3.5rem)", fontWeight: 600, color: "#4ADE80", lineHeight: 1 }}>
              Included
            </div>
            <div style={{ fontSize: 12, color: "#6B6860", marginTop: 6 }}>
              Everything below — built, running, and at your fingertips
            </div>
          </div>
        </div>

        {/* ═══ TOGGLE ═══ */}
        <div
          ref={fade3.ref}
          style={{
            ...fade3.style,
            display: "flex",
            justifyContent: "center",
            gap: 4,
            marginBottom: 32,
          }}
        >
          <button
            onClick={() => setShowTerminal(false)}
            style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11,
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              padding: "10px 24px",
              borderRadius: "8px 0 0 8px",
              border: "1px solid rgba(255,255,255,0.08)",
              background: !showTerminal ? "rgba(239,68,68,0.1)" : "rgba(255,255,255,0.02)",
              color: !showTerminal ? "#EF4444" : "#6B6860",
              cursor: "pointer",
              transition: "all 0.3s ease",
            }}
          >
            Building It Yourself
          </button>
          <button
            onClick={() => setShowTerminal(true)}
            style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11,
              letterSpacing: "0.08em",
              textTransform: "uppercase",
              padding: "10px 24px",
              borderRadius: "0 8px 8px 0",
              border: "1px solid rgba(201,169,98,0.15)",
              background: showTerminal ? "rgba(201,169,98,0.08)" : "rgba(255,255,255,0.02)",
              color: showTerminal ? "#C9A962" : "#6B6860",
              cursor: "pointer",
              transition: "all 0.3s ease",
            }}
          >
            Through The Terminal
          </button>
        </div>

        {/* ═══ COMPARISON TABLE ═══ */}
        <div ref={fade4.ref} style={{ ...fade4.style, marginBottom: 48 }}>
          {comparisonData.map((row, i) => (
            <div
              key={i}
              onMouseEnter={() => setHoveredRow(i)}
              onMouseLeave={() => setHoveredRow(null)}
              style={{
                display: "grid",
                gridTemplateColumns: "200px 1fr auto",
                gap: 24,
                padding: "24px 28px",
                background: hoveredRow === i ? "rgba(255,255,255,0.02)" : "transparent",
                borderBottom: "1px solid rgba(255,255,255,0.04)",
                borderRadius: hoveredRow === i ? 12 : 0,
                transition: "background 0.3s ease",
                alignItems: "center",
              }}
            >
              {/* Category */}
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "#C9A962", textTransform: "uppercase", marginBottom: 4 }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600, color: "#F2F0ED", lineHeight: 1.3 }}>
                  {row.category}
                </div>
              </div>

              {/* Description */}
              <div
                style={{
                  transition: "opacity 0.4s ease",
                }}
              >
                {!showTerminal ? (
                  <div>
                    <p style={{ fontSize: 14, color: "#B8B5AE", lineHeight: 1.6, margin: 0 }}>
                      {row.traditional}
                    </p>
                  </div>
                ) : (
                  <div>
                    <p style={{ fontSize: 14, color: "#B8B5AE", lineHeight: 1.6, margin: 0 }}>
                      {row.terminal}
                    </p>
                  </div>
                )}
              </div>

              {/* Cost / Status */}
              <div style={{ textAlign: "right", minWidth: 120 }}>
                {!showTerminal ? (
                  <span
                    style={{
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 13,
                      color: "#EF4444",
                      fontWeight: 600,
                      padding: "6px 14px",
                      borderRadius: 6,
                      background: "rgba(239,68,68,0.08)",
                      border: "1px solid rgba(239,68,68,0.15)",
                    }}
                  >
                    {row.traditionalCost}
                  </span>
                ) : (
                  <span
                    style={{
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 13,
                      color: "#4ADE80",
                      fontWeight: 600,
                      padding: "6px 14px",
                      borderRadius: 6,
                      background: "rgba(74,222,128,0.08)",
                      border: "1px solid rgba(74,222,128,0.15)",
                    }}
                  >
                    {row.terminalLabel}
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* ═══ BOTTOM STATEMENT ═══ */}
        <div
          ref={fade5.ref}
          style={{
            ...fade5.style,
            background: "rgba(255,255,255,0.02)",
            backdropFilter: "blur(20px)",
            WebkitBackdropFilter: "blur(20px)",
            border: "1px solid rgba(201,169,98,0.12)",
            borderRadius: 16,
            padding: "40px 48px",
            textAlign: "center",
            maxWidth: 800,
            margin: "0 auto",
          }}
        >
          <p
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 24,
              fontWeight: 500,
              color: "#F2F0ED",
              lineHeight: 1.4,
              margin: "0 0 12px 0",
            }}
          >
            A{" "}
            <span style={{ color: "#C9A962" }}>$3B+ track record</span> team.{" "}
            <span style={{ color: "#C9A962" }}>Institutional-grade AI</span>.{" "}
            <span style={{ color: "#C9A962" }}>30+ years</span> of relationships.
          </p>
          <p
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 22,
              fontStyle: "italic",
              color: "#C9A962",
              margin: 0,
            }}
          >
            Without hiring a single person.
          </p>
        </div>

        {/* Gold divider */}
        <div
          style={{
            height: 1,
            marginTop: 80,
            background: "linear-gradient(90deg, transparent, rgba(201,169,98,0.3), transparent)",
          }}
        />
      </div>

      <style>{`
        @media (max-width: 900px) {
          section > div > div > div[style*="grid-template-columns: 200px"] {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
          }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ProcessSection, TerminalProduct, TerminalDashboardPreview, InstitutionalTeamSection, TrackRecord, CTA, Footer });