const teamPhoto = (file) => `assets/team/${file}`;

const TeamCard = ({ member, index, featured }) => {
  const [hov, setHov] = React.useState(false);
  return React.createElement('div', {
    'data-reveal': '', 'data-delay': String(index + 1),
    onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false),
    style: {
      overflow: 'hidden', border: '1px solid rgba(44,44,42,0.14)',
      background: hov ? '#EAE6DE' : 'transparent', transition: 'background 250ms',
      minHeight: featured ? 620 : 500,
      display: 'flex', flexDirection: 'column',
    },
  },
    member.photo && React.createElement('div', {
      style: {
        height: featured ? 420 : 340,
        background: '#EAE6DE',
        borderBottom: '1px solid rgba(44,44,42,0.1)',
        overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      },
    },
      React.createElement('img', {
        src: teamPhoto(member.photo),
        alt: member.name,
        loading: 'lazy',
        style: {
          width: '100%', height: '100%', objectFit: 'contain',
          objectPosition: member.position || 'center center',
          filter: 'none',
          transform: hov ? 'scale(1.015)' : 'scale(1)',
          transition: 'transform 420ms ease, filter 420ms ease',
        },
      })
    ),
    React.createElement('div', { style: { padding: featured ? '30px 28px 32px' : '24px 22px 26px', flex: 1 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'wrap' } },
        React.createElement('span', {
          style: { fontFamily: "'DM Mono',monospace", fontSize: 7, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#B8922A', border: '1px solid #B8922A', padding: '2px 7px', lineHeight: 1.5 },
        }, member.role)
      ),
      React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: featured ? 28 : 24, fontWeight: 300, color: '#2C2C2A', marginBottom: 14, lineHeight: 1.2 } }, member.name),
      member.credentials && React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#2C2C2A', marginBottom: 12 } }, member.credentials),
      React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: featured ? 10.5 : 9.5, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9 } }, member.bio)
    )
  );
};

const PartnerCard = ({ partner, index }) => {
  const [hov, setHov] = React.useState(false);
  return React.createElement('div', {
    'data-reveal': '', 'data-delay': String(index + 1),
    onMouseEnter: () => setHov(true), onMouseLeave: () => setHov(false),
    style: {
      padding: '34px 24px 30px', border: '1px solid rgba(44,44,42,0.14)',
      textAlign: 'center', background: hov ? '#F4F1EC' : 'transparent', transition: 'background 250ms',
      minHeight: 160, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 14,
    },
  },
    React.createElement('div', { style: { minHeight: 58, display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' } },
      React.createElement(DeveloperLogo, { name: partner.name, height: 48, maxWidth: 230 })
    ),
    React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8.5, color: '#8A8A85', letterSpacing: '0.1em', lineHeight: 1.6 } }, partner.sub)
  );
};

const AboutPage = ({ navigate }) => {
  useReveal();

  const TEAM = [
    { role: 'CEO & Founder', name: 'Luz Adriana Lopera', photo: 'luza.jpg', position: 'center 14%', bio: "Founder of Dproperty and primary voice of the firm. Over a decade of direct market experience in Panama. Leads the commercial vision, broker team, strategic communications, and Dproperty Academy." },
    { role: 'Chief Data Officer · CDO', name: 'Esteban Olivero', photo: 'esteban.jfif', position: 'center center', credentials: 'MSc in AI', bio: "Leads Dproperty's European expansion, data strategy, digital transformation, and intelligence infrastructure. Based in Dortmund, Germany, he bridges the firm's Latin American expertise with the expectations of the European investor market." },
    { role: 'Chief Business Development Officer · CBDO', name: 'Fernando Perdomo', photo: 'fernando.jpg', position: 'center top', bio: "Leads business development and commercial partnerships. Responsible for institutional relationships with developers and the expansion of the firm's off-market pipeline." },
  ];

  const ADVISORY_TEAM = [
    { role: 'Investment Advisor', name: 'Ernesto', photo: 'ernesto.jpg', position: 'center top', bio: 'Guides investors through project selection, qualification, and the first strategic conversation around portfolio fit.' },
    { role: 'Investment Advisor', name: 'Jean', photo: 'jean.jpg', position: 'center top', bio: 'Supports international investors with project research, commercial follow-up, and structured access to the portfolio.' },
    { role: 'Investment Advisor', name: 'Martin', photo: 'martin.jpg', position: 'center top', bio: 'Brings a youthful view to the company, supporting investors with fresh perspective, project discovery, and the practical steps from interest to action.' },
    { role: 'Investment Advisor · Colombia Sales Lead', name: 'Juan Diego', photo: 'julian-14.jpg', position: 'center top', bio: 'Works with investors on project comparison, entry timing, and the practical steps from interest to reservation. Based in Colombia, he leads the sales team there.' },
    { role: 'Investment Advisor', name: 'Julián', photo: 'julian-16.jpg', position: 'center top', bio: 'Supports investor advisory conversations and commercial follow-up with a focus on clarity, timing, and fit.' },
    { role: 'Property Manager', name: 'Sandra', photo: 'juan-diego.jpg', position: 'center top', bio: 'Coordinates owner support and property-management execution so each investment can operate beyond the moment of purchase.' },
    { role: 'Property Management', name: 'Gustavo', photo: 'gustavo.jpg', position: 'center center', bio: 'Supports property-management coordination, owner service, and the operational layer that protects each investment after closing.' },
  ];

  const PARTNERS = [
    { name: 'TheVelopers',       sub: 'Bioma · Nayamara · Dovle · +6' },
    { name: 'Pacific Developers', sub: 'Mova · Obarrio' },
    { name: 'Playa Escondida',   sub: 'Playa Escondida · Colón' },
    { name: 'GK Developers',     sub: 'Boreal · Obarrio' },
    { name: 'Sartoriale',        sub: 'Gesti 65 · Gesti 66 · Gesti 68' },
    { name: 'Grupo Paseo Sendero', sub: 'Dominican Republic' },
    { name: 'Urbania',           sub: 'Sky Parc · Costa del Este' },
    { name: 'F&F',               sub: 'Next · X · Regalia' },
    { name: 'Durex',             sub: 'Wanders & YOO · La Maison' },
    { name: '+ Expanding',       sub: 'Always qualifying' },
  ];

  const PILLARS = [
    { word: 'Curators',     desc: 'The market shows everything. We show only what fits.' },
    { word: 'Intelligence', desc: 'A decade of data the public market cannot see.' },
    { word: 'Experience',   desc: 'Ten years and $700M+ in transactions behind every call.' },
    { word: 'Access',       desc: 'Before the announcement. Before the market.' },
  ];

  const VALUES = [
    { label: 'Developer first',             desc: "We don't list properties. We qualify developers — financial health, track record, bank backing — and then source opportunities within those relationships before they reach any market." },
    { label: 'Intelligence infrastructure', desc: 'Our data layer — transaction prices, permit timelines, developer pipelines — is not publicly available. It is built over a decade of presence in the Registro Publico and municipal permit systems.' },
    { label: 'European bridge',             desc: 'We are expanding our European investor network with the same rigor we apply to our projects. Quality of match over volume of contacts.' },
  ];

  const PARTNERSHIP = [
    { label: 'Introducer',  desc: 'Refer investors to our pipeline. We handle qualification, presentation, and transaction.' },
    { label: 'Co-advisory', desc: 'Join calls with your clients as the Latin American intelligence specialist.' },
    { label: 'White-label', desc: 'Access our portfolio and research for your own branded materials.' },
  ];

  return React.createElement('div', { style: { paddingTop: 66 } },

    // ── 2.1 Introduction ──────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '100px 0 80px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { 'data-reveal': '', style: { maxWidth: 700 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 20 } }, 'About Dproperty'),
          React.createElement('h1', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(32px,5vw,72px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.1, marginBottom: 24 } },
            'The team behind', React.createElement('br'), React.createElement('em', null, 'the intelligence.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 11, fontWeight: 300, color: 'rgba(44,44,42,0.6)', lineHeight: 1.9 } },
            'A multidisciplinary firm operating at the intersection of real estate, data intelligence, and European investor relations. Built to give sophisticated investors access — not listings.'
          )
        )
      )
    ),

    // ── 2.2 Team ──────────────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 90px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 60 } }),
        React.createElement('div', { 'data-reveal': '', style: { marginBottom: 42, maxWidth: 720 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 16 } }, 'Leadership'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15 } },
            'The people who shape ', React.createElement('em', null, 'the standard.')
          )
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 2, marginBottom: 72 } },
          TEAM.map((m, i) => React.createElement(TeamCard, { key: i, member: m, index: i, featured: true }))
        ),
        React.createElement('div', { 'data-reveal': '', style: { marginBottom: 42, maxWidth: 780 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 16 } }, 'Our team'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15, marginBottom: 14 } },
            'Those who make it happen:', React.createElement('br'), React.createElement('em', null, 'meet our team of investment advisors and property managers')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10.5, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9 } },
            'The advisory and management layer that turns intelligence into execution — from the first project conversation to the long-term care of the asset.'
          )
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 2 } },
          ADVISORY_TEAM.map((m, i) => React.createElement(TeamCard, { key: i, member: m, index: i }))
        )
      )
    ),

    // ── 2.3 Purpose, Mission & Values ─────────────────────────
    React.createElement('section', { style: { background: '#EAE6DE', padding: '90px 0' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 80, alignItems: 'start', marginBottom: 64 } },
          React.createElement('div', { 'data-reveal': '' },
            React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 20 } }, 'Purpose · Mission · Values'),
            React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3vw,44px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.15 } },
              'A good match —', React.createElement('br'), React.createElement('em', null, 'and a way in for more people.')
            )
          ),
          React.createElement('div', { 'data-reveal': '', 'data-delay': '2', style: { paddingTop: 8 } },
            React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 11, fontWeight: 300, color: 'rgba(44,44,42,0.7)', lineHeight: 1.95, marginBottom: 22 } },
              'Our purpose is to make a good match between investor and opportunity — and to prove that real estate investment is not reserved for the few. Most people can invest. Our work is to make that accessible, available, and understood.'
            ),
            React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 11, fontWeight: 300, color: 'rgba(44,44,42,0.7)', lineHeight: 1.95, marginBottom: 22 } },
              'We want people to learn the right ways to look after their money and protect their patrimony through real estate. Not speculation — stewardship.'
            ),
            React.createElement('p', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(18px,2vw,26px)', fontStyle: 'italic', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.45 } },
              'We do not see any stakeholder as a client. We see everyone as a partner. We are an ecosystem — and it is our job to ensure that all the parts work well together.'
            )
          )
        ),
        // "We are" pillars
        React.createElement('div', { 'data-reveal': '', 'data-delay': '1', style: { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 2 } },
          PILLARS.map((p, i) =>
            React.createElement('div', { key: i, style: { padding: '32px 24px', border: '1px solid rgba(44,44,42,0.14)', background: '#F4F1EC' } },
              React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#B8B5AE', marginBottom: 12 } }, 'We are'),
              React.createElement('div', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 28, fontWeight: 300, color: '#2C2C2A', marginBottom: 12 } }, p.word),
              React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9.5, fontWeight: 300, color: '#8A8A85', lineHeight: 1.85 } }, p.desc)
            )
          )
        )
      )
    ),

    // ── 2.4 Ecosystem Map ─────────────────────────────────────
    React.createElement('section', { style: { background: '#2C2C2A', padding: '90px 0' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { 'data-reveal': '', style: { marginBottom: 44, maxWidth: 600 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(244,241,236,0.35)', marginBottom: 16 } }, 'The Ecosystem'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(24px,3.5vw,48px)', fontWeight: 300, color: '#F4F1EC', lineHeight: 1.15, marginBottom: 12 } },
            'One network, ', React.createElement('em', null, 'three views.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, color: 'rgba(244,241,236,0.42)', lineHeight: 1.9 } },
            'Where our investors come from, where we operate, and where we hold product — the same map, read three ways.'
          )
        ),
        React.createElement('div', { 'data-reveal': '', 'data-delay': '1' },
          React.createElement(EcosystemMap)
        )
      )
    ),

    // ── 2.5 How We Grow ───────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '0 0 80px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 60 } }),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' } },
          React.createElement('div', { 'data-reveal': '' },
            React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 20 } }, 'Model'),
            React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,2.5vw,36px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.25 } },
              'A model built to scale', React.createElement('br'), React.createElement('em', null, 'without losing precision.')
            ),
            React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, marginTop: 20 } },
              'Growth without compromising the quality of our intelligence is not a constraint — it is the design of the firm.'
            )
          ),
          React.createElement('div', { 'data-reveal': '', 'data-delay': '2' },
            VALUES.map((v, i) =>
              React.createElement('div', { key: i, style: { display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, padding: '20px 0', borderTop: '1px solid rgba(44,44,42,0.1)' } },
                React.createElement('span', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#2C2C2A', paddingTop: 2 } }, v.label),
                React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.85 } }, v.desc)
              )
            )
          )
        )
      )
    ),

    // ── 2.4 Developer Partners ────────────────────────────────
    React.createElement('section', { style: { background: '#EAE6DE', padding: '80px 0' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { 'data-reveal': '', style: { marginBottom: 48 } },
          React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 16 } }, 'Developer Partners'),
          React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,2.5vw,36px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.25, marginBottom: 12 } },
            'The builders behind', React.createElement('br'), React.createElement('em', null, 'our portfolio.')
          ),
          React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, maxWidth: 480 } },
            'We work with a curated group of developers. Each one has passed our qualification framework.'
          )
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 2 } },
          PARTNERS.map((p, i) => React.createElement(PartnerCard, { key: i, partner: p, index: i }))
        ),
        React.createElement('div', { 'data-reveal': '', style: { marginTop: 34, textAlign: 'center' } },
          React.createElement('button', { className: 'btn-primary', onClick: () => navigate('portfolio') },
            React.createElement('span', null, 'Show me what they are building →')
          )
        )
      )
    ),

    // ── 2.5 Work With Us ──────────────────────────────────────
    React.createElement('section', { style: { background: '#F4F1EC', padding: '80px 0 100px' } },
      React.createElement('div', { style: { maxWidth: 1200, margin: '0 auto', padding: '0 52px' } },
        React.createElement('div', { style: { height: 1, background: 'rgba(44,44,42,0.12)', marginBottom: 60 } }),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' } },
          React.createElement('div', { 'data-reveal': '' },
            React.createElement('h2', { style: { fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(22px,2.5vw,36px)', fontWeight: 300, color: '#2C2C2A', lineHeight: 1.25, marginBottom: 20 } },
              'We partner with brokers and advisors.'
            ),
            React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.9, marginBottom: 32 } },
              'If you advise investors and want to add a carefully qualified Latin American real estate offering to your practice, we want to hear from you.'
            ),
            React.createElement('button', { className: 'btn-primary', onClick: () => navigate('contact') },
              React.createElement('span', null, 'Get in touch →')
            )
          ),
          React.createElement('div', {
            'data-reveal': '', 'data-delay': '2',
            style: { background: '#EAE6DE', border: '1px solid rgba(44,44,42,0.14)', padding: '36px 28px' },
          },
            React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8A8A85', marginBottom: 24 } }, 'Partnership Models'),
            PARTNERSHIP.map((p, i) =>
              React.createElement('div', { key: i, style: { padding: '18px 0', borderTop: '1px solid rgba(44,44,42,0.1)' } },
                React.createElement('div', { style: { fontFamily: "'DM Mono',monospace", fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#2C2C2A', marginBottom: 8 } }, p.label),
                React.createElement('p', { style: { fontFamily: "'DM Mono',monospace", fontSize: 10, fontWeight: 300, color: '#8A8A85', lineHeight: 1.85 } }, p.desc)
              )
            )
          )
        )
      )
    )
  );
};

Object.assign(window, { AboutPage, TeamCard, PartnerCard });