/* Imobiliaria Capital — landing page sections */
const { useState, useEffect, useRef } = React;

// ===== LOGO ============================================
function Logo() {
  return (
    <a href="#top" className="logo">
      <div className="logo-mark"><span>IM</span></div>
      <div className="logo-text">
        <div className="word">IMOBILIARIA</div>
        <div className="sub">Capital · Est. 1998</div>
      </div>
    </a>
  );
}

// ===== NAV ============================================
function Nav() {
  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={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#thesis">Firm</a>
          <a href="#strategy">Strategy</a>
          <a href="#portfolio">Portfolio</a>
          <a href="#footprint">Footprint</a>
          <a href="#leadership">Leadership</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="btn btn-ghost-light">
          Investor Login <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
}

// ===== HERO ============================================
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-bg"></div>
      <div className="hero-grid"></div>
      <div className="container hero-content">
        <div className="eyebrow">Private Real Estate · Fund Management</div>
        <h1>
          Placing <em>responsible</em><br />
          capital first.
        </h1>
        <p className="hero-sub">
          Imobiliaria Capital is a private real estate investment firm deploying
          institutional capital across six markets in Africa, the Middle East,
          and Europe — with a singular focus on superior risk-adjusted returns
          through disciplined development.
        </p>
        <div className="hero-cta">
          <a href="#thesis" className="btn btn-primary">
            Investment Thesis <span className="arrow">→</span>
          </a>
          <a href="#portfolio" className="btn btn-ghost-light">
            View Portfolio
          </a>
        </div>
      </div>
      <div className="container">
        <div className="hero-meta">
          <div className="cell">
            <div className="l">AUM</div>
            <div className="v">$1.4<small>B</small></div>
          </div>
          <div className="cell">
            <div className="l">Active Investments</div>
            <div className="v">32<small>+</small></div>
          </div>
          <div className="cell">
            <div className="l">Markets</div>
            <div className="v">6<small> regions</small></div>
          </div>
          <div className="cell">
            <div className="l">Track Record</div>
            <div className="v">27<small> yrs</small></div>
          </div>
        </div>
      </div>
      <div className="hero-side">IMO · CAPITAL — VINTAGE MMXXIV</div>
      <div className="scroll-cue">
        <span>Scroll</span>
        <div className="line"></div>
      </div>
    </section>
  );
}

// ===== MARQUEE ============================================
function Marquee() {
  const items = [
    "Asset Management", "•", "Project Management", "•",
    "Development Capital", "•", "Quantity Surveying", "•",
    "Construction Management", "•", "Fund Advisory", "•"
  ];
  const loop = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((t, i) => (
          <div key={i} className={`marquee-item ${t === '•' ? 'dot' : ''}`}>{t}</div>
        ))}
      </div>
    </div>
  );
}

// ===== THESIS ============================================
function Thesis() {
  return (
    <section className="section section-light" id="thesis" data-screen-label="02 Thesis">
      <div className="container">
        <div className="section-label">
          <span className="num">I.</span>
          <span>The Firm</span>
          <span className="rule"></span>
        </div>
        <div className="thesis-grid" style={{ marginTop: 48 }}>
          <div>
            <div className="eyebrow">Investment Philosophy</div>
            <h2>
              Responsible business<br />
              leads to <em>great<br />developments.</em>
            </h2>
          </div>
          <div className="thesis-body">
            <p>
              Founded on a quarter-century of operating experience across the construction
              and development value chain, Imobiliaria Capital is purpose-built for the
              complex realities of frontier and emerging real estate markets. Our edge is
              not financial engineering — it is operational mastery.
            </p>
            <p>
              We underwrite every transaction with the rigor of a professional quantity
              surveyor, execute with the discipline of a multi-disciplinary contractor,
              and steward capital with the conviction of an owner. The result is a
              portfolio defined by durability, yield, and on-time delivery.
            </p>
            <div className="thesis-pillars">
              <div className="p">
                <div className="num">— I —</div>
                <div className="t">Disciplined Underwriting</div>
                <div className="d">Conservative leverage and protected basis on every deal.</div>
              </div>
              <div className="p">
                <div className="num">— II —</div>
                <div className="t">Operational Edge</div>
                <div className="d">In-house QS, PM, and CM capability removes execution risk.</div>
              </div>
              <div className="p">
                <div className="num">— III —</div>
                <div className="t">Local Knowledge</div>
                <div className="d">On-the-ground partners in every market we deploy capital.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== STATS ============================================
function Stats() {
  return (
    <section className="stats" data-screen-label="03 Stats">
      <div className="container stats-inner">
        <div className="section-label" style={{ marginBottom: 40 }}>
          <span className="num">II.</span>
          <span>By The Numbers</span>
          <span className="rule"></span>
        </div>
        <div className="stats-grid">
          {window.IMO_DATA.STATS.map((s, i) => (
            <div className="cell" key={i}>
              <div className="v">{s.v}<span className="unit">{s.unit}</span></div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== SECTORS / STRATEGY ============================================
function Strategy() {
  return (
    <section className="section section-ivory" id="strategy" data-screen-label="04 Strategy">
      <div className="container">
        <div className="section-label">
          <span className="num">III.</span>
          <span>Investment Strategy</span>
          <span className="rule"></span>
        </div>
        <div className="sectors-head" style={{ marginTop: 48 }}>
          <div>
            <div className="eyebrow">Where We Deploy Capital</div>
            <h2>Six sectors.<br />One <em>conviction.</em></h2>
          </div>
          <p className="lede">
            We invest across the full spectrum of institutional real estate — from
            premium-grade offices in primary nodes to large-format retail and
            last-mile logistics. Every sector demands a different playbook;
            we have built the team to execute each.
          </p>
        </div>
        <div className="sectors">
          {window.IMO_DATA.SECTORS.map((s, i) => (
            <div className="sector" key={i}>
              <div className="sector-num">{s.n} · Sector</div>
              <div className="sector-title">{s.t}</div>
              <div className="sector-desc">{s.d}</div>
              <div className="sector-meta">
                <span>Core · Value-Add</span>
                <span>→</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== PORTFOLIO ============================================
function Portfolio() {
  const [filter, setFilter] = useState('all');
  const tabs = [
    { id: 'all', label: 'All Investments' },
    { id: 'Mixed-Use', label: 'Mixed-Use' },
    { id: 'Premium Commercial', label: 'Commercial' },
    { id: 'Residential', label: 'Residential' },
    { id: 'Industrial', label: 'Industrial' },
  ];
  const filtered = filter === 'all'
    ? window.IMO_DATA.PORTFOLIO
    : window.IMO_DATA.PORTFOLIO.filter(p => p.sector.includes(filter) || p.sector === filter);

  return (
    <section className="section section-dark" id="portfolio" data-screen-label="05 Portfolio"
             style={{ background: 'var(--ink)', color: 'var(--ivory)' }}>
      <div className="container">
        <div className="section-label">
          <span className="num">IV.</span>
          <span>Portfolio</span>
          <span className="rule"></span>
        </div>
        <div className="portfolio-head" style={{ marginTop: 48 }}>
          <div>
            <div className="eyebrow">Selected Investments</div>
            <h2>A <em>portfolio</em><br />built to endure.</h2>
          </div>
          <div className="portfolio-tabs">
            {tabs.map(t => (
              <button key={t.id}
                      className={filter === t.id ? 'active' : ''}
                      onClick={() => setFilter(t.id)}>
                {t.label}
              </button>
            ))}
          </div>
        </div>
        <div className="portfolio-grid">
          {filtered.map((p) => (
            <div className={`pcard ${p.size_class}`} key={p.id}>
              <div className="img" style={{ backgroundImage: `url(${p.img})` }}></div>
              <div className="overlay"></div>
              <div className="badge">{p.strategy}</div>
              <div className="top-meta">{p.year}</div>
              <div className="content">
                <div className="name">{p.name}</div>
                <div className="meta">
                  <span>{p.location}</span>
                  <span>·</span>
                  <span>{p.size}</span>
                </div>
                <div className="v">{p.value}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== FOOTPRINT ============================================
function Footprint() {
  return (
    <section className="section section-dark" id="footprint" data-screen-label="06 Footprint"
             style={{ background: 'var(--ink-2)', color: 'var(--ivory)', paddingTop: 0 }}>
      <div className="container">
        <div className="footprint-grid">
          <div className="footprint-head">
            <div className="section-label">
              <span className="num">V.</span>
              <span>Global Footprint</span>
              <span className="rule"></span>
            </div>
            <h2>Six offices.<br />Three <em>continents.</em></h2>
            <p>
              From our Johannesburg headquarters to Lisbon, Dubai, and Port Louis —
              we operate where capital meets opportunity, with local partners
              embedded in every market.
            </p>
            <div className="offices">
              {window.IMO_DATA.OFFICES.map((o, i) => (
                <div className="office" key={i}>
                  <div className="region">{o.region}</div>
                  <div className="city">{o.city}</div>
                </div>
              ))}
            </div>
          </div>
          <WorldMap />
        </div>
      </div>
    </section>
  );
}

function WorldMap() {
  // Equirectangular: x = (lng+180)/360 * 1000, y = (90-lat)/180 * 500
  // Office positions:
  const HQ = { x: 577, y: 323, label: "JHB", name: "Johannesburg", coords: "26°S 28°E" };
  const offices = [
    HQ,
    { x: 590, y: 322, label: "MPM", name: "Maputo",       coords: "25°S 32°E" },
    { x: 536, y: 274, label: "LAD", name: "Luanda",       coords: "08°S 13°E" },
    { x: 653, y: 180, label: "DXB", name: "Dubai",        coords: "25°N 55°E" },
    { x: 474, y: 142, label: "LIS", name: "Lisbon",       coords: "38°N 09°W" },
    { x: 659, y: 305, label: "MRU", name: "Port Louis",   coords: "20°S 57°E" },
  ];

  // Build arc paths from HQ to each other office
  const arc = (a, b) => {
    const dx = b.x - a.x, dy = b.y - a.y;
    const dist = Math.hypot(dx, dy);
    const mx = (a.x + b.x) / 2, my = (a.y + b.y) / 2;
    // curvature: bow upward (negative y)
    const nx = -dy / dist, ny = dx / dist;
    const bend = Math.min(dist * 0.25, 50);
    const cx = mx + nx * bend, cy = my + ny * bend;
    return `M ${a.x} ${a.y} Q ${cx} ${cy} ${b.x} ${b.y}`;
  };

  return (
    <div className="map-wrap">
      <svg viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
           style={{ width: '100%', height: '100%' }}>
        <defs>
          {/* Dot pattern for landmass texture */}
          <pattern id="land-dots" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="1" fill="#F4EEE2" />
          </pattern>
          {/* Gradient mask for fade at edges */}
          <radialGradient id="fade-mask" cx="50%" cy="50%" r="70%">
            <stop offset="0%" stopColor="white" stopOpacity="1" />
            <stop offset="70%" stopColor="white" stopOpacity="0.85" />
            <stop offset="100%" stopColor="white" stopOpacity="0.3" />
          </radialGradient>
          <mask id="continent-mask">
            <g fill="white">
              {/* Continent silhouettes — more accurate equirectangular outlines */}
              {/* North America */}
              <path d="M 110 95 L 145 80 L 200 75 L 240 85 L 270 110 L 282 145 L 268 165 L 254 178 L 232 200 L 218 232 L 200 252 L 178 268 L 158 256 L 145 230 L 138 200 L 130 175 L 118 150 L 110 125 Z" />
              <path d="M 195 200 L 245 200 L 270 230 L 260 252 L 230 258 L 210 245 L 200 225 Z" />
              {/* Central America */}
              <path d="M 215 235 L 250 245 L 268 258 L 260 275 L 232 270 L 218 255 Z" />
              {/* Caribbean dots */}
              <circle cx="262" cy="253" r="3" /><circle cx="278" cy="255" r="2" />
              {/* South America */}
              <path d="M 268 278 L 295 270 L 320 285 L 335 315 L 332 350 L 325 385 L 312 420 L 295 445 L 278 458 L 270 440 L 268 408 L 268 375 L 270 340 L 268 308 Z" />
              {/* Greenland */}
              <path d="M 322 65 L 365 60 L 392 75 L 388 110 L 365 125 L 340 118 L 325 95 Z" />
              {/* Europe */}
              <path d="M 462 110 L 498 105 L 525 108 L 542 118 L 538 138 L 522 152 L 498 158 L 478 152 L 465 142 L 458 128 Z" />
              {/* Scandinavia */}
              <path d="M 498 80 L 528 75 L 540 88 L 535 108 L 510 112 L 495 100 Z" />
              {/* British Isles */}
              <path d="M 458 102 L 472 100 L 478 115 L 470 128 L 458 122 Z" />
              {/* Iceland */}
              <circle cx="442" cy="80" r="4" />
              {/* Africa */}
              <path d="M 482 175 L 520 168 L 555 170 L 585 178 L 605 195 L 615 222 L 612 252 L 602 282 L 588 310 L 578 335 L 565 358 L 545 370 L 522 358 L 505 332 L 492 302 L 485 272 L 480 240 L 478 208 Z" />
              {/* Middle East */}
              <path d="M 565 165 L 615 158 L 645 168 L 660 188 L 655 205 L 632 215 L 605 210 L 585 195 L 575 178 Z" />
              {/* Russia / Asia (large) */}
              <path d="M 540 90 L 600 80 L 670 78 L 740 82 L 800 92 L 850 105 L 880 122 L 870 145 L 845 158 L 810 162 L 770 158 L 730 152 L 695 152 L 660 158 L 625 155 L 590 145 L 562 132 L 545 115 Z" />
              {/* India */}
              <path d="M 678 195 L 712 192 L 735 200 L 740 225 L 728 252 L 712 268 L 695 258 L 685 235 L 678 215 Z" />
              {/* SE Asia / Indochina */}
              <path d="M 745 220 L 778 215 L 798 232 L 795 258 L 780 275 L 762 270 L 752 248 Z" />
              {/* China / Eastern Asia */}
              <path d="M 760 145 L 815 142 L 855 152 L 870 175 L 858 195 L 830 205 L 798 200 L 770 188 L 755 168 Z" />
              {/* Japan */}
              <path d="M 880 158 L 892 162 L 898 178 L 892 195 L 882 200 L 878 188 L 882 172 Z" />
              {/* Indonesia / Philippines — archipelago dots */}
              <ellipse cx="800" cy="280" rx="18" ry="6" />
              <ellipse cx="828" cy="290" rx="14" ry="5" />
              <ellipse cx="852" cy="282" rx="10" ry="5" />
              <ellipse cx="870" cy="278" rx="8" ry="4" />
              {/* Australia */}
              <path d="M 818 322 L 870 318 L 905 322 L 925 340 L 920 365 L 895 378 L 855 380 L 825 372 L 810 355 L 808 338 Z" />
              {/* New Zealand */}
              <ellipse cx="945" cy="395" rx="6" ry="14" transform="rotate(20 945 395)" />
              {/* Madagascar */}
              <ellipse cx="635" cy="335" rx="6" ry="18" transform="rotate(-12 635 335)" />
            </g>
          </mask>
        </defs>

        {/* Background: subtle grid */}
        <g stroke="rgba(244,238,226,0.04)" strokeWidth="0.5">
          {[100, 200, 300, 400].map(y => (
            <line key={y} x1="0" y1={y} x2="1000" y2={y} />
          ))}
          {[100, 200, 300, 400, 500, 600, 700, 800, 900].map(x => (
            <line key={x} x1={x} y1="0" x2={x} y2="500" />
          ))}
          {/* Equator + Tropics */}
          <line x1="0" y1="250" x2="1000" y2="250" stroke="rgba(184,148,92,0.18)" strokeDasharray="2,4" />
          <line x1="0" y1="185" x2="1000" y2="185" stroke="rgba(244,238,226,0.05)" strokeDasharray="1,3" />
          <line x1="0" y1="315" x2="1000" y2="315" stroke="rgba(244,238,226,0.05)" strokeDasharray="1,3" />
        </g>

        {/* Coordinate labels */}
        <g fill="rgba(184,148,92,0.5)" fontFamily="'JetBrains Mono', monospace" fontSize="8" letterSpacing="1">
          <text x="6" y="253">0°</text>
          <text x="6" y="188">23°N</text>
          <text x="6" y="318">23°S</text>
        </g>

        {/* Continents rendered via mask + dot pattern */}
        <g mask="url(#continent-mask)">
          <rect x="0" y="0" width="1000" height="500" fill="url(#land-dots)" opacity="0.35" />
          {/* A second pass for slight glow */}
          <rect x="0" y="0" width="1000" height="500" fill="rgba(244,238,226,0.04)" />
        </g>

        {/* Arc connections from JHB */}
        <g fill="none">
          {offices.filter(o => o.label !== 'JHB').map((o, i) => (
            <g key={o.label}>
              {/* Soft glow underneath */}
              <path d={arc(HQ, o)} stroke="rgba(184,148,92,0.15)" strokeWidth="3" />
              {/* Main arc */}
              <path d={arc(HQ, o)} stroke="rgba(184,148,92,0.85)" strokeWidth="0.8"
                    strokeDasharray="180" strokeDashoffset="180">
                <animate attributeName="stroke-dashoffset"
                         values="180;0;0;180"
                         keyTimes="0;0.45;0.85;1"
                         dur="6s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
              </path>
              {/* Moving pulse along arc */}
              <circle r="2" fill="#C9A66B">
                <animateMotion path={arc(HQ, o)} dur="4s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
                <animate attributeName="opacity" values="0;1;1;0" dur="4s" begin={`${i * 0.5}s`} repeatCount="indefinite" />
              </circle>
            </g>
          ))}
        </g>

        {/* Office markers */}
        {offices.map((o, i) => {
          const isHQ = o.label === 'JHB';
          const isMPM = o.label === 'MPM';
          // Custom label offsets to avoid overlap (JHB <-> MPM are very close)
          // JHB: push label up and left; MPM: push label down-right
          const labelDx = isHQ ? -42 : isMPM ? 12 : 10;
          const labelDy = isHQ ? -14 : isMPM ? 22 : -6;
          return (
            <g key={o.label}>
              {/* Outer pulse */}
              <circle cx={o.x} cy={o.y} r={isHQ ? 6 : 4} fill="rgba(184,148,92,0.25)">
                <animate attributeName="r"
                         values={isHQ ? "6;22;6" : "4;14;4"}
                         dur="2.8s" begin={`${i * 0.4}s`} repeatCount="indefinite" />
                <animate attributeName="opacity"
                         values="0.8;0;0.8" dur="2.8s"
                         begin={`${i * 0.4}s`} repeatCount="indefinite" />
              </circle>
              {/* Crosshair for HQ */}
              {isHQ && (
                <g stroke="#C9A66B" strokeWidth="0.6" opacity="0.7">
                  <line x1={o.x - 14} y1={o.y} x2={o.x - 7} y2={o.y} />
                  <line x1={o.x + 7} y1={o.y} x2={o.x + 14} y2={o.y} />
                  <line x1={o.x} y1={o.y - 14} x2={o.x} y2={o.y - 7} />
                  <line x1={o.x} y1={o.y + 7} x2={o.x} y2={o.y + 14} />
                </g>
              )}
              {/* Marker core */}
              <circle cx={o.x} cy={o.y} r={isHQ ? 3.5 : 2.5}
                      fill={isHQ ? "#F4EEE2" : "#C9A66B"}
                      stroke="#0A1620" strokeWidth="0.8" />
              {/* MPM: small connector line down to its label */}
              {isMPM && (
                <line x1={o.x} y1={o.y + 3} x2={o.x + 10} y2={o.y + 18}
                      stroke="rgba(201,166,107,0.5)" strokeWidth="0.4" />
              )}
              {/* Label */}
              <g transform={`translate(${o.x + labelDx}, ${o.y + labelDy})`}>
                <text fontSize="9" fontFamily="'JetBrains Mono', monospace"
                      fill="#F4EEE2" letterSpacing="1.5" fontWeight="600">
                  {o.label}
                </text>
                <text y="9" fontSize="6.5" fontFamily="'JetBrains Mono', monospace"
                      fill="rgba(244,238,226,0.45)" letterSpacing="1">
                  {o.coords}
                </text>
              </g>
              {/* HQ tag — placed below-left of marker to avoid colliding with MPM */}
              {isHQ && (
                <g transform={`translate(${o.x - 26}, ${o.y + 14})`}>
                  <rect x="-2" y="-7" width="22" height="10" fill="#C9A66B" rx="1" />
                  <text fontSize="6.5" fontFamily="'JetBrains Mono', monospace"
                        fill="#0A1620" letterSpacing="1.5" fontWeight="700"
                        textAnchor="start">
                    HQ
                  </text>
                </g>
              )}
            </g>
          );
        })}
      </svg>

      {/* Map header strip */}
      <div className="map-meta map-meta-top">
        <span>Global Footprint · Equirectangular</span>
        <span>Lat / Long · WGS84</span>
      </div>
      <div className="map-meta map-meta-bottom">
        <span><span className="dot-live"></span>Live · Capital Deployed</span>
        <span style={{ color: 'var(--gold)' }}>6 / 6 Markets Active</span>
      </div>
    </div>
  );
}

// ===== APPROACH ============================================
function Approach() {
  return (
    <section className="approach" data-screen-label="07 Approach">
      <div className="container">
        <div className="section-label">
          <span className="num">VI.</span>
          <span>The Approach</span>
          <span className="rule"></span>
        </div>
        <div className="approach-head" style={{ marginTop: 48 }}>
          <div className="eyebrow">How We Invest</div>
          <h2>A disciplined<br /><em>four-stage</em> process.</h2>
        </div>
        <div className="process">
          {window.IMO_DATA.PROCESS.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{s.n}</div>
              <div className="label">{s.label}</div>
              <div className="title">{s.title}</div>
              <div className="desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== LEADERSHIP ============================================
function Leadership() {
  return (
    <section className="section section-light" id="leadership" data-screen-label="08 Leadership">
      <div className="container">
        <div className="section-label">
          <span className="num">VII.</span>
          <span>Leadership</span>
          <span className="rule"></span>
        </div>
        <div className="leaders-head" style={{ marginTop: 48 }}>
          <div className="eyebrow">Founding Partners</div>
          <h2>Knowledge through<br /><em>experience.</em></h2>
        </div>
        <div className="leaders-grid">
          {window.IMO_DATA.LEADERS.map((l, i) => (
            <div className="leader" key={i}>
              <div className="leader-photo"
                   style={{ backgroundImage: `url(${l.img})` }}></div>
              <div>
                <div className="leader-role">{l.role}</div>
                <div className="leader-name">{l.name}</div>
                <div className="leader-title">{l.title}</div>
                <div className="leader-bio">{l.bio}</div>
                <div className="leader-credentials">
                  {l.creds.map((c, j) => <span key={j}>{c}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== CTA ============================================
function CTA() {
  return (
    <section className="cta" id="contact" data-screen-label="09 Contact">
      <div className="cta-decor"></div>
      <div className="container cta-inner">
        <div className="eyebrow no-rule" style={{ justifyContent: 'center' }}>
          <span style={{ width: 28, height: 1, background: 'currentColor', display: 'inline-block' }}></span>
          Capital Partnerships
          <span style={{ width: 28, height: 1, background: 'currentColor', display: 'inline-block' }}></span>
        </div>
        <h2>To contribute to the<br /><em>success</em> of our clients' business.</h2>
        <p className="cta-sub">
          We partner with institutional investors, family offices, and development
          sponsors deploying capital into Africa, the Middle East, and Europe.
          Reach out to begin a conversation.
        </p>
        <div className="cta-actions">
          <a href="mailto:capital@imobiliaria.co.za" className="btn btn-primary">
            Request a Memorandum <span className="arrow">→</span>
          </a>
          <a href="#" className="btn btn-ghost-dark">
            Schedule a Meeting
          </a>
        </div>
      </div>
    </section>
  );
}

// ===== FOOTER ============================================
function Footer() {
  return (
    <footer className="footer" data-screen-label="10 Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p className="tag">
              Imobiliaria Fund Advisors & Asset Managers (Pty) Ltd.
              A private real estate investment firm operating across Africa,
              the Middle East, and Europe.
            </p>
          </div>
          <div>
            <h4>Firm</h4>
            <a href="#thesis">Investment Thesis</a>
            <a href="#strategy">Strategy</a>
            <a href="#leadership">Leadership</a>
            <a href="#">Press</a>
          </div>
          <div>
            <h4>Portfolio</h4>
            <a href="#portfolio">Investments</a>
            <a href="#">Track Record</a>
            <a href="#">Case Studies</a>
            <a href="#">ESG</a>
          </div>
          <div>
            <h4>Contact</h4>
            <p>Illovo Edge, Cnr Fricker &amp; Harries Rds<br />Illovo, Sandton 2146<br />South Africa</p>
            <p style={{ marginTop: 12 }}>+27 (0)11 243 5001<br />capital@imobiliaria.co.za</p>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Imobiliaria Capital. All rights reserved.</span>
          <span>Johannesburg · Maputo · Luanda · Dubai · Lisbon · Port Louis</span>
        </div>
      </div>
    </footer>
  );
}

// ===== App ============================================
function App() {
  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Marquee />
      <Thesis />
      <Stats />
      <Strategy />
      <Portfolio />
      <Footprint />
      <Approach />
      <Leadership />
      <CTA />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);