/* global React, NavBar, FooterBar, SectionMarker, CTA, Monogram, Wordmark, ClaimCaps */
const { useState: useStatePages, useEffect: useEffectPages, useRef: useRefPages } = React;

/* ──────────────────────────────────────────────────────────────
   PAGES — Heller Lauritsen Capital
   Boutique Property Capital · Mallorca
   Brand: navy #0E1B2C / bone #FAF7F0 / gold #C9A961
   ────────────────────────────────────────────────────────────── */

/* Form endpoint — Google Apps Script Web-App-URL.
   Bereitgestellt 2026-05-09, Version 1. Setup-Anleitung in apps-script.gs.
   Solange leer: Form fällt automatisch auf mailto: zurück. */
const SHEET_URL = 'https://script.google.com/macros/s/AKfycbzPzLNGhZaulv0UjpAwkQkFSkbnjcv4cDJH-yox2-7VxsJQP4-pYrhRKkHpcxacchNz/exec';

const PAGE_MAX = 1280;
const SIDE_PAD = 96;
const SIDE_PAD_TIGHT = 56;

const PageShell = ({ children, navActive, navVariant = 'navy' }) => (
  <div style={{
    width: '100%',
    minHeight: '100vh',
    background: '#FAF7F0',
    overflow: 'hidden',
  }}>
    <NavBar active={navActive} variant={navVariant} />
    {children}
    <FooterBar />
  </div>
);

const Container = ({ children, style = {} }) => (
  <div style={{ maxWidth: PAGE_MAX, margin: '0 auto', ...style }}>{children}</div>
);

/* ─── Page 1 — Hero / Startseite ─── */
const HomeHeroStyles = () => (
  <style>{`
    @keyframes villa-draw {
      0%   { stroke-dashoffset: var(--len); opacity: 0; }
      4%   { opacity: 1; }
      55%  { stroke-dashoffset: 0; opacity: 1; }
      92%  { stroke-dashoffset: 0; opacity: 1; }
      100% { stroke-dashoffset: 0; opacity: 0; }
    }
    @keyframes villa-glow {
      0%, 100% { opacity: 0; }
      35%, 75% { opacity: 1; }
    }
    @keyframes villa-frond {
      0%, 100% { transform: rotate(0deg); }
      50%      { transform: rotate(1.2deg); }
    }
    @keyframes hairline-fade {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .villa-line {
      fill: none;
      stroke: #C9A961;
      stroke-linecap: round;
      stroke-linejoin: round;
      animation: villa-draw 22s ease-in-out infinite;
    }
    .villa-window-glow { animation: villa-glow 22s ease-in-out infinite; }
    .villa-palm        { transform-origin: 50% 100%; animation: villa-frond 9s ease-in-out infinite; }
    .hero-chip-row > * { animation: hairline-fade 900ms ease-out both; }
    .hero-chip-row > *:nth-child(1) { animation-delay: 100ms; }
    .hero-chip-row > *:nth-child(2) { animation-delay: 200ms; }
    .hero-chip-row > *:nth-child(3) { animation-delay: 300ms; }
    .hero-chip-row > *:nth-child(4) { animation-delay: 400ms; }
  `}</style>
);

const VillaPath = ({ d, len, delay = 0, weight = 0.7, opacity = 1 }) => (
  <path className="villa-line" d={d} strokeWidth={weight}
    style={{
      strokeDasharray: len, strokeDashoffset: len,
      animationDelay: `${delay}s`, ['--len']: len, opacity,
    }} />
);

const VillaIllustration = () => (
  <svg viewBox="0 0 760 560" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" style={{ width:'100%', height:'100%', overflow:'visible' }} aria-hidden>
    <VillaPath d="M 40 470 L 720 470" len={680} delay={0} weight={0.5} opacity={0.45} />
    <VillaPath d="M 180 470 L 180 280 L 560 280 L 560 470" len={765} delay={0.6} weight={0.9} />
    <VillaPath d="M 160 280 L 370 215 L 580 280" len={460} delay={2.4} weight={0.9} />
    <VillaPath d="M 175 282 L 565 282" len={390} delay={3.0} weight={0.4} opacity={0.55} />
    <VillaPath d="M 120 470 L 620 470" len={500} delay={0.2} weight={0.5} opacity={0.5} />
    <VillaPath d="M 180 360 L 560 360" len={380} delay={3.4} weight={0.4} opacity={0.7} />
    <VillaPath d="M 220 300 L 220 350 L 260 350 L 260 300 Z" len={180} delay={3.8} weight={0.6} />
    <VillaPath d="M 350 300 L 350 350 L 390 350 L 390 300 Z" len={180} delay={4.0} weight={0.6} />
    <VillaPath d="M 480 300 L 480 350 L 520 350 L 520 300 Z" len={180} delay={4.2} weight={0.6} />
    <VillaPath d="M 230 310 L 250 310 M 230 320 L 250 320 M 230 330 L 250 330 M 230 340 L 250 340" len={80} delay={4.4} weight={0.3} opacity={0.7} />
    <VillaPath d="M 360 310 L 380 310 M 360 320 L 380 320 M 360 330 L 380 330 M 360 340 L 380 340" len={80} delay={4.5} weight={0.3} opacity={0.7} />
    <VillaPath d="M 490 310 L 510 310 M 490 320 L 510 320 M 490 330 L 510 330 M 490 340 L 510 340" len={80} delay={4.6} weight={0.3} opacity={0.7} />
    <VillaPath d="M 340 470 L 340 410 Q 340 380 370 380 Q 400 380 400 410 L 400 470" len={220} delay={5.0} weight={0.7} />
    <VillaPath d="M 220 400 L 220 450 L 270 450 L 270 400 Z" len={200} delay={5.2} weight={0.5} />
    <VillaPath d="M 470 400 L 470 450 L 520 450 L 520 400 Z" len={200} delay={5.4} weight={0.5} />
    <VillaPath d="M 245 400 L 245 450 M 220 425 L 270 425" len={75} delay={5.6} weight={0.3} opacity={0.7} />
    <VillaPath d="M 495 400 L 495 450 M 470 425 L 520 425" len={75} delay={5.8} weight={0.3} opacity={0.7} />
    <rect className="villa-window-glow" x="346" y="410" width="48" height="60" fill="rgba(255,225,160,0.10)" />
    <VillaPath d="M 320 478 L 420 478" len={100} delay={5.9} weight={0.4} opacity={0.5} />
    <VillaPath d="M 580 470 L 580 440 L 700 440 L 700 470" len={210} delay={6.4} weight={0.5} opacity={0.75} />
    <VillaPath d="M 280 478 L 130 510" len={170} delay={6.6} weight={0.35} opacity={0.5} />
    <g className="villa-palm" style={{ transformOrigin: '95px 470px' }}>
      <VillaPath d="M 95 470 Q 92 410 100 350 Q 102 320 96 290" len={210} delay={7.0} weight={0.7} />
      <VillaPath d="M 96 290 Q 70 280 50 295 Q 65 285 75 282" len={90} delay={7.6} weight={0.5} />
      <VillaPath d="M 96 290 Q 122 278 145 290 Q 130 283 118 282" len={90} delay={7.8} weight={0.5} />
      <VillaPath d="M 96 290 Q 80 260 75 235 Q 88 252 92 268" len={90} delay={8.0} weight={0.5} />
      <VillaPath d="M 96 290 Q 116 262 124 240 Q 110 256 100 270" len={90} delay={8.2} weight={0.5} />
      <VillaPath d="M 96 290 Q 70 295 45 320" len={70} delay={8.4} weight={0.4} opacity={0.7} />
      <VillaPath d="M 96 290 Q 124 296 150 318" len={70} delay={8.6} weight={0.4} opacity={0.7} />
    </g>
    <VillaPath d="M 720 470 Q 718 420 723 380 Q 725 360 722 345 Q 718 360 720 380 Q 715 410 717 470" len={200} delay={8.8} weight={0.45} opacity={0.7} />
    <circle cx="640" cy="190" r="2.5" fill="#C9A961" opacity="0" className="villa-window-glow" style={{ animationDelay: '0s' }} />
  </svg>
);

const HomePage = () => (
  <PageShell navActive="home">
    <HomeHeroStyles />

    {/* HERO */}
    <section style={{
      background: '#0E1B2C', color: '#F5F1E8',
      padding: `120px ${SIDE_PAD}px 140px`, position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position:'absolute', inset:0, pointerEvents:'none',
        backgroundImage: 'linear-gradient(to right, rgba(201,169,97,0.07) 1px, transparent 1px)',
        backgroundSize: '160px 100%',
      }} />

      <div aria-hidden style={{
        position:'absolute', right: 56, top: 110, width: 620, height: 460, opacity: 0.92,
      }}>
        <VillaIllustration />
      </div>

      <div aria-hidden style={{
        position:'absolute', left:'48%', top:0, bottom:0, width:0.5,
        background:'linear-gradient(to bottom, transparent, rgba(201,169,97,0.14), transparent)',
      }} />

      <Container style={{ position:'relative' }}>
        <div style={{ maxWidth: 720 }}>
          <div style={{
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.42em', fontSize:11, color:'#C9A961', marginBottom:64,
          }}>
            Palma de Mallorca&nbsp;&nbsp;·&nbsp;&nbsp;Hannover&nbsp;&nbsp;·&nbsp;&nbsp;Vaduz
          </div>

          <h1 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontStyle:'normal',
            fontSize: 60, lineHeight: 1.12, letterSpacing:'-0.008em',
            margin: 0, color:'#F5F1E8', maxWidth: 940,
          }}>
            Mallorca,
            <em style={{ color:'rgba(245,241,232,0.9)' }}> strukturiert.</em>
          </h1>

          <div style={{
            fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
            fontSize: 22, color:'rgba(245,241,232,0.62)', marginTop: 32, letterSpacing:'0.005em',
            maxWidth: 620, lineHeight: 1.45,
          }}>
            Boutique Property Capital für DACH-Mandanten — vier abgestimmte Erwerbs&shy;wege,
            ein dokumentierter Prozess, ein deutscher Ansprechpartner.
          </div>

          <div style={{ marginTop: 72, display:'flex', alignItems:'center', gap: 36, flexWrap:'wrap' }}>
            <CTA>Vertrauliches Erstgespräch</CTA>
            <span style={{
              fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
              letterSpacing:'0.32em', fontSize:11, color:'rgba(245,241,232,0.5)',
            }}>kontakt@hellerlauritsencapital.com</span>
          </div>
        </div>

        {/* four-pillar baseline */}
        <div className="hero-chip-row" style={{
          position:'relative', marginTop: 140,
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 40,
          borderTop:'1px solid rgba(201,169,97,0.25)', paddingTop: 36,
          maxWidth: PAGE_MAX, zIndex: 2,
        }}>
          {[
            ['I.',  'Klassischer Erwerb',     'Off-Market und vermarktete Objekte mit Strukturierung.'],
            ['II.', 'Subasta Pública',        'Direkter Zugang zu öffentlichen Versteigerungen via BOE.'],
            ['III.','Cesión de Crédito',      'Forderungserwerb statt Zuschlag — vertraulich verhandelt.'],
            ['IV.', 'Vermögens­strukturierung','Vehikel, Steuern, Stiftung, Beckham-Regelung.'],
          ].map(([n, t, b]) => (
            <div key={t}>
              <div style={{
                fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:22,
                color:'#C9A961', marginBottom:14, letterSpacing:'0.01em',
              }}>{n}</div>
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                letterSpacing:'0.22em', fontSize:11, color:'#F5F1E8', marginBottom:12,
              }}>{t}</div>
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontSize:13.5, lineHeight:1.65,
                color:'rgba(245,241,232,0.62)',
              }}>{b}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>

    {/* MANDAT — editorial transition */}
    <section style={{ background:'#FAF7F0', padding:`104px ${SIDE_PAD}px 56px` }}>
      <Container>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.3fr', gap: 96, alignItems:'start' }}>
          <div>
            <SectionMarker>Mandat</SectionMarker>
            <h2 style={{
              fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:40, lineHeight:1.18,
              letterSpacing:'-0.005em', margin:'28px 0 0', color:'#2A2A2A',
            }}>
              Eine Erwerbs­strategie,<br/>
              die deutscher Logik<br/>
              <em style={{ color:'#3A3A3A' }}>und spanischem Recht</em><br/>
              zugleich genügt.
            </h2>
          </div>
          <div style={{ paddingTop: 14 }}>
            <p style={{
              fontFamily:'DM Sans, sans-serif', fontSize:15.5, lineHeight:1.75, color:'#3A3A3A', margin:0,
            }}>
              Heller Lauritsen Capital begleitet vermögende Mandantinnen und Mandanten aus dem
              DACH-Raum bei Erwerb, Strukturierung und Verwaltung balearischen Immobilien­besitzes —
              entlang aller Schritte zwischen einem ersten Gespräch und der Eintragung im
              Registro de la Propiedad.
            </p>
            <p style={{
              fontFamily:'DM Sans, sans-serif', fontSize:15.5, lineHeight:1.75, color:'#3A3A3A',
              marginTop: 22, marginBottom: 0,
            }}>
              Wir sind keine Makler und keine Vermögensverwalter. Wir öffnen den Zugang zu
              Erwerbswegen, die DACH-Käufern üblicherweise verschlossen bleiben — öffentliche
              Versteigerungen, Forderungserwerb, Off-Market — und führen den Prozess auf Deutsch:
              vertraulich, ruhig und vollständig dokumentiert.
            </p>
          </div>
        </div>
      </Container>
    </section>

    {/* PROOF RAIL — three credibility blocks */}
    <section style={{ background:'#FAF7F0', padding:`56px ${SIDE_PAD}px 120px` }}>
      <Container>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 56,
          paddingTop: 48, borderTop:'1px solid rgba(42,42,42,0.10)',
        }}>
          {[
            ['Cross-Border', 'Deutsch–Spanisch strukturiert, von der Bonitätsanalyse über die Erwerbsstruktur bis zum Notartermin.'],
            ['Vertraulich',  'Ein deutscher Ansprechpartner, ein dokumentierter Prozess, keine Schnittstellenverluste.'],
            ['Lokales Netz', 'Anwälte, Notare, Steuerberater, Banken und Plattformzugänge auf Mallorca — geprüft und etabliert.'],
          ].map(([t, b]) => (
            <div key={t}>
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom:14,
              }}>{t}</div>
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontSize:14, lineHeight:1.7, color:'#3A3A3A',
              }}>{b}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>

    {/* QUOTE STRIP */}
    <section style={{ background:'#F5F1E8', padding:`96px ${SIDE_PAD}px 96px` }}>
      <Container>
        <div style={{
          display:'grid', gridTemplateColumns:'200px 1fr', gap: 56, alignItems:'baseline',
          padding:'40px 0', borderTop:'1px solid rgba(42,42,42,0.12)',
          borderBottom:'1px solid rgba(42,42,42,0.12)',
        }}>
          <div style={{
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.42em', fontSize:10, color:'#C9A961',
          }}>Grundsatz</div>
          <p style={{
            fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
            fontSize: 26, lineHeight:1.5, color:'#2A2A2A', margin:0, maxWidth: 880,
            letterSpacing:'-0.002em',
          }}>
            „Disziplin in der Due Diligence ist der wichtigste einzelne Renditefaktor des
            gesamten Verfahrens — wichtiger als jeder Schätzwert."
          </p>
        </div>
      </Container>
    </section>
  </PageShell>
);

/* ─── Page 2 — Leistungen ─── */
const LeistungenPage = () => {
  const items = [
    {
      n: 'I',
      t: 'Klassischer Erwerb',
      b: 'Off-Market-Pipelines und sorgfältig kuratierte vermarktete Objekte. Verhandlung, Vertragsprüfung und Closing-Begleitung über unsere Partneranwälte in Palma — auf Deutsch dokumentiert.',
      tags: ['Off-Market', 'Vertragsprüfung', 'Closing'],
    },
    {
      n: 'II',
      t: 'Subasta Pública',
      b: 'Direkter Zugang zu öffentlichen Versteigerungen über das BOE-Portal. Hinterlegung des Depósito (5 % des Schätzwerts), Maximalgebot-Strategie und — bei Zuschlag — Cesión del Remate für die saubere Vehikel-Strukturierung.',
      tags: ['BOE-Plattform', 'Depósito 5 %', 'Cesión del Remate'],
    },
    {
      n: 'III',
      t: 'Cesión de Crédito Hipotecario',
      b: 'Forderungserwerb statt Zuschlag — Direktverhandlung mit Gläubiger oder Servicer. Geeignet für komplexe Mitgläubigerstrukturen und hochwertige Objekte, die diskret und ohne öffentliche Versteigerung erworben werden sollen.',
      tags: ['Art. 1526 ff. CC', 'Art. 149 LH', 'Servicer-Verhandlung'],
    },
    {
      n: 'IV',
      t: 'Vermögens­strukturierung',
      b: 'Erwerbsstruktur und Halteebene vor dem Gebot — natürliche Person, S.L., Auslands-Holding oder liechtensteinische Familienstiftung. Beckham-Regelung und § 6 AStG (Wegzugsbesteuerung) werden integriert geprüft.',
      tags: ['S.L. / Holding', 'LI-Familienstiftung', 'Beckham · § 6 AStG'],
    },
  ];

  return (
    <PageShell navActive="leistungen" navVariant="bone">
      <section style={{ background:'#FAF7F0', padding:`104px ${SIDE_PAD}px 56px` }}>
        <Container>
          <div style={{ marginBottom: 64 }}>
            <SectionMarker>Leistungen</SectionMarker>
            <h1 style={{
              fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:54, lineHeight:1.12,
              letterSpacing:'-0.008em', margin:'24px 0 0', color:'#2A2A2A', maxWidth: 920,
            }}>
              Vier Wege in den Markt —<br/>
              <em style={{ color:'#3A3A3A' }}>aufeinander abgestimmt, situativ gewählt.</em>
            </h1>
            <p style={{
              fontFamily:'DM Sans, sans-serif', fontSize:16, lineHeight:1.7, color:'#3A3A3A',
              maxWidth: 820, marginTop: 28,
            }}>
              Welcher Weg im Einzelfall die optimale Position bietet, entscheidet sich am konkreten Objekt,
              an der Gläubigerstruktur und an den Zielen des Mandanten. Wir prüfen alle vier — und empfehlen
              schriftlich.
            </p>
          </div>

          <div style={{
            display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: '56px 64px', marginTop: 48,
          }}>
            {items.map(it => (
              <article key={it.n}>
                <hr style={{ border:0, borderTop:'0.5px solid #C9A961', margin:'0 0 22px' }} />
                <div style={{
                  fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:30,
                  color:'#C9A961', marginBottom: 18, letterSpacing:'0.02em',
                }}>{it.n}.</div>
                <h3 style={{
                  fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:30, lineHeight:1.22,
                  margin:'0 0 18px', color:'#2A2A2A', letterSpacing:'-0.005em',
                }}>{it.t}</h3>
                <p style={{
                  fontFamily:'DM Sans, sans-serif', fontSize:15, lineHeight:1.72,
                  color:'#3A3A3A', margin:0,
                }}>{it.b}</p>

                <div style={{ marginTop: 28, display:'flex', flexWrap:'wrap', gap: '8px 18px' }}>
                  {it.tags.map(t => (
                    <span key={t} style={{
                      fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                      letterSpacing:'0.18em', fontSize:10, color:'#555',
                      paddingBottom: 2, borderBottom:'0.5px solid rgba(42,42,42,0.18)',
                    }}>{t}</span>
                  ))}
                </div>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* Vergleichstabelle Subasta vs. Cesión */}
      <section style={{ background:'#F5F1E8', padding:`96px ${SIDE_PAD}px 96px` }}>
        <Container>
          <SectionMarker>Vergleich</SectionMarker>
          <h2 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:38, lineHeight:1.2,
            letterSpacing:'-0.005em', margin:'24px 0 48px', color:'#2A2A2A', maxWidth: 760,
          }}>
            Subasta-Teilnahme oder<br/>
            <em style={{ color:'#3A3A3A' }}>Forderungserwerb?</em>
          </h2>

          <div style={{
            background:'#FAF7F0', border:'0.5px solid rgba(201,169,97,0.45)',
            display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr',
          }}>
            {[
              ['',                'Subasta-Teilnahme',                       'Cesión de Crédito',                       true],
              ['Zugang',          'BOE-Plattform via Depósito',              'Direktverhandlung mit Gläubiger / Servicer'],
              ['Diskretion',      'Öffentliches Verfahren',                  'Vertraulich bis zur Eintragung'],
              ['Preisfindung',    'Auktion ab gesetzlichem Minimum',         'Verhandelt mit Gläubiger'],
              ['Bearbeitungs­dauer', 'Termingebunden',                       'Mehrere Wochen bis Monate'],
              ['Komplexität',     'Niedrig bis mittel',                      'Hoch — juristisch anspruchsvoll'],
              ['Geeignet für',    'Standardobjekte, klare Lasten',           'Komplexe Lagen, Premium-Objekte'],
            ].map((row, i) => {
              const isHead = i === 0;
              return (
                <React.Fragment key={i}>
                  {row.slice(0, 3).map((cell, j) => (
                    <div key={j} style={{
                      padding: '20px 28px',
                      background: isHead ? '#0E1B2C' : 'transparent',
                      color: isHead ? (j === 0 ? '#C9A961' : '#F5F1E8') : '#2A2A2A',
                      borderTop: !isHead && i > 1 ? '0.5px solid rgba(42,42,42,0.10)' : undefined,
                      borderRight: j < 2 ? '0.5px solid rgba(42,42,42,0.08)' : undefined,
                      fontFamily: isHead ? 'DM Sans, sans-serif' : (j === 0 ? 'DM Sans, sans-serif' : 'DM Sans, sans-serif'),
                      fontWeight: isHead ? 500 : (j === 0 ? 500 : 400),
                      textTransform: isHead || j === 0 ? 'uppercase' : 'none',
                      letterSpacing: isHead ? '0.32em' : (j === 0 ? '0.18em' : '0.005em'),
                      fontSize: isHead ? 11 : (j === 0 ? 11 : 14),
                      lineHeight: isHead ? 1 : 1.55,
                    }}>{cell}</div>
                  ))}
                </React.Fragment>
              );
            })}
          </div>
        </Container>
      </section>

      {/* Anmerkung */}
      <section style={{ background:'#FAF7F0', padding:`96px ${SIDE_PAD}px 120px` }}>
        <Container>
          <div style={{
            padding: '40px 0', borderTop:'1px solid rgba(42,42,42,0.12)',
            borderBottom:'1px solid rgba(42,42,42,0.12)',
            display:'grid', gridTemplateColumns:'200px 1fr', gap: 48, alignItems:'baseline',
          }}>
            <div style={{
              fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
              letterSpacing:'0.42em', fontSize:10, color:'#C9A961',
            }}>Anmerkung</div>
            <p style={{
              fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
              fontSize: 24, lineHeight:1.5, color:'#2A2A2A', margin:0, maxWidth: 880,
              letterSpacing:'-0.002em',
            }}>
              „Wir versprechen keinen Schätzwert-Vorteil. Wir verhandeln ihn — und dokumentieren,
              was wir tun."
            </p>
          </div>
        </Container>
      </section>
    </PageShell>
  );
};

/* ─── Page 3 — Prozess ─── */
const ProzessPage = () => {
  const steps = [
    { n: 'I',   t: 'Erstgespräch',
      b: 'Vertrauliches Gespräch zu Vorhaben, Wohnsitzkonstellation und Zielsetzung. Wir hören erst zu — keine Unterlagen, keine Verpflichtung. Erste Einschätzung der Realisierbarkeit binnen 24 Stunden.',
      d: 'Woche 1' },
    { n: 'II',  t: 'Due Diligence',
      b: 'Objekt-, Lasten- und Belegungsprüfung. Nota Simple aus dem Registro de la Propiedad, Catastro-Abgleich, Belegungs­prüfung vor Ort, Modellierung der steuerlichen Erwerbskosten und etwaiger Räumungs- und Sanierungs­szenarien.',
      d: 'Woche 2–3' },
    { n: 'III', t: 'Strategie & Vehikel',
      b: 'Auswahl des optimalen Erwerbswegs (klassisch, Subasta, Cesión, Off-Market) und der Erwerbs­struktur (natürliche Person, S.L., Holding, LI-Familienstiftung). Beckham-Regelung und § 6 AStG werden integriert geprüft.',
      d: 'Woche 3–4' },
    { n: 'IV',  t: 'Erwerb',
      b: 'Gebotsabgabe und Zuschlagsabwicklung über die BOE-Plattform — oder Verhandlung und Notarisierung der Cesión de Crédito Hipotecario. Cesión del Remate auf das gewählte Vehikel innerhalb der gesetzlichen Frist.',
      d: 'Woche 4–10' },
    { n: 'V',   t: 'Eintragung & Halten',
      b: 'Notartermin, Auszahlung und Eintragung im Registro de la Propiedad. Anschließend laufende Steuerberatung über unsere Partnerkanzlei in Palma sowie — auf Wunsch — operative Verwaltung des Halte­vehikels.',
      d: 'Woche 11–14' },
  ];

  return (
    <PageShell navActive="prozess" navVariant="bone">
      <section style={{ background:'#F5F1E8', padding:`104px ${SIDE_PAD}px 80px` }}>
        <Container>
          <SectionMarker>Prozess</SectionMarker>
          <h1 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:54, lineHeight:1.12,
            letterSpacing:'-0.008em', margin:'24px 0 28px', color:'#2A2A2A', maxWidth: 920,
          }}>
            Fünf Schritte —<br/>
            <em style={{ color:'#3A3A3A' }}>vom Erstgespräch bis zur Eintragung im Grundbuch.</em>
          </h1>
          <p style={{
            fontFamily:'DM Sans, sans-serif', fontSize:16, lineHeight:1.7, color:'#3A3A3A',
            maxWidth: 820, marginTop: 0, marginBottom: 80,
          }}>
            Jeder Schritt ist auf das individuelle Mandat zugeschnitten und wird vor dem nächsten
            schriftlich freigegeben. Sie entscheiden — wir dokumentieren.
          </p>

          <div style={{ position:'relative' }}>
            <div aria-hidden style={{
              position:'absolute', left: 60, top: 8, bottom: 8, width: 0.5,
              background:'rgba(201,169,97,0.55)',
            }} />

            {steps.map((s, i) => (
              <div key={s.n} style={{
                display:'grid', gridTemplateColumns:'120px 1fr 200px', gap: 48,
                alignItems:'baseline', padding:'40px 0',
                borderTop: i === 0 ? 'none' : '1px solid rgba(42,42,42,0.10)',
              }}>
                <div style={{
                  fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
                  fontSize: 56, color:'#C9A961', lineHeight:1, position:'relative',
                }}>
                  <span style={{
                    position:'absolute', left: 60, top: '50%', width: 16, height: 0.5,
                    background:'#C9A961', transform:'translateY(-50%)',
                  }} />
                  {s.n}
                </div>
                <div>
                  <h3 style={{
                    fontFamily:'EB Garamond, serif', fontWeight:400, fontSize: 32, lineHeight:1.2,
                    margin:'0 0 14px', color:'#2A2A2A', letterSpacing:'-0.005em',
                  }}>{s.t}</h3>
                  <p style={{
                    fontFamily:'DM Sans, sans-serif', fontSize:15, lineHeight:1.72,
                    color:'#3A3A3A', margin:0, maxWidth: 720,
                  }}>{s.b}</p>
                </div>
                <div style={{
                  fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                  letterSpacing:'0.32em', fontSize:10, color:'#555', textAlign:'right', paddingTop: 6,
                }}>{s.d}</div>
              </div>
            ))}
          </div>
        </Container>
      </section>
    </PageShell>
  );
};

/* ─── Page 4 — Recht & Risiken ─── */
const RechtPage = () => {
  const dd = [
    {
      t: 'Lastenprüfung — Cargas',
      b: 'Vollständige Abfrage der Nota Simple aus dem Registro de la Propiedad. Hypotheken, Embargos, Nießbrauch und Servitutsrechte werden gesichtet, klassifiziert und auf Übergang vs. Erlöschen im Verwertungsverfahren geprüft.',
    },
    {
      t: 'Belegungsstatus — Estado de Ocupación',
      b: 'Lokale Beauftragte prüfen den faktischen Belegungs­zustand: Schuldnerselbstnutzung, Mietverhältnisse mit Sozialschutz oder okupas. Räumungsdauer und -kosten werden in jede Investitions­rechnung eingepreist.',
    },
    {
      t: 'Steuerschulden & Verwaltungs-Embargos',
      b: 'AEAT- und TGSS-Embargos können — anders als typische private Hypotheken — auf den Erwerber übergehen. Eine isolierte Registroabfrage genügt nicht; Catastro und Plusvalía Municipal werden ergänzend geprüft.',
    },
    {
      t: 'Verwertungs- und Steuerszenarien',
      b: 'Der reale Einstandspreis ergibt sich aus Erwerb, Notar- und Grundbuchkosten, ITP oder IVA, Räumungs- und Sanierungskosten. Jeder Erwerb wird vor Gebot oder Zeichnung vollständig durchmodelliert.',
    },
  ];

  const risks = [
    {
      n: '01',
      t: 'Vivienda Habitual',
      b: 'Bei Hauptwohnsitz-Objekten greifen erweiterte Schuldnerschutz­bestimmungen — erhöhtes Mindestgebot von 70 % des Schätzwerts (Art. 670 LEC), verlängerte Räumungs­fristen und in bestimmten Konstellationen Aussetzungs­möglichkeiten. Räumungsdauer in der Praxis: Wochen bis mehrere Jahre.',
    },
    {
      n: '02',
      t: 'AEAT- und TGSS-Embargos',
      b: 'Steuerliche Embargos der spanischen Steuerbehörde oder Sozial­versicherung können auf das Objekt durchschlagen und in bestimmten Fällen auf den Erwerber übergehen. Wir prüfen vor jedem Erwerb auf allen drei Verwaltungs­ebenen.',
    },
    {
      n: '03',
      t: 'Bietkonkurrenz im Subasta-Termin',
      b: 'Konkurrenzbieter können den Einstandspreis innerhalb kurzer Zeit erheblich verändern. Festes Maximalgebot, Strategie für die letzten Bietphasen und die Option der Cesión del Remate bestimmen die Qualität des Ergebnisses.',
    },
    {
      n: '04',
      t: 'Klauselmissbrauch in der Forderung',
      b: 'Beim Forderungserwerb übernimmt der Käufer alle Einreden des Schuldners. Spanische Gerichte haben Hypothekenklauseln in den letzten Jahren mehrfach als missbräuchlich eingestuft — eine sorgfältige Prüfung von Bestand, Höhe und Verjährung ist unerlässlich.',
    },
  ];

  return (
    <PageShell navActive="recht" navVariant="bone">
      {/* Lead */}
      <section style={{ background:'#FAF7F0', padding:`104px ${SIDE_PAD}px 56px` }}>
        <Container>
          <SectionMarker>Recht & Sorgfalt</SectionMarker>
          <h1 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:54, lineHeight:1.12,
            letterSpacing:'-0.008em', margin:'24px 0 32px', color:'#2A2A2A', maxWidth: 920,
          }}>
            Was im spanischen Recht<br/>
            <em style={{ color:'#3A3A3A' }}>anders ist.</em>
          </h1>
          <p style={{
            fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
            fontSize: 22, lineHeight:1.55, color:'#3A3A3A', margin:0, maxWidth: 840,
          }}>
            Im spanischen Versteigerungsrecht erwirbt der Ersteher das Objekt mitsamt aller eingetragenen
            Lasten und mit dem tatsächlichen Belegungs­zustand. Eine vollständige Prüfung vor jeder
            Gebots- oder Erwerbs­entscheidung ist nicht optional, sondern systembedingt zwingend.
          </p>
        </Container>
      </section>

      {/* DD blocks */}
      <section style={{ background:'#FAF7F0', padding:`56px ${SIDE_PAD}px 96px` }}>
        <Container>
          <div style={{
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.42em', fontSize:11, color:'#C9A961', marginBottom: 28,
          }}>— Due Diligence —</div>
          <h2 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:38, lineHeight:1.2,
            letterSpacing:'-0.005em', margin:'0 0 56px', color:'#2A2A2A', maxWidth: 800,
          }}>
            Was vor jedem Erwerb<br/>geprüft wird.
          </h2>

          <div style={{
            display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: '48px 64px',
          }}>
            {dd.map(it => (
              <article key={it.t}>
                <hr style={{ border:0, borderTop:'0.5px solid #C9A961', margin:'0 0 22px' }} />
                <h3 style={{
                  fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:26, lineHeight:1.25,
                  margin:'0 0 16px', color:'#2A2A2A', letterSpacing:'-0.005em',
                }}>{it.t}</h3>
                <p style={{
                  fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.72,
                  color:'#3A3A3A', margin:0,
                }}>{it.b}</p>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* Risks — navy */}
      <section style={{ background:'#0E1B2C', color:'#F5F1E8', padding:`96px ${SIDE_PAD}px 96px` }}>
        <Container>
          <div style={{
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.42em', fontSize:11, color:'#C9A961', marginBottom: 28,
          }}>— Risiken & Fallstricke —</div>
          <h2 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:38, lineHeight:1.2,
            letterSpacing:'-0.005em', margin:'0 0 56px', color:'#F5F1E8', maxWidth: 760,
          }}>
            Vier Bereiche,<br/>
            <em style={{ color:'rgba(245,241,232,0.85)' }}>die besondere Aufmerksamkeit verdienen.</em>
          </h2>

          <div style={{
            display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: '40px 64px',
          }}>
            {risks.map(it => (
              <article key={it.n} style={{
                paddingTop: 28, borderTop:'0.5px solid rgba(201,169,97,0.35)',
              }}>
                <div style={{
                  fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize: 30,
                  color:'#C9A961', marginBottom: 16, letterSpacing:'0.02em',
                }}>{it.n}</div>
                <h3 style={{
                  fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:24, lineHeight:1.25,
                  margin:'0 0 14px', color:'#F5F1E8',
                }}>{it.t}</h3>
                <p style={{
                  fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.72,
                  color:'rgba(245,241,232,0.72)', margin:0,
                }}>{it.b}</p>
              </article>
            ))}
          </div>
        </Container>
      </section>

      {/* Steuerstruktur — DACH-Käufer */}
      <section style={{ background:'#F5F1E8', padding:`96px ${SIDE_PAD}px 120px` }}>
        <Container>
          <SectionMarker>Steuerliche Strukturierung</SectionMarker>
          <h2 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:38, lineHeight:1.2,
            letterSpacing:'-0.005em', margin:'24px 0 56px', color:'#2A2A2A', maxWidth: 800,
          }}>
            Die Erwerbsstruktur steht<br/>
            <em style={{ color:'#3A3A3A' }}>vor dem Gebot fest, nicht danach.</em>
          </h2>

          <div style={{
            display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: '40px 64px',
          }}>
            {[
              ['Direkterwerb',
               'Natürliche Person mit DACH-Wohnsitz: ITP auf den Balearen progressiv gestaffelt, IRNR auf laufende Erträge, DBA-Anrechnung im Wohnsitzstaat.'],
              ['S.L. / Holding',
               'Spanische S.L. oder ausländische Kapitalgesellschaft für gewerbliche Verwertungsabsichten oder Portfolios. Körperschaftsteuer (IS), Quellensteuer und Sitzstaat-Behandlung werden modelliert.'],
              ['Liechtensteinische Familienstiftung',
               'Halteverbund über eine LI-Familienstiftung — Vermögensabsicherung, Nachfolge­steuerung und Reduktion der Anknüpfungspunkte zum deutschen Wegzugsteuerregime (§ 6 AStG).'],
              ['Beckham-Regelung',
               'Bei tatsächlicher Wohnsitz­verlagerung nach Spanien: Régimen Especial para Trabajadores Desplazados — zeitlich befristete pauschale Besteuerung. Frühzeitige Prüfung erforderlich.'],
            ].map(([t, b]) => (
              <article key={t}>
                <hr style={{ border:0, borderTop:'0.5px solid #C9A961', margin:'0 0 18px' }} />
                <h3 style={{
                  fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:24, lineHeight:1.25,
                  margin:'0 0 14px', color:'#2A2A2A',
                }}>{t}</h3>
                <p style={{
                  fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.72,
                  color:'#3A3A3A', margin:0,
                }}>{b}</p>
              </article>
            ))}
          </div>

          <div style={{
            marginTop: 80, padding: '32px 40px',
            background:'#FAF7F0', border:'0.5px solid rgba(201,169,97,0.45)',
            borderLeft:'2px solid #C9A961',
            display:'grid', gridTemplateColumns:'200px 1fr', gap: 48, alignItems:'baseline',
          }}>
            <div style={{
              fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
              letterSpacing:'0.42em', fontSize:10, color:'#C9A961',
            }}>Grundsatz</div>
            <p style={{
              fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
              fontSize: 20, lineHeight:1.55, color:'#2A2A2A', margin:0,
            }}>
              Wir empfehlen kein Gebot und keinen Forderungserwerb ohne abgeschlossene Due Diligence.
              Das gilt unabhängig davon, wie attraktiv der Schätzwert oder der angebotene
              Forderungs­kaufpreis erscheint.
            </p>
          </div>
        </Container>
      </section>
    </PageShell>
  );
};

/* ─── Page 5 — Über uns ─── */
const UeberUnsPage = () => (
  <PageShell navActive="ueberuns" navVariant="bone">
    <section style={{ background:'#FAF7F0', padding:`104px ${SIDE_PAD}px 24px` }}>
      <Container style={{ maxWidth: 760, textAlign:'center' }}>
        <SectionMarker>Über uns</SectionMarker>
        <h1 style={{
          fontFamily:'EB Garamond, serif', fontWeight:400, fontSize: 54, lineHeight:1.15,
          letterSpacing:'-0.008em', margin:'30px 0 48px', color:'#2A2A2A',
        }}>
          Zwei Häuser,<br/>
          <em style={{ color:'#3A3A3A' }}>ein Anspruch.</em>
        </h1>

        <div style={{ height:'0.5px', width:60, background:'#C9A961', margin:'0 auto 40px' }} />

        <p style={{
          fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
          fontSize: 24, lineHeight:1.55, color:'#2A2A2A', margin:'0 auto', maxWidth: 720,
        }}>
          „Wir begleiten DACH-Käufer auf einem Weg, den wir selbst gegangen sind —
          mit dem Anspruch, jeden Schritt so zu dokumentieren, dass unsere Mandanten
          Entscheidungen mit voller Klarheit treffen können."
        </p>
      </Container>
    </section>

    <section style={{ background:'#FAF7F0', padding:`64px ${SIDE_PAD}px 104px` }}>
      <Container style={{ maxWidth: 1080 }}>
        {/* Gemeinsames Founder-Portrait */}
        <div style={{
          width:'100%', aspectRatio: '4 / 3', background:'#0E1B2C',
          position:'relative', overflow:'hidden', marginBottom: 64,
          border:'1px solid rgba(42,42,42,0.10)',
        }}>
          <img src="assets/founders.png" alt="Felix Heller und Thomas Lauritsen, Palma de Mallorca"
            style={{
              width:'100%', height:'100%', objectFit:'cover',
              objectPosition:'50% 30%', display:'block', filter:'contrast(1.02)',
            }} />
          <div aria-hidden style={{
            position:'absolute', inset:0,
            background:'linear-gradient(180deg, rgba(14,27,44,0.00) 55%, rgba(14,27,44,0.35) 100%)',
            pointerEvents:'none',
          }} />
          <div aria-hidden style={{ position:'absolute', top:18, left:18, width:24, height:0.5, background:'#C9A961', opacity:0.85 }} />
          <div aria-hidden style={{ position:'absolute', top:18, left:18, width:0.5, height:24, background:'#C9A961', opacity:0.85 }} />
          <div aria-hidden style={{ position:'absolute', bottom:18, right:18, width:24, height:0.5, background:'#C9A961', opacity:0.85 }} />
          <div aria-hidden style={{ position:'absolute', bottom:18, right:18, width:0.5, height:24, background:'#C9A961', opacity:0.85 }} />
          <div style={{
            position:'absolute', bottom:24, left:24,
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.32em', fontSize:10, color:'#C9A961',
          }}>Felix Heller · Thomas Lauritsen — Palma de Mallorca</div>
        </div>

        {/* Bios — keine eigenen Portraits mehr */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80 }}>
          {[
            {
              name: 'Felix Heller',
              role: 'Co-Founder & Managing Partner · 50 %',
              bio: (
                <>
                  <p style={{
                    fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.75,
                    color:'#3A3A3A', margin:'0 0 14px',
                  }}>
                    Spezialisiert auf Cross-Border-Strukturierung, Liechtenstein-Stiftungen und
                    Beckham-Law-Mandate. Gründer der Schwesterfirma{' '}
                    <a href="https://vaduzadvisory.com" target="_blank" rel="noopener noreferrer"
                      style={{ color:'#3A3A3A', borderBottom:'0.5px solid #C9A961', textDecoration:'none' }}>
                      Vaduz Advisory
                    </a>{' '}
                    in Vaduz / Palma — operatives Vehikel für Strukturierung und Steuern.
                  </p>
                  <p style={{
                    fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.75,
                    color:'#3A3A3A', margin:0,
                  }}>
                    Über fünfzehn Jahre Erfahrung in Operations und Vermögens­strukturierung. Lebt mit
                    seiner Familie auf Mallorca und unterhält ein etabliertes Netzwerk in Recht,
                    Steuern und Immobilien.
                  </p>
                </>
              ),
              loc: 'Palma de Mallorca',
            },
            {
              name: 'Thomas Lauritsen',
              role: 'Co-Founder & Managing Partner · 50 %',
              bio: (
                <>
                  <p style={{
                    fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.75,
                    color:'#3A3A3A', margin:'0 0 14px',
                  }}>
                    Unternehmer mit Hintergrund in Finance und Tech. Privatinvestor mit eigenem
                    Track Record in Immobilien­transaktionen in Dubai und Südeuropa.
                  </p>
                  <p style={{
                    fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.75,
                    color:'#3A3A3A', margin:0,
                  }}>
                    Begleitete mehrere Property Deals als Consultant und bringt die operative Sicht
                    des Käufers in jedes Mandat ein.
                  </p>
                </>
              ),
              loc: 'Palma de Mallorca · Hannover',
            },
          ].map(p => (
            <article key={p.name}>
              <hr style={{ border:0, borderTop:'0.5px solid #C9A961', margin:'0 0 18px' }} />
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom: 12,
              }}>{p.role}</div>
              <h3 style={{
                fontFamily:'EB Garamond, serif', fontWeight:400, fontSize: 30, lineHeight:1.2,
                margin:'0 0 22px', color:'#2A2A2A', letterSpacing:'-0.005em',
              }}>{p.name}</h3>
              {p.bio}
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                letterSpacing:'0.32em', fontSize:10, color:'#555', marginTop: 18,
              }}>{p.loc}</div>
            </article>
          ))}
        </div>

        {/* network strip */}
        <div style={{
          marginTop: 88, paddingTop: 36,
          borderTop:'1px solid rgba(42,42,42,0.12)',
          display:'grid', gridTemplateColumns:'200px 1fr', gap: 48, alignItems:'baseline',
        }}>
          <div style={{
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.42em', fontSize:10, color:'#C9A961',
          }}>Netzwerk</div>
          <p style={{
            fontFamily:'DM Sans, sans-serif', fontSize:15, lineHeight:1.75,
            color:'#3A3A3A', margin:0, maxWidth: 760,
          }}>
            Lokale Partneranwälte, Notare, Steuerberater und Gutachter auf Mallorca,
            etablierte Plattform­zugänge zur BOE in Madrid, Bankenpartner in Vaduz sowie
            Treuhand­partner in Liechtenstein.
          </p>
        </div>
      </Container>
    </section>
  </PageShell>
);

/* ─── Page 6 — Kontakt + Anfrage-Briefing ─── */

/* Cal.com Inline-Embed — brand-tuned, no Cal.com wordmark in free tier */
const CAL_LINK = 'hl-capital/erstgespraech';
const CAL_BOOKING_URL = 'https://cal.com/' + CAL_LINK;

const CalcomEmbed = () => {
  useEffectPages(() => {
    if (typeof window === 'undefined') return;

    /* Cal.com embed bootstrap (offizielles Snippet, leicht angepasst) */
    (function (C, A, L) {
      let p = function (a, ar) { a.q.push(ar); };
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal;
        let ar = arguments;
        if (!cal.loaded) {
          cal.ns = {};
          cal.q = cal.q || [];
          d.head.appendChild(d.createElement('script')).src = A;
          cal.loaded = true;
        }
        if (ar[0] === L) {
          const api = function () { p(api, arguments); };
          const namespace = ar[1];
          api.q = api.q || [];
          if (typeof namespace === 'string') {
            cal.ns[namespace] = cal.ns[namespace] || api;
            p(cal.ns[namespace], ar);
            p(cal, ['initNamespace', namespace]);
          } else { p(cal, ar); }
          return;
        }
        p(cal, ar);
      };
    })(window, 'https://app.cal.com/embed/embed.js', 'init');

    window.Cal('init', 'hl', { origin: 'https://app.cal.com' });

    window.Cal.ns.hl('inline', {
      elementOrSelector: '#hl-cal-inline',
      config: { layout: 'month_view' },
      calLink: CAL_LINK,
    });

    window.Cal.ns.hl('ui', {
      theme: 'light',
      cssVarsPerTheme: {
        light: {
          'cal-brand': '#C9A961',
          'cal-bg': '#FAF7F0',
          'cal-bg-emphasis': '#F5F1E8',
          'cal-text': '#2A2A2A',
          'cal-text-emphasis': '#0E1B2C',
        },
      },
      hideEventTypeDetails: false,
      layout: 'month_view',
    });
  }, []);

  return (
    <div id="hl-cal-inline" style={{ minWidth: 320, width: '100%', minHeight: 780 }} />
  );
};

/* Form atom: Chip — works for radio and checkbox */
const Chip = ({ name, value, label, type = 'checkbox', checked, onChange }) => (
  <label style={{
    display:'inline-flex', alignItems:'center',
    padding:'10px 18px',
    border: `0.5px solid ${checked ? '#C9A961' : 'rgba(42,42,42,0.22)'}`,
    background: checked ? 'rgba(201,169,97,0.12)' : 'transparent',
    color: checked ? '#0E1B2C' : '#2A2A2A',
    fontFamily:'DM Sans, sans-serif', fontSize:13, fontWeight: 500,
    letterSpacing:'0.04em', cursor:'pointer', userSelect:'none',
    transition:'background 150ms ease, border-color 150ms ease',
  }}>
    <input
      type={type} name={name} value={value}
      checked={checked} onChange={onChange}
      style={{ position:'absolute', opacity:0, pointerEvents:'none', width:0, height:0 }}
    />
    {label}
  </label>
);

const FormBlock = ({ label, hint, children }) => (
  <div style={{ marginBottom: 36 }}>
    <div style={{
      fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
      letterSpacing:'0.32em', fontSize:11, color:'#2A2A2A', marginBottom:14,
    }}>
      {label}
      {hint && (
        <span style={{
          marginLeft: 12, color:'rgba(42,42,42,0.5)', fontWeight:400,
          textTransform:'none', letterSpacing:'0.02em', fontSize:12,
        }}>({hint})</span>
      )}
    </div>
    {children}
  </div>
);

const ChipRow = ({ children }) => (
  <div style={{ display:'flex', flexWrap:'wrap', gap: 10 }}>{children}</div>
);

const TextField = ({ name, type = 'text', placeholder, value, onChange, required = false }) => (
  <input
    name={name} type={type} placeholder={placeholder} value={value} onChange={onChange} required={required}
    style={{
      width:'100%', padding:'14px 16px',
      border:'0.5px solid rgba(42,42,42,0.25)', background:'#FAF7F0', color:'#2A2A2A',
      fontFamily:'DM Sans, sans-serif', fontSize:14, letterSpacing:'0.01em',
      outline:'none', transition:'border-color 150ms ease',
    }}
    onFocus={e => e.target.style.borderColor = '#C9A961'}
    onBlur={e => e.target.style.borderColor = 'rgba(42,42,42,0.25)'}
  />
);

const TextArea = ({ name, placeholder, value, onChange, rows = 4 }) => (
  <textarea
    name={name} placeholder={placeholder} value={value} onChange={onChange} rows={rows}
    style={{
      width:'100%', padding:'14px 16px',
      border:'0.5px solid rgba(42,42,42,0.25)', background:'#FAF7F0', color:'#2A2A2A',
      fontFamily:'DM Sans, sans-serif', fontSize:14, letterSpacing:'0.01em',
      outline:'none', resize:'vertical', minHeight: 96,
    }}
    onFocus={e => e.target.style.borderColor = '#C9A961'}
    onBlur={e => e.target.style.borderColor = 'rgba(42,42,42,0.25)'}
  />
);

const AnfrageBriefing = () => {
  const [data, setData] = useStatePages({
    weg: '',
    volumen: '',
    objekttyp: [],
    lagen: [],
    struktur: [],
    wohnsitz: '',
    zeit: '',
    name: '',
    email: '',
    telefon: '',
    nachricht: '',
  });
  const [status, setStatus] = useStatePages('idle'); // idle | sending | sent

  const setSingle = (field) => (e) => setData(d => ({ ...d, [field]: e.target.value }));
  const toggleMulti = (field, value) => () =>
    setData(d => ({
      ...d,
      [field]: d[field].includes(value) ? d[field].filter(v => v !== value) : [...d[field], value],
    }));

  const sendMailto = () => {
    const lines = [
      `--- Mandanten-Briefing · Heller Lauritsen Capital ---`,
      ``,
      `Erwerbsweg:        ${data.weg || '—'}`,
      `Investitionsvolumen: ${data.volumen || '—'}`,
      `Objekttyp:         ${data.objekttyp.join(', ') || '—'}`,
      `Bevorzugte Lagen:  ${data.lagen.join(', ') || '—'}`,
      `Strukturierung:    ${data.struktur.join(', ') || '—'}`,
      `Wohnsitz:          ${data.wohnsitz || '—'}`,
      `Zeitrahmen:        ${data.zeit || '—'}`,
      ``,
      `Name:              ${data.name || '—'}`,
      `E-Mail:            ${data.email}`,
      `Telefon / WhatsApp: ${data.telefon || '—'}`,
      ``,
      `Nachricht:`,
      data.nachricht || '—',
    ];
    const subject = encodeURIComponent('Mandanten-Briefing · Heller Lauritsen Capital');
    const body = encodeURIComponent(lines.join('\n'));
    window.location.href = `mailto:kontakt@hellerlauritsencapital.com?subject=${subject}&body=${body}`;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!data.email || !data.weg) return;
    setStatus('sending');

    if (SHEET_URL) {
      try {
        await fetch(SHEET_URL, {
          method: 'POST',
          mode: 'no-cors',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ...data, userAgent: navigator.userAgent }),
        });
        setStatus('sent');
        return;
      } catch (err) {
        // Sheet nicht erreichbar → mailto-Fallback, damit kein Briefing verloren geht
        sendMailto();
        setTimeout(() => setStatus('sent'), 600);
        return;
      }
    }

    // Solange SHEET_URL leer ist, läuft alles über mailto
    sendMailto();
    setTimeout(() => setStatus('sent'), 600);
  };

  return (
    <form onSubmit={handleSubmit} style={{
      background:'#FAF7F0', border:'0.5px solid rgba(201,169,97,0.45)',
      padding: '64px 72px', position:'relative', maxWidth: 1080,
    }}>
      <div style={{ textAlign:'center', marginBottom: 56 }}>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
          letterSpacing:'0.42em', fontSize:11, color:'#C9A961', marginBottom:18,
        }}>— Mandanten-Briefing —</div>
        <h2 style={{
          fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:38, lineHeight:1.2,
          margin:'0 0 18px', color:'#2A2A2A', letterSpacing:'-0.005em',
        }}>
          Erzählen Sie uns,<br/>
          <em style={{ color:'#3A3A3A' }}>was Sie suchen.</em>
        </h2>
        <p style={{
          fontFamily:'DM Sans, sans-serif', fontSize:15, lineHeight:1.7, color:'#3A3A3A',
          maxWidth: 640, margin: '0 auto',
        }}>
          Je präziser das Briefing, desto gezielter können wir aus unserem Netzwerk filtern.
          Alle Angaben sind freiwillig — Pflicht sind nur Erwerbsweg und E-Mail.
        </p>
        <p style={{
          fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:14, color:'rgba(42,42,42,0.55)',
          marginTop: 14,
        }}>
          Vertraulich. Ohne Verpflichtung. Antwort innerhalb von 24 Stunden.
        </p>
      </div>

      {/* Weg */}
      <FormBlock label="Erwerbsweg *">
        <ChipRow>
          {[
            ['klassisch','Klassischer Erwerb'],
            ['subasta','Subasta Pública'],
            ['cesion','Cesión de Crédito'],
            ['offmarket','Off-Market'],
            ['beratung','Erst beraten lassen'],
          ].map(([v,l]) => (
            <Chip key={v} type="radio" name="weg" value={v} label={l}
              checked={data.weg === v} onChange={setSingle('weg')} />
          ))}
        </ChipRow>
      </FormBlock>

      {/* Volumen */}
      <FormBlock label="Investitionsvolumen">
        <ChipRow>
          {[
            ['200-500','200 k – 500 k €'],
            ['500-1000','500 k – 1 Mio €'],
            ['1000-2000','1 – 2 Mio €'],
            ['2000-5000','2 – 5 Mio €'],
            ['5000+','5 Mio € +'],
            ['offen','Noch offen'],
          ].map(([v,l]) => (
            <Chip key={v} type="radio" name="volumen" value={v} label={l}
              checked={data.volumen === v} onChange={setSingle('volumen')} />
          ))}
        </ChipRow>
      </FormBlock>

      {/* Objekttyp */}
      <FormBlock label="Objekttyp" hint="Mehrfachauswahl">
        <ChipRow>
          {[
            ['villa','Villa'],
            ['finca','Finca / Landhaus'],
            ['wohnung','Wohnung'],
            ['stadthaus','Stadthaus'],
            ['penthouse','Penthouse'],
            ['grundstueck','Grundstück'],
            ['renovierung','Renovierungs­objekt'],
            ['gewerbe','Gewerbe / Hotel'],
            ['portfolio','Portfolio'],
          ].map(([v,l]) => (
            <Chip key={v} type="checkbox" name="objekttyp" value={v} label={l}
              checked={data.objekttyp.includes(v)} onChange={toggleMulti('objekttyp', v)} />
          ))}
        </ChipRow>
      </FormBlock>

      {/* Lagen */}
      <FormBlock label="Bevorzugte Lagen" hint="Mehrfachauswahl">
        <ChipRow>
          {[
            ['palma','Palma & Umgebung'],
            ['suedwesten','Südwesten (Santa Ponsa, Calvià)'],
            ['andratx','Andratx & Port d’Andratx'],
            ['nordosten','Nordosten (Alcúdia, Pollença)'],
            ['osten','Osten (Manacor, Cala Millor)'],
            ['zentrum','Zentrum (Marratxí, Sencelles, Inca)'],
            ['sueden','Süden (Llucmajor, Santanyí, Ses Salines)'],
            ['offen','Beratungsoffen'],
          ].map(([v,l]) => (
            <Chip key={v} type="checkbox" name="lagen" value={v} label={l}
              checked={data.lagen.includes(v)} onChange={toggleMulti('lagen', v)} />
          ))}
        </ChipRow>
      </FormBlock>

      {/* Struktur */}
      <FormBlock label="Strukturierungsbedarf" hint="optional, Mehrfachauswahl">
        <ChipRow>
          {[
            ['direkt','Direkterwerb (natürliche Person)'],
            ['sl','Spanische S.L. / Holding'],
            ['stiftung','LI-Familienstiftung'],
            ['beckham','Beckham-Regelung'],
            ['wegzug','Wegzugsteuer (§ 6 AStG)'],
            ['dba','DBA-Optimierung'],
            ['eigennutzung','Reine Eigennutzung'],
            ['rendite','Verwertung / Rendite'],
            ['nachfolge','Nachfolge / Generationen'],
          ].map(([v,l]) => (
            <Chip key={v} type="checkbox" name="struktur" value={v} label={l}
              checked={data.struktur.includes(v)} onChange={toggleMulti('struktur', v)} />
          ))}
        </ChipRow>
      </FormBlock>

      {/* Row: Wohnsitz + Zeit */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48 }}>
        <FormBlock label="Wohnsitz">
          <ChipRow>
            {[
              ['de','Deutschland'],
              ['at','Österreich'],
              ['ch','Schweiz'],
              ['li','Liechtenstein'],
              ['anders','Anderer'],
            ].map(([v,l]) => (
              <Chip key={v} type="radio" name="wohnsitz" value={v} label={l}
                checked={data.wohnsitz === v} onChange={setSingle('wohnsitz')} />
            ))}
          </ChipRow>
        </FormBlock>

        <FormBlock label="Zeitrahmen">
          <ChipRow>
            {[
              ['sofort','Sofort'],
              ['3-6m','3 – 6 Monate'],
              ['jahr','Dieses Jahr'],
              ['exploration','Erst sondieren'],
            ].map(([v,l]) => (
              <Chip key={v} type="radio" name="zeit" value={v} label={l}
                checked={data.zeit === v} onChange={setSingle('zeit')} />
            ))}
          </ChipRow>
        </FormBlock>
      </div>

      {/* Row: Name + E-Mail */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 32 }}>
        <FormBlock label="Name">
          <TextField name="name" placeholder="Vor- & Nachname"
            value={data.name} onChange={setSingle('name')} />
        </FormBlock>
        <FormBlock label="E-Mail *">
          <TextField name="email" type="email" placeholder="ihre@email.com" required
            value={data.email} onChange={setSingle('email')} />
        </FormBlock>
      </div>

      <FormBlock label="Telefon / WhatsApp" hint="optional, schnellster Draht">
        <TextField name="telefon" type="tel" placeholder="+49 …"
          value={data.telefon} onChange={setSingle('telefon')} />
      </FormBlock>

      <FormBlock label="Erzählen Sie uns mehr" hint="optional">
        <TextArea name="nachricht"
          placeholder="Konkretes Objekt im Blick? Steuerliche Ausgangslage? Zeitlicher Druck? Was sollten wir wissen?"
          value={data.nachricht} onChange={setSingle('nachricht')} rows={4} />
      </FormBlock>

      <button type="submit" disabled={status === 'sending'}
        style={{
          width:'100%', marginTop: 24, padding:'20px 32px',
          background:'#0E1B2C', color:'#C9A961',
          border:'1px solid #C9A961',
          fontFamily:'DM Sans, sans-serif', fontWeight:500,
          textTransform:'uppercase', letterSpacing:'0.32em', fontSize:12,
          cursor: status === 'sending' ? 'wait' : 'pointer',
          transition:'background 200ms ease, color 200ms ease',
          display:'inline-flex', alignItems:'center', justifyContent:'center', gap: 16,
        }}
        onMouseEnter={e => { e.currentTarget.style.background = '#C9A961'; e.currentTarget.style.color = '#0E1B2C'; }}
        onMouseLeave={e => { e.currentTarget.style.background = '#0E1B2C'; e.currentTarget.style.color = '#C9A961'; }}>
        {status === 'sent'
          ? 'Danke — Ihr Briefing ist auf dem Weg.'
          : 'Vertrauliches Erstgespräch anfragen'}
        <span style={{ fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:18, letterSpacing:0 }}>→</span>
      </button>

      <p style={{
        textAlign:'center', marginTop: 20,
        fontFamily:'DM Sans, sans-serif', fontSize:11.5, color:'rgba(42,42,42,0.55)',
        letterSpacing:'0.04em', lineHeight: 1.7,
      }}>
        Ihr Briefing wird über Ihr Mailprogramm an kontakt@hellerlauritsencapital.com gesendet —
        keine Speicherung auf der Website. Mit dem Absenden akzeptieren Sie unsere{' '}
        <a href="datenschutz.html" style={{ color:'#C9A961', textDecoration:'underline' }}>Datenschutzerklärung</a>.
      </p>
    </form>
  );
};

const KontaktPage = () => (
  <PageShell navActive="kontakt">
    {/* Hero */}
    <section style={{
      background:'#0E1B2C', color:'#F5F1E8',
      padding: `120px ${SIDE_PAD}px 100px`, position:'relative', overflow:'hidden',
    }}>
      <div aria-hidden style={{
        position:'absolute', inset:0, pointerEvents:'none',
        backgroundImage: 'linear-gradient(to right, rgba(201,169,97,0.06) 1px, transparent 1px)',
        backgroundSize: '160px 100%',
      }} />

      <Container style={{ position:'relative' }}>
        <div style={{ maxWidth: 980 }}>
          <div style={{
            fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
            letterSpacing:'0.42em', fontSize:11, color:'#C9A961', marginBottom: 56,
          }}>— Kontakt —</div>

          <h1 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize: 60, lineHeight:1.12,
            letterSpacing:'-0.008em', margin:0, color:'#F5F1E8',
          }}>
            Ein Gespräch beginnt<br/>
            <em style={{ color:'rgba(245,241,232,0.85)' }}>mit einer Nachricht.</em>
          </h1>

          <p style={{
            fontFamily:'EB Garamond, serif', fontStyle:'italic', fontWeight:400,
            fontSize: 22, color:'rgba(245,241,232,0.62)', marginTop: 30, marginBottom: 0,
            maxWidth: 760, lineHeight:1.5,
          }}>
            Wir antworten innerhalb von 24 Stunden — vertraulich und ohne Verpflichtung.
          </p>

          <div style={{ marginTop: 64, display:'flex', gap: 18, flexWrap:'wrap' }}>
            <a href={CAL_BOOKING_URL}
               target="_blank" rel="noopener noreferrer"
               style={{
                 display:'inline-flex', alignItems:'center', gap:14,
                 padding:'16px 26px', border:'1px solid #C9A961',
                 background:'#C9A961', color:'#0E1B2C',
                 fontFamily:'DM Sans, sans-serif', fontWeight:500,
                 textTransform:'uppercase', letterSpacing:'0.32em', fontSize:11,
                 textDecoration:'none', cursor:'pointer',
               }}>
              Termin im Kalender buchen
              <span style={{ fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:16, letterSpacing:0 }}>→</span>
            </a>
            <a href="mailto:kontakt@hellerlauritsencapital.com" style={{
              display:'inline-flex', alignItems:'center', gap: 14,
              padding:'16px 26px', border:'1px solid rgba(245,241,232,0.30)',
              color:'rgba(245,241,232,0.82)', textDecoration:'none',
              fontFamily:'DM Sans, sans-serif', fontWeight:500,
              textTransform:'uppercase', letterSpacing:'0.32em', fontSize:11,
            }}>Stattdessen schreiben</a>
          </div>
        </div>

        {/* contact card grid */}
        <div style={{
          position:'relative', marginTop: 96,
          display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 56,
          borderTop:'1px solid rgba(201,169,97,0.25)', paddingTop: 36,
        }}>
          {[
            ['E-Mail',     'kontakt@hellerlauritsencapital.com', 'Erste Ansprache, vertraulich'],
            ['Mallorca',   'Palma de Mallorca',                  'Operativer Sitz · Illes Balears'],
            ['Deutschland','Hannover',                           'Termine nach Vereinbarung'],
          ].map(([label, line1, line2]) => (
            <div key={label}>
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
                letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom: 16,
              }}>{label}</div>
              <div style={{
                fontFamily:'EB Garamond, serif', fontWeight:400, fontSize: 22, lineHeight:1.3,
                color:'#F5F1E8', marginBottom: 8, letterSpacing:'-0.005em',
                wordBreak:'break-word',
              }}>{line1}</div>
              <div style={{
                fontFamily:'DM Sans, sans-serif', fontSize:13, lineHeight:1.6,
                color:'rgba(245,241,232,0.55)',
              }}>{line2}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>

    {/* Briefing-Form */}
    <section style={{ background:'#F5F1E8', padding:`104px ${SIDE_PAD}px 96px` }}>
      <Container style={{ display:'grid', placeItems:'center' }}>
        <AnfrageBriefing />
      </Container>
    </section>

    {/* Direkt-Buchung — Calendly Embed */}
    <section style={{ background:'#FAF7F0', padding:`80px ${SIDE_PAD}px 120px` }}>
      <Container style={{ maxWidth: 1080 }}>
        <div style={{ textAlign:'center', marginBottom: 48 }}>
          <SectionMarker>Direkt buchen</SectionMarker>
          <h2 style={{
            fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:36, lineHeight:1.2,
            margin:'24px 0 16px', color:'#2A2A2A', letterSpacing:'-0.005em',
          }}>
            Lieber direkt einen Slot wählen?
          </h2>
          <p style={{
            fontFamily:'DM Sans, sans-serif', fontSize:15, lineHeight:1.7, color:'#3A3A3A',
            maxWidth: 580, margin:'0 auto',
          }}>
            30 Minuten · vertraulich · auf Deutsch. Wählen Sie einen Termin direkt aus
            unserem Kalender — ohne vorher ein Briefing auszufüllen.
          </p>
        </div>
        <div style={{
          border:'0.5px solid rgba(201,169,97,0.45)',
          background:'#FAF7F0',
          padding: 4,
        }}>
          <CalcomEmbed />
        </div>
      </Container>
    </section>
  </PageShell>
);

/* ─── Page 7 — Impressum (Aviso Legal nach LSSI 34/2002 Art. 10) ─── */

const LegalSection = ({ title, children }) => (
  <section style={{ marginBottom: 56 }}>
    <h2 style={{
      fontFamily:'EB Garamond, serif', fontWeight:400, fontSize: 26, lineHeight:1.25,
      margin:'0 0 18px', color:'#2A2A2A', letterSpacing:'-0.005em',
    }}>{title}</h2>
    <div style={{
      fontFamily:'DM Sans, sans-serif', fontSize:14.5, lineHeight:1.75, color:'#3A3A3A',
    }}>{children}</div>
  </section>
);

const LegalKV = ({ k, v }) => (
  <div style={{
    display:'grid', gridTemplateColumns:'200px 1fr', gap: 28,
    padding:'12px 0', borderTop:'0.5px solid rgba(42,42,42,0.10)',
    alignItems:'baseline',
  }}>
    <div style={{
      fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
      letterSpacing:'0.32em', fontSize:10, color:'#555',
    }}>{k}</div>
    <div style={{ fontFamily:'DM Sans, sans-serif', fontSize:14.5, color:'#2A2A2A', lineHeight:1.65 }}>{v}</div>
  </div>
);

const ImpressumPage = () => (
  <PageShell navActive={null} navVariant="bone">
    <section style={{ background:'#FAF7F0', padding:`104px ${SIDE_PAD}px 120px` }}>
      <Container style={{ maxWidth: 880 }}>
        <SectionMarker>Impressum</SectionMarker>
        <h1 style={{
          fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:48, lineHeight:1.15,
          letterSpacing:'-0.008em', margin:'24px 0 56px', color:'#2A2A2A',
        }}>
          Aviso Legal —<br/>
          <em style={{ color:'#3A3A3A' }}>Informationspflicht nach LSSI 34/2002 Art. 10.</em>
        </h1>

        <LegalSection title="Anbieter">
          <LegalKV k="Firmierung" v="Heller Lauritsen Capital S.L." />
          <LegalKV k="Sitz" v="Palma de Mallorca · Illes Balears · España" />
          <LegalKV k="E-Mail" v="kontakt@hellerlauritsencapital.com" />
          <LegalKV k="Web" v="hellerlauritsencapital.com" />
        </LegalSection>

        <LegalSection title="Geschäftsführung & Gesellschafter">
          <LegalKV k="Co-Founder & Managing Partner" v="Felix Heller (50 %)" />
          <LegalKV k="Co-Founder & Managing Partner" v="Thomas Lauritsen (50 %)" />
          <LegalKV k="Vertretungsbefugnis" v="Beide Geschäftsführer einzelvertretungsberechtigt." />
        </LegalSection>

        <LegalSection title="Registereintragung">
          <LegalKV k="Registro Mercantil" v="[Registro Mercantil de Palma de Mallorca, Tomo, Folio, Hoja]" />
          <LegalKV k="NIF / CIF" v="[ES B-XXXXXXXX]" />
          <p style={{ marginTop: 18, fontStyle:'italic', color:'rgba(42,42,42,0.55)' }}>
            Registereintragung und CIF werden nach Vorliegen der finalen Daten ergänzt.
          </p>
        </LegalSection>

        <LegalSection title="Berufsrechtliche Hinweise">
          <p style={{ margin:'0 0 16px' }}>
            Heller Lauritsen Capital S.L. erbringt <strong>keine Rechtsberatung</strong> im Sinne
            der spanischen Estatuto General de la Abogacía Española (EGAE) und des deutschen
            Rechtsdienstleistungsgesetzes (RDG).
          </p>
          <p style={{ margin:'0 0 16px' }}>
            Heller Lauritsen Capital S.L. erbringt <strong>keine steuerberatende Tätigkeit</strong>
            im Sinne REAF / Asesores Fiscales bzw. des deutschen Steuerberatungsgesetzes (StBerG).
          </p>
          <p style={{ margin:'0 0 16px' }}>
            Heller Lauritsen Capital S.L. ist <strong>kein Kreditvermittler</strong> im Sinne der
            Ley 5/2019 reguladora de los contratos de crédito inmobiliario (LCCI) und vermittelt
            keine Verbraucher-Hypothekendarlehen.
          </p>
          <p style={{ margin:0 }}>
            Sämtliche rechtlichen, steuerlichen und finanzierungs­bezogenen Leistungen werden
            ausschließlich über beauftragte Abogados, Asesores Fiscales und Hypothekenbanken
            im eigenen Mandatsverhältnis des Mandanten erbracht.
          </p>
        </LegalSection>

        <LegalSection title="Inhaltlicher Hinweis & Haftung">
          <p style={{ margin:'0 0 16px' }}>
            Inhalte dieser Website dienen ausschließlich der allgemeinen Information.
            Sie ersetzen keine individuelle rechtliche oder steuerliche Beratung und stellen
            kein Angebot zum Erwerb konkreter Forderungen oder Immobilien dar. Konkrete Mandate
            werden ausschließlich auf Basis schriftlicher Vereinbarungen übernommen.
          </p>
          <p style={{ margin:0 }}>
            Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte
            externer Links. Für den Inhalt verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.
          </p>
        </LegalSection>

        <LegalSection title="Online-Streitbeilegung">
          <p style={{ margin:'0 0 16px' }}>
            Die Europäische Kommission stellt eine Plattform zur Online-Streit­beilegung bereit,
            erreichbar unter{' '}
            <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener noreferrer"
               style={{ color:'#C9A961' }}>ec.europa.eu/consumers/odr</a>.
          </p>
          <p style={{ margin:0 }}>
            Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeilegungs­verfahren vor
            einer Verbraucher­schlichtungsstelle teilzunehmen.
          </p>
        </LegalSection>

        <p style={{
          marginTop: 56, fontFamily:'DM Sans, sans-serif', fontSize:12,
          color:'rgba(42,42,42,0.5)', letterSpacing:'0.04em',
        }}>
          Stand: Mai 2026 · Heller Lauritsen Capital S.L., Palma de Mallorca
        </p>
      </Container>
    </section>
  </PageShell>
);

/* ─── Page 8 — Datenschutz (RGPD / DSGVO) ─── */
const DatenschutzPage = () => (
  <PageShell navActive={null} navVariant="bone">
    <section style={{ background:'#FAF7F0', padding:`104px ${SIDE_PAD}px 120px` }}>
      <Container style={{ maxWidth: 880 }}>
        <SectionMarker>Datenschutz</SectionMarker>
        <h1 style={{
          fontFamily:'EB Garamond, serif', fontWeight:400, fontSize:48, lineHeight:1.15,
          letterSpacing:'-0.008em', margin:'24px 0 32px', color:'#2A2A2A',
        }}>
          Datenschutzerklärung —<br/>
          <em style={{ color:'#3A3A3A' }}>RGPD / DSGVO.</em>
        </h1>

        <p style={{
          fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:20, lineHeight:1.55,
          color:'#3A3A3A', marginBottom: 56, maxWidth: 760,
        }}>
          Diese Erklärung informiert Sie nach Art. 13 DSGVO und Art. 11 LOPDGDD darüber, welche
          personenbezogenen Daten wir verarbeiten, zu welchem Zweck und auf welcher Rechts­grundlage.
        </p>

        <LegalSection title="Verantwortlicher">
          <LegalKV k="Firmierung" v="Heller Lauritsen Capital S.L." />
          <LegalKV k="Sitz" v="Palma de Mallorca · Illes Balears · España" />
          <LegalKV k="E-Mail" v="kontakt@hellerlauritsencapital.com" />
        </LegalSection>

        <LegalSection title="Welche Daten wir erheben">
          <p style={{ margin:'0 0 16px' }}>
            Wenn Sie unser Anfrage­formular ausfüllen, übermitteln Sie uns folgende Daten:
            Name (optional), E-Mail-Adresse (Pflichtfeld), Telefon­nummer (optional) sowie die
            von Ihnen angegebenen Briefing-Informationen — Erwerbsweg, Investitions­volumen,
            Objekttyp, bevorzugte Lagen, Strukturierungs­bedarf, Wohnsitz, Zeitrahmen und
            Freitext.
          </p>
          <p style={{ margin:0 }}>
            Darüber hinaus werden beim Aufruf der Website durch Ihren Hosting-Provider
            technisch notwendige Server-Logfiles erhoben (IP-Adresse, Zeitpunkt, abgerufene
            Ressource, User-Agent). Diese werden für maximal sieben Tage zur technischen
            Sicherheit gespeichert und nicht mit anderen Daten verknüpft.
          </p>
        </LegalSection>

        <LegalSection title="Form der Datenübermittlung">
          <p style={{ margin: 0 }}>
            Das Anfrage­formular dieser Website nutzt <strong>keinen externen Server</strong>.
            Beim Absenden öffnet sich Ihre lokale E-Mail-Software und das Briefing wird als
            E-Mail an kontakt@hellerlauritsencapital.com vorbereitet — Sie versenden die
            Nachricht selbst. Die Daten verlassen unsere Website nicht über andere Kanäle.
          </p>
        </LegalSection>

        <LegalSection title="Zweck und Rechtsgrundlage">
          <p style={{ margin:'0 0 16px' }}>
            Die Verarbeitung Ihrer Daten erfolgt zur Anbahnung und Durchführung eines Mandats
            (Art. 6 Abs. 1 lit. b DSGVO — vorvertragliche Maßnahmen) sowie auf Grundlage
            Ihrer Kontakt­anfrage (Art. 6 Abs. 1 lit. a DSGVO — Einwilligung).
          </p>
          <p style={{ margin: 0 }}>
            Eine Verarbeitung zu Marketing-, Profiling- oder automatisierten Entscheidungs­zwecken
            findet nicht statt.
          </p>
        </LegalSection>

        <LegalSection title="Empfänger Ihrer Daten">
          <p style={{ margin: 0 }}>
            Eine Weitergabe an Dritte erfolgt nur, wenn dies zur Mandats­durchführung erforderlich
            ist — etwa an beauftragte Partner­anwälte (Abogados), Steuer­berater (Asesores Fiscales)
            oder Hypotheken­banken — und nur nach Ihrer ausdrücklichen Beauftragung.
          </p>
        </LegalSection>

        <LegalSection title="Speicherdauer">
          <p style={{ margin:'0 0 16px' }}>
            Anfragen, die nicht zu einem Mandat führen, werden bis zu 12 Monate nach letzter
            Kontakt­aufnahme aufbewahrt und anschließend gelöscht.
          </p>
          <p style={{ margin: 0 }}>
            Mandats­daten werden nach Maßgabe der spanischen und deutschen handels- und
            steuerrechtlichen Aufbewahrungs­fristen (in der Regel sechs Jahre) aufbewahrt.
          </p>
        </LegalSection>

        <LegalSection title="Cookies und Tracking">
          <p style={{ margin: 0 }}>
            Diese Website setzt <strong>keine Tracking-, Marketing- oder Analytics-Cookies</strong>.
            Es findet keine Verarbeitung Ihrer Daten zu Reichweiten- oder Werbe­zwecken statt.
            Eine Einbindung von Diensten Dritter (Google Analytics, Meta Pixel o. ä.) erfolgt nicht.
          </p>
        </LegalSection>

        <LegalSection title="Ihre Rechte">
          <p style={{ margin:'0 0 16px' }}>
            Sie haben jederzeit das Recht auf:
          </p>
          <ul style={{ margin:'0 0 16px', paddingLeft: 24, lineHeight: 1.85 }}>
            <li>Auskunft über die Sie betreffenden Daten (Art. 15 DSGVO)</li>
            <li>Berichtigung unrichtiger Daten (Art. 16 DSGVO)</li>
            <li>Löschung Ihrer Daten (Art. 17 DSGVO)</li>
            <li>Einschränkung der Verarbeitung (Art. 18 DSGVO)</li>
            <li>Datenübertragbarkeit (Art. 20 DSGVO)</li>
            <li>Widerspruch gegen die Verarbeitung (Art. 21 DSGVO)</li>
          </ul>
          <p style={{ margin: 0 }}>
            Erteilte Einwilligungen können Sie jederzeit mit Wirkung für die Zukunft widerrufen.
            Anfragen richten Sie bitte an kontakt@hellerlauritsencapital.com.
          </p>
        </LegalSection>

        <LegalSection title="Beschwerderecht">
          <p style={{ margin: 0 }}>
            Sie haben das Recht, sich bei einer Aufsichts­behörde zu beschweren — in Spanien:{' '}
            <a href="https://www.aepd.es" target="_blank" rel="noopener noreferrer" style={{ color:'#C9A961' }}>
              Agencia Española de Protección de Datos (aepd.es)
            </a>; in Deutschland: bei der für Sie zuständigen Landes­datenschutz­behörde.
          </p>
        </LegalSection>

        <p style={{
          marginTop: 56, fontFamily:'DM Sans, sans-serif', fontSize:12,
          color:'rgba(42,42,42,0.5)', letterSpacing:'0.04em',
        }}>
          Stand: Mai 2026 · Heller Lauritsen Capital S.L., Palma de Mallorca
        </p>
      </Container>
    </section>
  </PageShell>
);

window.HomePage = HomePage;
window.LeistungenPage = LeistungenPage;
window.ProzessPage = ProzessPage;
window.RechtPage = RechtPage;
window.UeberUnsPage = UeberUnsPage;
window.KontaktPage = KontaktPage;
window.ImpressumPage = ImpressumPage;
window.DatenschutzPage = DatenschutzPage;
