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

const BLOG_POSTS = [
  {
    slug: "spaanse-vastgoedmarkt-loopt-voorop",
    cat: "Markt & rendement",
    t: "De Spaanse vastgoedmarkt loopt voorop in Europa",
    sub: "Wat betekent dat voor jou als koper of investeerder?",
    d: "Voor 2026 wordt een prijsstijging van 9,3% verwacht, meer dan twee keer het Europese gemiddelde. Spanje blijft de sterkst presterende markt op het continent tot en met 2028.",
    read: "5 min",
    date: "Mei 2026",
    img: "/blog-cover.jpg",
  },
];

function BlogPage() {
  const post = BLOG_POSTS[0];
  return (<>
    <section className="subhero">
      <div className="subhero-eye reveal-fade"><span className="eyebrow"><span className="dot"></span>Kennis & inzicht</span></div>
      <h1 className="reveal-fade" style={{ marginTop: "16px", "--reveal-delay": "0.1s" }}><em>Blog</em><br/>& updates.</h1>
      <p className="lede reveal-fade" style={{ marginTop: "32px", maxWidth: "60ch", "--reveal-delay": "0.2s" }}>Praktische artikelen over investeren in Spanje, de vastgoedmarkt en alles wat je moet weten als internationale koper.</p>
    </section>

    {/* FEATURED — enige artikel */}
    <section className="section" style={{ paddingTop: "clamp(40px, 5vw, 72px)", paddingBottom: "clamp(32px, 4vw, 56px)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow"><span className="dot"></span>Uitgelicht</span></div>
        <div>
          <a href={`/blog/${post.slug}`} className="reveal-fade" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", border: "1px solid var(--line)", background: "var(--paper)", textDecoration: "none", color: "inherit", transition: "transform 0.5s cubic-bezier(.6,.05,.2,1), box-shadow 0.5s", overflow: "hidden" }} onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 18px 36px rgba(20,17,13,0.10)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}>
            <div role="img" aria-label={`Omslagfoto: ${post.t}`} style={{ position: "relative", backgroundImage: `url(${post.img})`, backgroundSize: "cover", backgroundPosition: "center", minHeight: "380px", borderRight: "1px solid var(--line)" }}>
              <div style={{ position: "absolute", top: "20px", left: "20px", padding: "6px 12px", background: "var(--accent)", color: "var(--bg)", fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.16em", textTransform: "uppercase" }}>Uitgelicht</div>
            </div>
            <div style={{ padding: "clamp(28px, 4vw, 56px)", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: "32px" }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: "20px" }}><span className="dot"></span>{post.cat}</div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 2.8vw, 42px)", fontWeight: 300, letterSpacing: "-0.025em", lineHeight: 1.05, marginBottom: "12px" }}>{post.t}</h3>
                <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(16px, 1.6vw, 22px)", fontWeight: 300, letterSpacing: "-0.015em", color: "var(--ink-soft)", marginBottom: "20px", fontStyle: "italic" }}>{post.sub}</p>
                <p style={{ fontSize: "15px", lineHeight: 1.6, color: "var(--ink-soft)" }}>{post.d}</p>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "20px", borderTop: "1px solid var(--line)", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.08em", color: "var(--muted)" }}>
                <span>{post.date} · {post.read} leestijd</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: "10px", color: "var(--ink)" }}>Lees artikel
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
                </span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>

    {/* MEER BINNENKORT */}
    <section className="section" style={{ paddingTop: "clamp(32px, 4vw, 56px)", paddingBottom: "clamp(40px, 5vw, 80px)" }}>
      <div className="section-grid">
        <div className="section-eye"><span className="eyebrow" style={{ color: "var(--accent)" }}><span className="dot"></span>Binnenkort</span></div>
        <div className="reveal-fade" style={{ borderTop: "1px solid var(--line)", paddingTop: "28px" }}>
          <p style={{ fontFamily: "var(--font-display)", fontSize: "clamp(20px, 2vw, 28px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.15, color: "var(--ink-soft)" }}>Meer artikelen <em style={{ color: "var(--accent)", fontStyle: "italic" }}>binnenkort.</em> We voegen regelmatig nieuwe content toe.</p>
        </div>
      </div>
    </section>

    <BigCTA /><Footer />
  </>);
}

function BlogPostPage() {
  const post = BLOG_POSTS[0];
  useEffect(() => {
    const el = document.createElement("script");
    el.id = "article-schema";
    el.type = "application/ld+json";
    el.textContent = JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": post.t,
      "description": post.d,
      "image": "https://www.viavastgoed.com/blog-cover.jpg",
      "datePublished": "2026-05-01",
      "dateModified": "2026-05-01",
      "author": { "@type": "Organization", "name": "VIA Vastgoed", "url": "https://www.viavastgoed.com" },
      "publisher": { "@type": "Organization", "name": "VIA Vastgoed", "logo": { "@type": "ImageObject", "url": "https://www.viavastgoed.com/logo-donker.png" } },
      "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.viavastgoed.com/blog/spaanse-vastgoedmarkt-loopt-voorop" }
    });
    document.head.appendChild(el);
    return () => { const s = document.getElementById("article-schema"); if (s) s.remove(); };
  }, []);
  return (<>
    <section className="subhero blog-post-hero" style={{ paddingTop: "140px", paddingBottom: "40px", paddingLeft: "clamp(32px, 6vw, 56px)", paddingRight: "clamp(32px, 6vw, 56px)" }}>
      <div className="subhero-eye reveal-fade">
        <span className="eyebrow">
          <span className="dot"></span>
          <a href="/blog" style={{ color: "inherit", textDecoration: "none", borderBottom: "1px solid currentColor", paddingBottom: "1px" }}>Blog</a>
          {" · "}{post.cat}
        </span>
      </div>
      <h1 className="reveal-fade" style={{ marginTop: "16px", "--reveal-delay": "0.1s", maxWidth: "22ch", fontSize: "clamp(28px, 3.5vw, 52px)", lineHeight: 1.1, letterSpacing: "-0.025em" }}>{post.t}</h1>
      <p className="reveal-fade" style={{ marginTop: "12px", fontFamily: "var(--font-display)", fontSize: "clamp(16px, 1.6vw, 22px)", fontWeight: 300, letterSpacing: "-0.015em", color: "var(--ink-soft)", fontStyle: "italic", maxWidth: "48ch", "--reveal-delay": "0.12s" }}>{post.sub}</p>
      <div className="reveal-fade blog-post-meta" style={{ marginTop: "24px", display: "flex", gap: "24px", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.08em", color: "var(--muted)", "--reveal-delay": "0.18s" }}>
        <span>{post.date}</span>
        <span>·</span>
        <span>{post.read} leestijd</span>
      </div>
    </section>

    {/* COVER IMAGE */}
    <div className="blog-cover">
      <div className="blog-cover-img" role="img" aria-label={`Omslagfoto: ${post.t}`} style={{ backgroundImage: `url(${post.img})` }}></div>
    </div>

    {/* ARTICLE BODY */}
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="blog-article-body">

        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "32px" }}>
          Als je de laatste tijd de vastgoedmarkt in de gaten houdt, is je misschien al opgevallen dat Spanje het bijzonder goed doet. En dat gevoel klopt. Uit een recent rapport van S&P Global blijkt dat de Spaanse markt de komende jaren een van de sterkst presterende in heel Europa wordt.
        </p>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "48px" }}>
          Voor 2026 wordt een prijsstijging van 9,3% verwacht. Ter vergelijking: het Europese gemiddelde ligt op 4,3%. Dat is meer dan twee keer zo veel. En dat terwijl landen als Frankrijk, Duitsland en Italië het een stuk rustiger aan doen.
        </p>

        {/* STATS BLOCK */}
        <div className="reveal-fade" style={{ background: "var(--paper)", border: "1px solid var(--line)", padding: "clamp(32px, 4vw, 56px)", marginBottom: "56px" }}>
          <div className="eyebrow" style={{ marginBottom: "28px" }}><span className="dot"></span>Spanje aan kop tot en met 2028</div>
          <p style={{ fontSize: "15px", lineHeight: 1.65, color: "var(--ink-soft)", marginBottom: "32px" }}>
            Na stevige stijgingen van 11,4% in 2024 en 12,3% in 2025 blijft de groei de komende jaren aanhouden:
          </p>
          <div className="blog-stats-grid">
            {[["2026", "+9,3%"], ["2027", "+7,4%"], ["2028", "+6,2%"]].map(([yr, pct]) => (
              <div key={yr} style={{ background: "var(--bg)", padding: "20px 18px" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: "12px" }}>{yr}</div>
                <div className="blog-stat-num">{pct}</div>
              </div>
            ))}
          </div>
          <p style={{ fontSize: "14px", lineHeight: 1.6, color: "var(--muted)", marginTop: "20px", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
            Bron: S&P Global, verwachte prijsstijging residentieel vastgoed Spanje
          </p>
        </div>

        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "32px" }}>
          Ja, de groei vlakt iets af. Maar van een correctie of inzinking is geen sprake. S&P Global verwacht gewoon een markt die volwassener wordt, niet een die instort.
        </p>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "56px" }}>
          Voor mensen die kijken naar populaire regio's zoals de Costa Blanca of de Balearen betekent dit concreet: de combinatie van leefkwaliteit én waardestijging blijft aantrekkelijk, ook op langere termijn.
        </p>

        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px, 2.8vw, 38px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: "24px" }}>Niet elke Europese markt doet het even goed</h2>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "32px" }}>
          Wat ook opvalt in het rapport is hoe ongelijk Europa presteert. Portugal en Ierland deden het in 2025 beter dan verwacht, mede dankzij sterke arbeidsmarkten. Zweden en het Verenigd Koninkrijk bleven juist achter.
        </p>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "32px" }}>
          Andere landen hebben hun eigen uitdagingen. In Duitsland drukken hoge bouw- en energiekosten de nieuwbouw. In Nederland speelt een combinatie van schaarste en kosten. In Frankrijk zorgt politieke onzekerheid voor terughoudendheid bij kopers.
        </p>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "56px" }}>
          Spanje heeft al die problemen in veel mindere mate, en dat zie je terug in de cijfers.
        </p>

        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px, 2.8vw, 38px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: "24px" }}>Waarom blijven de prijzen in Spanje stijgen?</h2>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "24px" }}>
          Er zijn een paar structurele redenen waarom de Spaanse markt zo robuust is.
        </p>
        {[
          ["Grote vraag naar woningen", "Niet alleen omdat er meer mensen komen wonen, maar ook omdat huishoudens kleiner worden. Meer mensen wonen alleen of met z'n tweeën. Daarbij speelt ook mee dat thuiswerken mensen vrijer heeft gemaakt in hun keuze waar ze wonen, en velen trekken bewust naar een plek met een betere leefkwaliteit."],
          ["Te weinig aanbod", "Nieuwe woningen komen er te weinig bij, door regelgeving, personeelstekort in de bouw en gestegen kosten. Dat houdt de druk op de prijzen hoog."],
          ["Herninvestering van opgebouwd vermogen", "Veel huiseigenaren hebben de afgelopen jaren flink vermogen opgebouwd. Dat geld wordt opnieuw geïnvesteerd in vastgoed, wat de markt verder actief houdt."],
        ].map(([titel, tekst], i) => (
          <div key={i} className="reveal-fade" style={{ display: "flex", gap: "24px", marginBottom: "32px", paddingBottom: "32px", borderBottom: "1px solid var(--line)", "--reveal-delay": `${i * 0.08}s` }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", color: "var(--accent)", paddingTop: "4px", minWidth: "28px" }}>0{i + 1}</div>
            <div>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(19px, 1.6vw, 23px)", fontWeight: 400, letterSpacing: "-0.015em", marginBottom: "10px" }}>{titel}</h3>
              <p style={{ fontSize: "clamp(16px, 1.2vw, 17px)", lineHeight: 1.75, color: "var(--ink-soft)" }}>{tekst}</p>
            </div>
          </div>
        ))}

        <div style={{ marginBottom: "56px" }}></div>

        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px, 2.8vw, 38px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: "24px" }}>Wat met de rente?</h2>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "56px" }}>
          Hier is wel een kanttekening op zijn plaats. De hypotheekrente is in 2025 nauwelijks gedaald en S&P verwacht ook de komende jaren weinig ruimte voor grote renteverlagingen. Dat maakt goed financieel voorbereid zijn belangrijker dan ooit. Wie nu koopt met een doordacht plan, staat sterker dan wie afwacht.
        </p>

        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px, 2.8vw, 38px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: "24px" }}>Is Spanje overgewaardeerd?</h2>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "32px" }}>
          Nee, niet echt. Vergeleken met de piekperiode van 2021–2022 zijn de Europese markten over het algemeen minder overgewaardeerd geraakt. Portugal en Zwitserland spannen momenteel de kroon als het gaat om oververhitting. Frankrijk en België zijn juist relatief goedkoop.
        </p>
        <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "var(--ink)", marginBottom: "56px" }}>
          Spanje zit in een evenwichtige positie: sterke vraag, maar geen buitensporige overwaardering. Dat maakt het aantrekkelijk voor de lange termijn.
        </p>

        <div className="reveal-fade" style={{ background: "var(--ink)", color: "var(--bg)", padding: "clamp(32px, 4vw, 56px)", marginBottom: "80px" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px, 2.8vw, 38px)", fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: "24px" }}>Wat betekent dit voor jou?</h2>
          <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "rgba(243,238,229,0.8)", marginBottom: "24px" }}>
            Of je nu een tweede woning zoekt, wil verhuizen naar de zon, of puur kijkt naar rendement op je investering, de boodschap is helder: de Spaanse markt biedt op dit moment een serieuze kans.
          </p>
          <p style={{ fontSize: "clamp(15px, 1.4vw, 19px)", lineHeight: 1.75, color: "rgba(243,238,229,0.8)", marginBottom: "40px" }}>
            De groei zet door, het aanbod blijft krap, en wie vroeg instapt heeft een voordeel ten opzichte van wie nog jaren wacht. De prijzen blijven de komende jaren harder stijgen dan de gemiddelde inkomensontwikkeling. Dat maakt wachten steeds duurder.
          </p>
          <a href={PLAN_URL} target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: "12px", padding: "14px 24px", background: "var(--accent)", color: "var(--bg)", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", textDecoration: "none", transition: "opacity 0.2s" }} onMouseEnter={e => e.currentTarget.style.opacity = "0.85"} onMouseLeave={e => e.currentTarget.style.opacity = "1"}>
            Plan een kennismaking
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
          </a>
        </div>

        <div style={{ paddingTop: "40px", borderTop: "1px solid var(--line)" }}>
          <a href="/blog" style={{ display: "inline-flex", alignItems: "center", gap: "10px", fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", textDecoration: "none", transition: "color 0.2s" }} onMouseEnter={e => e.currentTarget.style.color = "var(--ink)"} onMouseLeave={e => e.currentTarget.style.color = "var(--muted)"}>
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 7H2M6 3L2 7l4 4"/></svg>
            Terug naar blog
          </a>
        </div>
      </div>
    </section>

    <Footer />
  </>);
}
const WERKEN_TAKEN = [
  "Cold acquisition en relatiebeheer",
  "Adviesgesprekken met investeerders",
  "Analyse van vastgoedprojecten in Spanje",
  "Samenwerking met buitenlandse partners",
  "Marketing en LinkedIn leadgeneratie",
  "Meereizen naar Spanje voor projectbezoeken",
  "Opbouwen van je eigen portefeuille",
];
const WERKEN_CULTUUR = [
  "Flexibiliteit hoort erbij",
  "Sporten tussendoor moet kunnen",
  "Een koffiemoment buiten de deur? Prima",
  "Verantwoordelijkheid nemen is de basis",
  "Korte lijnen, directe communicatie",
];
const WERKEN_GROEI = [
  { n: "01", t: "Junior → Senior Advisor", d: "Een duidelijk pad waarin je in eigen tempo opschaalt naar volledige verantwoordelijkheid voor cliënten." },
  { n: "02", t: "Eigen portefeuille opbouwen", d: "Je bouwt een persoonlijke klantenkring op binnen het VIA-platform en het netwerk van Spaanse partners." },
  { n: "03", t: "Strategisch meedenken", d: "Vanaf dag één heb je inbreng op de richting, het aanbod en de partners waar we mee werken." },
  { n: "04", t: "Zelfstandige structuur onder VIA", d: "Doorgroeien naar een eigen werkmaatschappij onder de VIA-paraplu, met internationale uitbreiding als horizon." },
];

function ListItem({ glyph, children }) {
  return (
    <li style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: "16px", alignItems: "baseline", padding: "14px 0", borderBottom: "1px solid var(--line)", fontSize: "16px", lineHeight: 1.5 }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "13px", color: "var(--accent)", fontWeight: 500 }}>{glyph}</span>
      <span>{children}</span>
    </li>
  );
}
