/* global React, ReactDOM */
const { useState, useEffect, useRef, useMemo, useCallback } = React;


const OVER_ONS_FAQ = [
  { q: "Wat doet VIA Vastgoed precies?", a: "VIA Vastgoed begeleidt Nederlanders van A tot Z bij de aankoop van vastgoed in Spanje. Van eerste oriëntatie en projectselectie tot hypotheekadvies, juridische begeleiding, notarisafspraken en sleuteloverdracht — alles via één vast aanspreekpunt." },
  { q: "Is VIA Vastgoed een onafhankelijke partij?", a: "Ja. VIA Vastgoed werkt uitsluitend in het belang van de koper, niet in opdracht van een projectontwikkelaar. Dat betekent objectief advies, eerlijke rendementsverwachtingen en toegang tot kwalitatief geselecteerde projecten in meerdere regio's." },
  { q: "In welke regio's in Spanje is VIA Vastgoed actief?", a: "VIA Vastgoed is actief in vier regio's: Andalusië (Costa del Sol en omgeving), Valencia (Costa Blanca Noord en Zuid), Murcia (Costa Cálida) en Catalonië (Costa Brava, Barcelona regio en Costa Dorada). Elke regio heeft zijn eigen rendements- en gebruiksprofiel." },
  { q: "Hoe start ik een samenwerking met VIA Vastgoed?", a: "Een samenwerking begint altijd met een vrijblijvend kennismakingsgesprek van 30 minuten. Daarin bespreken we jouw wensen, budget en doelstelling. Op basis daarvan presenteren we passende projecten en regio's. Je kunt direct een moment inplannen via onze agenda." },
];

function OverOnsPage() {
  return (<>
    <section className="subhero subhero-has-video" style={{ textAlign: "left", alignItems: "flex-start" }}>
      <video className="subhero-video" src="hero-over-ons.mp4" poster="hero-over-ons-poster.jpg" autoPlay muted loop playsInline aria-label="Het team van VIA Vastgoed in actie, sfeerbeelden over ons" />
      <div className="subhero-video-overlay" />
      <div className="subhero-eye reveal-fade"><span className="eyebrow"><span className="dot"></span>Over ons</span></div>
      <h1 className="reveal-fade" style={{ marginTop: "16px", marginLeft: 0, "--reveal-delay": "0.1s" }}>Wij kennen<br/><em>Spanje.</em></h1>
      <p className="lede reveal-fade" style={{ marginTop: "32px", maxWidth: "60ch", "--reveal-delay": "0.2s" }}>VIA Vastgoed begeleidt Nederlanders bij het kopen van vastgoed in Spanje. Van eerste oriëntatie tot sleuteloverdracht, met één vast aanspreekpunt.</p>
    </section>

    {/* VERHAAL */}
    <section className="verhaal-section">
      <div className="verhaal-content">
        <span className="eyebrow reveal-fade"><span className="dot"></span>Ons verhaal</span>
        <h2 className="verhaal-title reveal-fade">Waarom <em>VIA</em><br/>Vastgoed</h2>
        <div className="verhaal-rule" />
        <p className="verhaal-body reveal-fade" style={{ "--reveal-delay": "0.1s" }}>Spanje trekt elk jaar meer Nederlandse kopers, maar de markt is complex. Andere regelgeving, onbekende partijen en een taalbarrière maken het lastig om zelfstandig goede keuzes te maken.</p>
        <p className="verhaal-body reveal-fade" style={{ "--reveal-delay": "0.15s" }}>VIA Vastgoed is opgericht om dat gat te dichten. Wij kennen de Spaanse markt, hebben de lokale contacten en begeleiden je van A tot Z, zodat jij met vertrouwen koopt.</p>
        <blockquote className="verhaal-quote reveal-fade" style={{ "--reveal-delay": "0.2s" }}>"Één aanspreekpunt,<br/>van oriëntatie tot sleuteloverdracht."</blockquote>
      </div>
      <div className="verhaal-foto-wrap reveal-fade" style={{ "--reveal-delay": "0.1s" }}>
        <div className="verhaal-foto" role="img" aria-label="Daan en Keanu, oprichters van VIA Vastgoed, in Spanje" style={{ backgroundImage: "url(team-daan-keanu.jpg)" }} />
        <div className="verhaal-foto-label">Opgericht in Amsterdam · Actief in Spanje</div>
      </div>
    </section>

    {/* OVERTUIGING */}
    <section className="section" style={{ background: "var(--ink)", color: "var(--bg)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow" style={{ color: "var(--accent)" }}><span className="dot" style={{ background: "var(--accent)" }}></span>Onze overtuiging</span></div>
        <div>
          <h2 className="section-title reveal-fade" style={{ color: "var(--bg)" }}>Waar het <em>voor ons</em><br/>om draait</h2>
          <div className="split-2" style={{ marginTop: "60px", alignItems: "start" }}>
            <div className="reveal-fade" style={{ "--reveal-delay": "0.1s" }}>
              <p style={{ fontSize: "17px", lineHeight: 1.7, color: "rgba(243,238,229,0.7)", marginBottom: "24px" }}>Investeren in Spanje begint niet bij het vinden van een pand. Het begint bij de vraag: past dit bij mijn situatie, mijn budget en mijn doelen?</p>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 2.6vw, 32px)", fontWeight: 300, lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--bg)" }}>Wij verkopen niets.<br/><em style={{ color: "var(--accent)", fontStyle: "italic" }}>Wij helpen je de juiste keuze maken.</em></p>
            </div>
            <div className="reveal-fade" style={{ "--reveal-delay": "0.2s" }}>
              <p style={{ fontSize: "17px", lineHeight: 1.7, color: "rgba(243,238,229,0.7)" }}>Onafhankelijk advies, een sterk lokaal netwerk in Spanje en één vast aanspreekpunt gedurende het hele traject. Dat is VIA.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <Team />

    {/* NETWERK */}
    <section className="section">
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Ons netwerk</span></div>
        <div>
          <h2 className="section-title reveal-fade">Betrouwbare<br/><em>lokale</em> partners</h2>
          <p className="lede reveal-fade" style={{ marginBottom: "60px", "--reveal-delay": "0.15s" }}>Wij werken met een internationaal netwerk van gespecialiseerde partijen binnen de Spaanse vastgoedmarkt. Partners met lokale kennis en een bewezen staat van dienst.</p>
          <div className="spain-promise-grid">
            {OVERONS_PARTNERS.map(p => (
              <div className="spain-promise-card reveal-fade" key={p.n}>
                <div className="spain-promise-num">{p.n}</div>
                <div className="spain-promise-title">{p.t}</div>
                <p className="spain-promise-desc">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    <FaqSection items={OVER_ONS_FAQ} schemaId="faq-over-ons" /><BigCTA /><Footer />
  </>);
}