// === 120 District — Main app composition ===
const { useState } = React;

function Nav({ onOpen }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand" style={{ textDecoration: 'none' }}>
          <span className="brand-mark">One <em>Twenty Residences
</em></span>
          <span className="brand-sub">C5 ELITE</span>
        </a>
        <div className="nav-links">
          <a href="#proyecto">El proyecto</a>
          <a href="#amenidades">Amenidades</a>
          <a href="#proceso">Proceso</a>
          <a href="#equipo">Equipo</a>
          <a href="#faq">FAQ</a>
          <button className="btn btn-primary btn-sm" onClick={onOpen}>Agendar llamada</button>
        </div>
      </div>
    </nav>);
}

function Hero({ onOpen }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <span className="hero-eye"><span className="dot"></span> Brickell · Downtown Miami · Entrega 2028</span>
        <h1>
          Residencias en Brickell con <em>oficina escriturable</em> incluida.
        </h1>
        <p className="hero-lede">
          <strong>One Twenty</strong> es la primera torre residencial en Brickell donde cada unidad incluye una oficina privada con escritura propia.
          240 residencias · 34 pisos · de studio a 3 dormitorios. Diseñada por Sieger Suarez Architects y desarrollada por Property Markets Group.
        </p>
        <div className="hero-actions">
          <button className="btn btn-primary" onClick={onOpen}>
            Evaluar mi caso de inversión <span className="arrow">→</span>
          </button>
          <a className="btn btn-ghost" href="#proyecto">Ver el proyecto</a>
        </div>
        <p className="hero-fine">
          Diagnóstico de 15 min. Sin venta. Solo para inversores con capital desde $200K (cash o apalancado) y timeline definido. Te llamamos antes de agendar.
        </p>

        <div className="hero-stack hero-stack-single">
          <image-slot id="hero-a" class="a" shape="rounded" radius="22" placeholder="Render fachada One Twenty"></image-slot>
        </div>
      </div>
    </section>);

}

function MediaStrip() {
  return (
    <section className="media" style={{ backgroundColor: "rgb(255, 255, 255)" }}>
      <div className="wrap">
        <div className="media-head">
          <span className="eyebrow">Validación editorial</span>
          <h2 style={{ marginTop: 14 }}>Cuando lo decimos nosotros es marketing.<br />Cuando lo dicen ellos, es <em>editorial</em>.</h2>
        </div>
        <div className="media-row">
          <image-slot id="media-logos" class="media-logos" shape="rect" fit="contain" src="assets/media-logos.png" placeholder="Logos de medios"></image-slot>
        </div>
      </div>
    </section>);

}

function ProjectIntro() {
  return (
    <section className="section project-intro" id="proyecto">
      <div className="wrap">
        <div className="project-grid">
          <div>
            <span className="eyebrow">El proyecto</span>
            <h2 style={{ marginTop: 14 }}>Inspirado en el barrio más dinámico de Miami: <em>Brickell</em>.</h2>
            <p style={{ marginTop: 18, fontSize: 18 }}>
              240 residencias con configuraciones de studio a 3 dormitorios. Cada unidad incluye espacio de oficina con escritura propia — una propuesta única en el mercado. Acabados premium, electrodomésticos italianos integrados, smart home y vistas panorámicas a Brickell, Downtown y el Atlántico.
            </p>
            <ul className="spec-list">
              <li><span className="k">Residencias</span><span className="v">240</span></li>
              <li><span className="k">Pisos</span><span className="v">34</span></li>
              <li><span className="k">Configuraciones</span><span className="v">Studio – 3 dorm.</span></li>
              <li><span className="k">Oficina incluida</span><span className="v">Sí · escriturable</span></li>
              <li><span className="k">Amenidades</span><span className="v">60,000 sq ft</span></li>
              <li><span className="k">Entrega</span><span className="v">2028</span></li>
            </ul>
          </div>
          <image-slot id="project-main" shape="rounded" radius="22" placeholder="Render exterior · piscina · vista skyline"></image-slot>
        </div>
      </div>
    </section>);

}

function ValueProps({ onOpen }) {
  const items = [
  {
    n: '01',
    h: 'Oficina escriturable incluida en cada residencia',
    p: 'Vives y trabajas en el mismo edificio sin renunciar a privacidad. Cada residencia incluye una oficina privada con escritura propia, Wi-Fi, mobiliario y servicios de concierge dedicados. Único en su categoría.'
  },
  {
    n: '02',
    h: 'Brickell — el barrio con más capital concentrado de Miami',
    p: 'Conocido como el "Manhattan del Sur": distrito financiero, gastronomía, cultura, retail premium y vistas al agua. Walking distance a Brickell City Centre, 10 min a Downtown, 15 min al aeropuerto y a las playas.'
  },
  {
    n: '03',
    h: 'Entras como inversionista extranjero sin SSN ni historial americano',
    p: 'Reservas con 10% y accedes a Foreign National Loan sin SSN ni historial de crédito americano. Estructura simple y pensada para el inversor internacional, con abogado especializado en cada caso.'
  },
  {
    n: '04',
    h: 'Desarrollador con 30 años de track record en Miami',
    p: 'Property Markets Group ha desarrollado más de 85 edificios residenciales y 150 proyectos inmobiliarios. Detrás de Waldorf Astoria, Echo Brickell, The Elser y Muse Sunny Isles. Diseño a cargo de Sieger Suarez Architects.'
  }];

  return (
    <section className="section values">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Por qué 120 District</span>
          <h2 style={{ marginTop: 14 }}>Una propiedad que <em>trabaja por ti</em> desde el primer día.</h2>
          <p>Cuatro razones por las que 120 District es una oportunidad estructuralmente distinta a cualquier otro condominio de Brickell.</p>
        </div>
        <div className="values-grid">
          {items.map((i) =>
          <div className="value-card" key={i.n}>
              <span className="num">{i.n}</span>
              <h3>{i.h}</h3>
              <p>{i.p}</p>
            </div>
          )}
        </div>
        <div style={{ marginTop: 48, textAlign: 'center' }}>
          <button className="btn btn-primary" onClick={onOpen}>
            Evaluar mi caso de inversión <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>);

}

function Amenities() {
  const list = [
  'Sky bar y lounge con vista al skyline de Brickell',
  'Sky owner\'s lounge de doble altura con cocina catering',
  'Espacio para eventos y meetings privados',
  'Pool deck con cabañas',
  'Yoga lawn al aire libre',
  'Spa wellness completo',
  'Gimnasio de última generación',
  'Cancha de pickleball',
  'Café y juice bar',
  'Lobby con concierge 24/7',
  'Sala infantil',
  'Elevadores de oficina dedicados'];

  const slides = [
  { id: 'amen-1', label: 'One Twenty Views' },
  { id: 'amen-2', label: 'One Twenty Views' },
  { id: 'amen-3', label: 'One Twenty Views' },
  { id: 'amen-4', label: 'One Twenty Views' },
  { id: 'amen-5', label: 'One Twenty Views' },
  { id: 'amen-6', label: 'One Twenty Views' },
  { id: 'amen-7', label: 'One Twenty Views' }];


  const trackRef = React.useRef(null);
  const [idx, setIdx] = React.useState(0);

  const scrollToIdx = (i) => {
    const t = trackRef.current;
    if (!t) return;
    const clamped = Math.max(0, Math.min(slides.length - 1, i));
    const card = t.children[clamped];
    if (card) {
      t.scrollTo({ left: card.offsetLeft - t.offsetLeft, behavior: 'smooth' });
      setIdx(clamped);
    }
  };

  const onScroll = () => {
    const t = trackRef.current;
    if (!t) return;
    // Find which card is most aligned with the start of the visible area
    const left = t.scrollLeft;
    let best = 0;let bestDist = Infinity;
    for (let i = 0; i < t.children.length; i++) {
      const dist = Math.abs(t.children[i].offsetLeft - t.offsetLeft - left);
      if (dist < bestDist) {bestDist = dist;best = i;}
    }
    if (best !== idx) setIdx(best);
  };

  return (
    <section className="section" id="amenidades" style={{ background: 'var(--bg)' }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">60,000 sq ft de amenidades</span>
          <h2 style={{ marginTop: 14 }}>Áreas comunes <em>espectaculares</em>.</h2>
          <p>Un programa de amenidades pensado para vivir, trabajar y socializar sin salir del edificio. Vista al skyline, al Miami River y al Atlántico.</p>
        </div>

        <div className="carousel">
          <div className="carousel-track" ref={trackRef} onScroll={onScroll}>
            {slides.map((s, i) =>
            <figure className="carousel-slide" key={s.id}>
                <image-slot id={s.id} shape="rounded" radius="18" placeholder={s.label}></image-slot>
                <figcaption>{s.label}</figcaption>
              </figure>
            )}
          </div>

          <div className="carousel-controls">
            <button
              className="carousel-btn"
              onClick={() => scrollToIdx(idx - 1)}
              disabled={idx === 0}
              aria-label="Anterior">
              ←</button>

            <div className="carousel-dots">
              {slides.map((_, i) =>
              <button
                key={i}
                className={'carousel-dot' + (i === idx ? ' active' : '')}
                onClick={() => scrollToIdx(i)}
                aria-label={`Ir a slide ${i + 1}`} />

              )}
            </div>

            <button
              className="carousel-btn"
              onClick={() => scrollToIdx(idx + 1)}
              disabled={idx === slides.length - 1}
              aria-label="Siguiente">
              →</button>
          </div>
        </div>

        <ul className="amen-list">
          {list.map((a) => <li key={a}>{a}</li>)}
        </ul>
      </div>
    </section>);

}

function Location() {
  return (
    <section className="section" style={{ background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div className="split-2">
          <div>
            <span className="eyebrow">South of Brickell</span>
            <h2 style={{ marginTop: 14 }}>La ubicación: <em>120 SW 9th St, Miami, FL 33130</em></h2>
            <p style={{ marginTop: 20, fontSize: 18 }}>
              Brickell es el enclave urbano premier de Miami: rascacielos, distrito financiero y oferta residencial de lujo. Energía cosmopolita, restaurantes de clase mundial, vida nocturna, shopping premium y atracciones culturales — todo frente al agua.
            </p>
            <ul className="spec-list" style={{ marginTop: 20 }}>
              <li><span className="k">Brickell City Centre</span><span className="v">1 min a pie</span></li>
              <li><span className="k">Downtown Miami</span><span className="v">10 min a pie</span></li>
              <li><span className="k">Wynwood</span><span className="v">15 min en auto</span></li>
              <li><span className="k">Miami Beach</span><span className="v">15 min en auto</span></li>
              <li><span className="k">Aeropuerto Internacional</span><span className="v">15 min en auto</span></li>
              <li><span className="k">Key Biscayne</span><span className="v">10 min en auto</span></li>
            </ul>
          </div>
          <image-slot id="location-map" shape="rounded" radius="22" placeholder="Mapa o vista aérea de Brickell" style={{ aspectRatio: '4/5' }}></image-slot>
        </div>
      </div>
    </section>);

}

function Stats() {
  const stats = [
  { n: '+$500M', l: 'En preconstrucción Miami comercializada' },
  { n: '+750', l: 'Unidades cerradas' },
  { n: '12+', l: 'Proyectos en portfolio' },
  { n: '+11,500', l: 'Compradores internacionales asesorados' }];

  return (
    <section className="section">
      <div className="wrap">
        <div className="stats">
          <div>
            <span className="eyebrow" style={{ color: 'var(--cherry-soft)' }}>Quiénes somos</span>
            <h2 style={{ marginTop: 14 }}>La firma hispana <em>#1</em> en preconstrucción de Miami.</h2>
            <p style={{ marginTop: 16, fontSize: 17 }}>
              25+ años comercializando proyectos premium en Miami. En varios de los desarrollos más importantes hemos sido reconocidos como #1 en ventas. No somos un broker más: somos especialistas en preconstrucción para el inversor internacional.
            </p>
          </div>
          <div className="stats-grid">
            {stats.map((s) =>
            <div className="stat" key={s.n}>
                <div className="n">{s.n}</div>
                <div className="l">{s.l}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function TrackRecord() {
  const devs = [
  { id: 'dev-one-twenty', name: 'One Twenty · Brickell Residences' },
  { id: 'dev-domus', name: 'Domus · Brickell Center' },
  { id: 'dev-frida-kahlo', name: 'Frida Kahlo · Wynwood Residences' },
  { id: 'dev-the-elser', name: 'The Elser Hotel · Miami' },
  { id: 'dev-cassia', name: 'Cassia · The Residences at Coral Gables' },
  { id: 'dev-river-district', name: '14 River District Miami' },
  { id: 'dev-lennar', name: 'Lennar' },
  { id: 'dev-viceroy', name: 'Viceroy Brickell · The Residences' },
  { id: 'dev-millenia-park', name: 'Millenia Park' },
  { id: 'dev-jean-georges', name: 'Jean-Georges Miami Tropic Residences' },
  { id: 'dev-the-standard', name: 'The Standard Residences · Brickell Miami' },
  { id: 'dev-the-rider', name: 'The Rider · Residences Miami' },
  { id: 'dev-delano', name: 'Delano · Residences & Hotel Miami' },
  { id: 'dev-flow', name: 'Flow' },
  { id: 'dev-one-park-tower', name: 'One Park Tower · by Turnberry' }];

  return (
    <section className="section track-record" style={{ background: 'var(--bg-2)', backgroundColor: "rgb(250, 248, 243)", textAlign: "center" }}>
      <div className="wrap">
        <div className="section-head" style={{ maxWidth: 820, textAlign: "left" }}>
          <span className="eyebrow">Track record</span>
          <h2 style={{ marginTop: 14, textAlign: "center" }}>
            No somos brokers de One Twenty. Somos el <em>aliado directo del desarrollador</em>.
          </h2>
          <p>
            Llevamos +25 años cerrando preconstrucción en Miami para inversionistas internacionales. Lo siguiente no es un pitch — es el resultado documentado de operar como C5 Global desde 2008: <strong>$5.9B en ventas</strong>, <strong>9,600 unidades cerradas</strong>, <strong>+11,500 inversionistas asesorados</strong>.
          </p>
        </div>
        <div className="dev-grid">
          {devs.map((d) =>
          <image-slot
            key={d.id}
            id={d.id}
            class="dev-tile"
            shape="rounded"
            radius="14"
            fit="contain"
            src={`assets/${d.id}.png`}
            placeholder={d.name} style={{ width: "299.593px" }}></image-slot>
          )}
        </div>
      </div>
    </section>);

}

function Events() {
  const industria = [
  { id: 'ev-perez', name: 'Jon Paul & Nick Pérez', role: 'Related Group · liderazgo del desarrollador #1 de condos en Miami', img: 'assets/ev-perez.png' },
  { id: 'ev-cervera', name: 'Alicia Cervera', role: 'Cervera Real Estate · 50+ años representando proyectos icónicos de Miami', img: 'assets/ev-cervera.png' },
  { id: 'ev-defortuna', name: 'Edgardo Defortuna', role: 'Fortune International · +50 torres desarrolladas en Miami', img: 'assets/ev-defortuna.png' },
  { id: 'ev-martin', name: 'David Martin', role: 'Terra Group · desarrollador detrás de Jean-Georges Residences', img: 'assets/ev-martin.jpg' },
  { id: 'ev-studnicky', name: 'Craig Studnicky', role: 'ISG World · CEO · autor del Miami Report', img: 'assets/ev-studnicky.png' },
  { id: 'ev-ojeda', name: 'Diego Ojeda', role: 'Rilea Group · Presidente · desarrollador de The Rider', img: 'assets/ev-ojeda.jpg' }];

  const cultura = [
  { id: 'ev-donfran', name: 'Don Francisco', role: 'Leyenda de la TV en español', img: 'assets/ev-donfran.png' },
  { id: 'ev-estefan', name: 'Emilio Estefan Jr.', role: 'Productor multi-Grammy · ícono cultural global', img: 'assets/ev-estefan.png' },
  { id: 'ev-meyer', name: 'Ignacio Meyer', role: 'Presidente de Univisión', img: 'assets/ev-meyer.png' },
  { id: 'ev-pasos', name: 'Margarita Pasos', role: 'Coach motivacional · alta recordación en Colombia', img: 'assets/ev-pasos.png' },
  { id: 'ev-cala', name: 'Ismael Cala', role: 'Periodista · ex-CNN · autor bestseller', img: 'assets/ev-cala.png' },
  { id: 'ev-maickel', name: 'Maickel Melamed', role: 'Conferencista venezolano · maratones NY, Berlín, Chicago y Boston', img: 'assets/ev-maickel.jpg' }];

  const Speaker = ({ s }) =>
  <div className="speaker" style={{ height: "244.194px" }}>
      <image-slot id={s.id} class="speaker-photo" shape="rounded" radius="16" fit="cover" src={s.img} placeholder={s.name} style={{ width: "292.604px" }}></image-slot>
      <div className="speaker-body">
        <h4 className="speaker-name">{s.name}</h4>
        <p className="speaker-role">{s.role}</p>
      </div>
    </div>;


  return (
    <section className="section events">
      <div className="wrap">
        <div className="section-head" style={{ maxWidth: 820 }}>
          <span className="eyebrow">Eventos · Retiro Inmobiliario</span>
          <h2 style={{ marginTop: 14 }}>
            El escenario inmobiliario más grande de <em>habla hispana</em> en U.S.A.
          </h2>
          <p>
            Nuestros eventos son el punto de encuentro. Cuando convocamos, la industria responde. <strong>+1,200 asistentes por edición.</strong> Los desarrolladores que construyen Miami — y las figuras culturales que mueven LatAm — pisan los escenarios de los eventos inmobiliarios que organizamos en cada ciudad.
          </p>
        </div>

        <image-slot
          id="ev-banner"
          class="events-banner"
          shape="rounded"
          radius="22"
          fit="cover"
          src="assets/ev-banner.jpg"
          placeholder="Coaches y comunidad Retiro Inmobiliario 2026"></image-slot>

        <div className="speakers-group">
          <h3 className="speakers-group-title">Industria de Miami real estate</h3>
          <div className="speakers-grid">
            {industria.map((s) => <Speaker s={s} key={s.id} />)}
          </div>
        </div>

        <div className="speakers-group">
          <h3 className="speakers-group-title">Cultura y autoridades LatAm</h3>
          <div className="speakers-grid">
            {cultura.map((s) => <Speaker s={s} key={s.id} />)}
          </div>
        </div>

        <p className="speakers-foot">
          +20 speakers internacionales adicionales han subido al escenario de Retiro Inmobiliario en sus ediciones recientes.
        </p>
      </div>
    </section>);

}

function Quote() {
  return (
    <section className="quote">
      <div className="wrap">
        <p>"No vamos a sus eventos. <em>Ellos vienen al nuestro.</em>"</p>
        <div className="by">— Retiro Inmobiliario · El evento de bienes raíces en español más importante del mundo</div>
      </div>
    </section>);

}

function Process() {
  const steps = [
  { h: 'Llamada diagnóstica · 7–10 min', p: 'Entendemos tu capital, objetivo y horizonte. Evaluamos si Miami es el destino correcto, si bienes raíces es el vehículo, y si C5 es el equipo correcto. Si no hay match, te lo decimos de frente.' },
  { h: 'Videollamada con tu specialist · 20–25 min', p: 'No entras a un pool de cientos de agentes. Te asignamos a una de nuestras 3 specialists según tu perfil. Profundización de objetivos, educación del mercado, financiamiento y opciones legales.' },
  { h: 'Te presentamos la opción ideal', p: 'Te mostramos la propiedad que se alinea con tu perfil — máximo 2 opciones. No te abrumamos con un menú de 30 unidades. Eso es trabajo de un agente, no de un asesor. Tour virtual si no viajas.' },
  { h: 'Estructura legal a tu medida · 2–3 semanas', p: 'Trabajas con un abogado especializado en inversionistas internacionales para diseñar la estructura óptima de tu caso. Cada inversionista es un caso distinto.' },
  { h: 'Financiamiento o cash · si aplica', p: 'Foreign National Loan pre-aprobado o cierre en cash. Te conectamos con prestamistas especializados en perfiles internacionales.' },
  { h: 'Cierre + handover', p: 'Firmas como prefieras: en Miami con nuestro servicio White Glove, vía abogado, o por poder notarial desde tu país. Recibes las llaves de tu propiedad y tu oficina escriturable.' }];

  return (
    <section className="section" id="proceso" style={{ background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Cómo funciona</span>
          <h2 style={{ marginTop: 14 }}>Cómo compras en 120 District <em>desde tu país</em>.</h2>
          <p>Sin necesidad de visa ni residencia. Si prefieres venir a Miami para firmar, te recibimos personalmente con nuestro servicio White Glove.</p>
        </div>
        <div className="process-grid">
          {steps.map((s, i) =>
          <div className="step" key={i}>
              <div className="n">{String(i + 1).padStart(2, '0')}</div>
              <div>
                <h3>{s.h}</h3>
                <p>{s.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Team() {
  const members = [
  { n: 'Marcela Galvis', r: 'Autora · Educadora del sector · Asesoría a inversionistas internacionales y EB-5' },
  { n: 'Ana Vega', r: 'Autora de metodología propia · Educadora del sector · Asesoría internacional y EB-5' },
  { n: 'Giselle Fermín', r: 'Autora · Educadora del sector · Asesoría a inversionistas internacionales y EB-5' }];

  return (
    <section className="section" id="equipo">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Tu equipo</span>
          <h2 style={{ marginTop: 14 }}>Tres especialistas para el <em>inversionista internacional</em>.</h2>
          <p>No llegas a un pool de 500 agentes. Una de estas tres expertas te acompaña directamente — todas autoras, educadoras y especialistas con años de experiencia en asesoría internacional y procesos EB-5.</p>
        </div>
        <div className="team-grid">
          {members.map((m, i) =>
          <div className="member" key={m.n}>
              <image-slot id={`team-${i}`} shape="rounded" radius="0" placeholder={`Foto · ${m.n}`}></image-slot>
              <div className="member-body">
                <h3>{m.n}</h3>
                <div className="role">{m.r}</div>
              </div>
            </div>
          )}
        </div>
        <p style={{ marginTop: 28, fontSize: 15, color: 'var(--ink-3)', textAlign: 'center' }}>
          Cuando agendes tu llamada, una de ellas te atiende. Sin cadenas de intermediarios.
        </p>
      </div>
    </section>);

}

function FAQ() {
  const items = [
  { q: '¿Qué hace única a 120 District frente a otros condos de Brickell?', a: 'Es el primer edificio de Brickell donde cada residencia incluye una oficina privada con escritura propia. Sumado a 60,000 sq ft de amenidades, smart home y acabados premium, es una propuesta sin paralelo en el barrio.' },
  { q: '¿Necesito residencia americana o SSN para comprar?', a: 'No. Como inversionista extranjero accedes con solo el 10% de reserva y puedes financiar el resto con Foreign National Loan, que no requiere SSN ni historial de crédito americano. También aceptamos cash.' },
  { q: '¿Cómo es el plan de pagos?', a: 'Reserva con 10%, contrato con depósitos escalonados durante construcción, y el saldo al cierre. Te entregamos el cuadro completo en la videollamada con tu specialist.' },
  { q: '¿Cuándo es la entrega del edificio?', a: 'Entrega prevista para 2028. La construcción vertical ya está en marcha con grúas instaladas en sitio.' },
  { q: '¿Puedo comprar desde mi país sin viajar?', a: 'Sí. Firmas por poder notarial, abogado, o si prefieres venir a Miami te recibimos personalmente con nuestro servicio White Glove. El proceso completo se puede ejecutar a distancia.' },
  { q: '¿Para qué sirve la oficina incluida?', a: 'La oficina es un activo escriturable adicional: puedes usarla como espacio de trabajo personal, alquilarla por separado o incluirla con la residencia para renta corporativa. Tiene servicios de concierge, Wi-Fi y elevadores dedicados.' },
  { q: '¿Qué pasa si después de la llamada decido que no es para mí?', a: 'Perfecto. La primera llamada es un diagnóstico, no una venta. Si no hay match, te lo decimos de frente. Eliminamos tu información de nuestra base si lo pides.' }];

  return (
    <section className="section" id="faq" style={{ background: 'var(--bg-2)' }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">FAQ</span>
          <h2 style={{ marginTop: 14 }}>Lo que más preguntan antes de <em>cerrar</em>.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <details className="faq-item" key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </summary>
              <div className="a">{it.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA({ onCall, onGuide }) {
  return (
    <section className="section" style={{ paddingBottom: 0 }}>
      <div className="wrap">
        <div className="cta-final">
          <span className="eyebrow">Dos formas de empezar</span>
          <h2 style={{ marginTop: 14 }}>Ambas gratis <em>
</em></h2>
          <p>Evalúa tu caso de inversión en una llamada de 15 minutos — o si prefieres conocer el mercado primero, te enviamos nuestra guía de las 10 mejores preconstrucciones de Miami.</p>
          <div className="actions">
            <button className="btn btn-primary" onClick={onCall}>
              Agendar mi videollamada <span className="arrow">→</span>
            </button>
            <a className="btn btn-ghost" href="#" onClick={(e) => {e.preventDefault();onGuide();}}>
              Recibir la guía Top 10
            </a>
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <div className="brand" style={{ marginBottom: 16 }}>
              <span className="brand-mark">One <em>Twenty
</em></span>
              <span className="brand-sub">C5 ELITE</span>
            </div>
            <p style={{ maxWidth: '38ch' }}>
              Dolariza tu patrimonio en Miami con la firma hispana #1 en EE.UU. 25+ años comercializando preconstrucción.
            </p>
          </div>
          <div>
            <h4>Navegación</h4>
            <ul>
              <li><a href="#proyecto">El proyecto</a></li>
              <li><a href="#amenidades">Amenidades</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#equipo">Equipo</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href="https://wa.me/17863965621">WhatsApp · +1 (786) 396-5621</a></li>
              <li><a href="mailto:hola@c5global.com">info@c5global.com</a></li>
              <li><a href="https://www.instagram.com/orlandovmontiel/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
              <li><a href="https://www.youtube.com/c/C5Global" target="_blank" rel="noopener noreferrer">YouTube</a></li>
              <li><a href="https://www.linkedin.com/in/orlando-montiel-65680538/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <p>
            © 2026 C5 Global. Todos los derechos reservados. C5 Global es una firma inmobiliaria especializada en preconstrucción Miami. Afiliados a eXp Realty LLC · Florida Real Estate Corporation · License #CQ1037043. Las proyecciones son estimados basados en datos históricos y no garantizan resultados futuros. Consulta siempre con tu asesor fiscal y legal.
          </p>
          <div style={{ display: 'flex', gap: 18, fontSize: 12 }}>
            <a href="#">Privacidad</a>
            <a href="#">Términos</a>
            <a href="#">Cookies</a>
          </div>
        </div>
      </div>
    </footer>);
}

function App() {
  const [formType, setFormType] = useState(null); // 'call' | 'guide' | null
  const openCall = () => setFormType('call');
  const openGuide = () => setFormType('guide');
  const closeForm = () => setFormType(null);
  return (
    <>
      <Nav onOpen={openCall} />
      <Hero onOpen={openCall} />
      <MediaStrip />
      <ProjectIntro />
      <ValueProps onOpen={openCall} />
      <Amenities />
      <Location />
      <Stats />
      <TrackRecord />
      <Events />
      <Quote />
      <Process />
      <Team />
      <FAQ />
      <FinalCTA onCall={openCall} onGuide={openGuide} />
      <Footer />
      <a className="wa" href="https://wa.me/17863965621?text=Hola%20C5%2C%20me%20interesa%20120%20District" target="_blank" rel="noopener noreferrer">
        <span style={{ fontSize: 18 }}>💬</span> WhatsApp
      </a>
      {formType && <GhlFormModal type={formType} onClose={closeForm} />}
    </>);

}

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