/* global React, Monogram, Wordmark, ClaimCaps */
const { useState: useStateChrome } = React;

/* ──────────────────────────────────────────────────────────────
   GLOBAL CHROME — Sticky Nav + Footer
   Heller Lauritsen Capital
   ────────────────────────────────────────────────────────────── */

const NavBar = ({ active = 'home', variant = 'navy' }) => {
  const isNavy = variant === 'navy';
  const fg   = isNavy ? '#F5F1E8' : '#2A2A2A';
  const bg   = isNavy ? '#0E1B2C' : '#FAF7F0';
  const ring = '#C9A961';
  const linkColor = isNavy ? 'rgba(245,241,232,0.78)' : 'rgba(42,42,42,0.7)';

  const items = [
    { id: 'leistungen', label: 'Leistungen', href: 'leistungen.html' },
    { id: 'prozess',    label: 'Prozess',    href: 'prozess.html' },
    { id: 'recht',      label: 'Recht',      href: 'recht.html' },
    { id: 'ueberuns',   label: 'Über uns',   href: 'ueber-uns.html' },
    { id: 'kontakt',    label: 'Kontakt',    href: 'kontakt.html' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: 68, background: bg,
      borderBottom: isNavy ? '1px solid rgba(245,241,232,0.08)' : '1px solid rgba(42,42,42,0.10)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 56px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <a href="index.html" style={{ display:'flex', alignItems:'center', gap:18, textDecoration:'none' }}>
          <div style={{ width: 36, height: 36, border: `0.8px solid ${ring}`, position: 'relative' }}>
            <span style={{
              position:'absolute', inset:0, display:'grid', placeItems:'center',
              fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:22, color:ring,
              transform:'translateX(-3px)',
            }}>H</span>
            <span style={{
              position:'absolute', inset:0, display:'grid', placeItems:'center',
              fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:22, color:fg, opacity:0.92,
              transform:'translateX(3px)',
            }}>L</span>
          </div>
          <div style={{ display:'inline-flex', flexDirection:'column', gap: 2 }}>
            <Wordmark color={fg} size={14} spacing="0.30em" />
            <span style={{
              fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
              letterSpacing:'0.32em', fontSize:8.5, color: ring, opacity: 0.85,
            }}>Capital</span>
          </div>
        </a>
      </div>

      <nav style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
        {items.map(it => (
          <a key={it.id} href={it.href}
            style={{
              color: active === it.id ? ring : linkColor,
              textDecoration: 'none',
              fontFamily: 'DM Sans, sans-serif',
              fontWeight: 500,
              textTransform: 'uppercase',
              letterSpacing: '0.18em',
              fontSize: 11,
              transition: 'color 150ms ease',
            }}>
            {it.label}
          </a>
        ))}
      </nav>
    </header>
  );
};

const FooterBar = () => (
  <footer style={{
    background: '#08111C',
    color: '#F5F1E8',
    padding: '48px 56px',
    borderTop: '1px solid rgba(245,241,232,0.08)',
  }}>
    <div style={{
      maxWidth: 1280, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 56,
      alignItems: 'start',
    }}>
      <div>
        <div style={{
          fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:18,
          letterSpacing:'0.30em', color:'#F5F1E8', marginBottom: 14,
        }}>HELLER&nbsp;&nbsp;LAURITSEN</div>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
          letterSpacing:'0.32em', fontSize:9.5, color:'#C9A961', marginBottom: 18,
        }}>Capital · Boutique Property Capital · Mallorca</div>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontSize:13, lineHeight:1.7,
          color:'rgba(245,241,232,0.55)', maxWidth: 360,
        }}>
          Strukturierter Mallorca-Erwerb für DACH-Mandanten — vier Wege, ein Prozess,
          ein deutscher Ansprechpartner.
        </div>
      </div>

      <div>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
          letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom: 16,
        }}>Mandat</div>
        {[
          ['Leistungen','leistungen.html'],
          ['Prozess','prozess.html'],
          ['Recht & Sorgfalt','recht.html'],
          ['Über uns','ueber-uns.html'],
          ['Kontakt','kontakt.html'],
        ].map(([l, h]) => (
          <a key={l} href={h} style={{
            display:'block', marginBottom: 10,
            color:'rgba(245,241,232,0.65)', textDecoration:'none',
            fontFamily:'DM Sans, sans-serif', fontSize:13, letterSpacing:'0.02em',
          }}>{l}</a>
        ))}
      </div>

      <div>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
          letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom: 16,
        }}>Kontakt</div>
        <a href="mailto:kontakt@hellerlauritsencapital.com" style={{
          display:'block', marginBottom: 10,
          color:'rgba(245,241,232,0.65)', textDecoration:'none',
          fontFamily:'DM Sans, sans-serif', fontSize:13, letterSpacing:'0.02em',
          wordBreak:'break-word',
        }}>kontakt@hellerlauritsencapital.com</a>
        <a href="https://cal.com/hl-capital/erstgespraech" target="_blank" rel="noopener noreferrer" style={{
          display:'block', marginBottom: 10,
          color:'rgba(245,241,232,0.65)', textDecoration:'none',
          fontFamily:'DM Sans, sans-serif', fontSize:13, letterSpacing:'0.02em',
        }}>Termin buchen</a>
        <div style={{
          marginTop: 16,
          fontFamily:'DM Sans, sans-serif', fontSize:13, lineHeight:1.7,
          color:'rgba(245,241,232,0.45)',
        }}>
          Palma de Mallorca<br/>Hannover
        </div>
      </div>

      <div>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
          letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom: 16,
        }}>Schwesterfirma</div>
        <a href="https://vaduzadvisory.com" target="_blank" rel="noopener noreferrer" style={{
          display:'block', marginBottom: 8,
          color:'rgba(245,241,232,0.78)', textDecoration:'none',
          fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:16,
          letterSpacing:'0.18em',
        }}>VADUZ ADVISORY</a>
        <div style={{
          fontFamily:'DM Sans, sans-serif', fontSize:12.5, lineHeight:1.65,
          color:'rgba(245,241,232,0.45)', marginBottom: 20,
        }}>
          Strukturierung & Steuern<br/>Vaduz · Palma
        </div>

        <div style={{
          fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
          letterSpacing:'0.32em', fontSize:10, color:'#C9A961', marginBottom: 14, marginTop: 24,
        }}>Rechtliches</div>
        <a href="impressum.html" style={{
          display:'block', marginBottom: 10,
          color:'rgba(245,241,232,0.65)', textDecoration:'none',
          fontFamily:'DM Sans, sans-serif', fontSize:13, letterSpacing:'0.02em',
        }}>Impressum</a>
        <a href="datenschutz.html" style={{
          display:'block', marginBottom: 10,
          color:'rgba(245,241,232,0.65)', textDecoration:'none',
          fontFamily:'DM Sans, sans-serif', fontSize:13, letterSpacing:'0.02em',
        }}>Datenschutz</a>
      </div>
    </div>

    {/* Berufsrechtlicher Disclaimer — permanent */}
    <div style={{
      maxWidth: 1280, margin: '40px auto 0', paddingTop: 28,
      borderTop: '1px solid rgba(245,241,232,0.08)',
    }}>
      <div style={{
        fontFamily:'DM Sans, sans-serif', fontSize:11.5, lineHeight:1.75,
        color:'rgba(245,241,232,0.42)', maxWidth: 1080, letterSpacing:'0.005em',
      }}>
        Heller Lauritsen Capital S.L. erbringt keine Rechts- oder Steuerberatung (EGAE / RDG,
        REAF / StBerG) und ist kein Kreditvermittler nach Ley 5/2019 (LCCI). Rechtliche, steuerliche
        und finanzierungsbezogene Leistungen erfolgen über beauftragte Abogados, Asesores Fiscales
        und Hypothekenbanken im eigenen Mandatsverhältnis. Diese Website ersetzt keine individuelle Beratung.
      </div>
    </div>

    {/* Copyright */}
    <div style={{
      maxWidth: 1280, margin: '24px auto 0', paddingTop: 18,
      borderTop: '1px solid rgba(245,241,232,0.08)',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap:'wrap', gap: 16,
    }}>
      <span style={{
        fontFamily:'DM Sans, sans-serif', fontWeight:500, textTransform:'uppercase',
        letterSpacing:'0.18em', fontSize:10, color:'rgba(245,241,232,0.4)',
      }}>© 2026 Heller Lauritsen Capital S.L. · hellerlauritsencapital.com</span>
      <span style={{
        fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:13,
        color:'rgba(245,241,232,0.4)', letterSpacing:'0.01em',
      }}>Vertraulich · persönlich · präzise.</span>
    </div>
  </footer>
);

/* small atoms shared by pages */
const SectionMarker = ({ children, color = '#C9A961' }) => (
  <div style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 14,
    fontFamily: 'DM Sans, sans-serif',
    fontWeight: 500,
    textTransform: 'uppercase',
    letterSpacing: '0.42em',
    fontSize: 11,
    color,
  }}>
    <span style={{ width: 28, height: '0.5px', background: color, opacity: 0.7 }} />
    {children}
    <span style={{ width: 28, height: '0.5px', background: color, opacity: 0.7 }} />
  </div>
);

const CTA = ({ children, href = 'kontakt.html', dark = true }) => {
  const [hover, setHover] = useStateChrome(false);
  const gold = '#C9A961';
  const navy = '#0E1B2C';
  const filled = hover;
  return (
    <a href={href}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 14,
        padding: '16px 26px',
        border: `1px solid ${gold}`,
        background: filled ? gold : 'transparent',
        color: filled ? navy : gold,
        fontFamily: 'DM Sans, sans-serif',
        fontWeight: 500,
        textTransform: 'uppercase',
        letterSpacing: '0.32em',
        fontSize: 11,
        textDecoration: 'none',
        cursor: 'pointer',
        transition: 'background 200ms ease, color 200ms ease',
      }}>
      {children}
      <span style={{ fontFamily:'EB Garamond, serif', fontStyle:'italic', fontSize:16, letterSpacing:0 }}>→</span>
    </a>
  );
};

window.NavBar = NavBar;
window.FooterBar = FooterBar;
window.SectionMarker = SectionMarker;
window.CTA = CTA;