// LocationSection: "Verwurzelt in Vorarlberg" — geographic / cultural anchor
// NOTE: We intentionally avoid `aspect-ratio` here because external custom CSS
// in the goma-app-about/home scope targets [style*="aspect-ratio"] for the
// founder portrait and would otherwise bleed a portrait image into this card.
const LocationSection = () => (
  <section style={{ padding: '96px 24px', background: '#fff' }}>
    <div style={{
      maxWidth: 1200, margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center',
    }}>
      <div>
        <div style={{
          font: '500 12px Roboto, sans-serif', letterSpacing: '0.08em',
          textTransform: 'uppercase', color: '#737373', marginBottom: 16,
        }}>
          Standort
        </div>
        <h2 style={{
          font: '700 48px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
          color: '#0A0A0A', margin: '0 0 24px',
        }}>
          Verwurzelt in Vorarlberg. Zuhause im gesamten DACH-Raum.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <p style={{ font: '400 17px/1.65 Roboto, sans-serif', color: '#525252', margin: 0 }}>
            Unser Hauptsitz ist in <strong style={{color:'#0A0A0A'}}>Bludenz</strong> — und das ist
            kein Zufall. Wir kennen die Denkweise von Mittelständlern in Österreich, Deutschland und
            der Schweiz, weil wir selbst so arbeiten: verbindlich, direkt, ohne Umwege.
          </p>
          <p style={{ font: '400 17px/1.65 Roboto, sans-serif', color: '#525252', margin: 0 }}>
            Gleichzeitig betreuen wir Kunden im gesamten DACH-Raum vollständig remote. Ob vor Ort
            oder per Videocall — die Qualität unserer Arbeit ist immer dieselbe. Was unsere Kunden
            an uns schätzen: technologischer Weitblick auf internationalem Niveau, gepaart mit der
            Verlässlichkeit und Bodenständigkeit, die man im Alpenraum zu Recht erwartet.
          </p>
        </div>
      </div>
      <MapCard/>
    </div>
  </section>
);

const MapCard = () => (
  // padding-top:75% creates a 4:3 box without using `aspect-ratio` so that any
  // generic [style*="aspect-ratio"] CSS rules in the surrounding scope cannot
  // target this card and bleed an unwanted background image through it.
  <div style={{
    position: 'relative',
    width: '100%',
    paddingTop: '75%',
    borderRadius: 16,
    overflow: 'hidden',
    border: '1px solid #E5E5E5',
    background: '#FAFAFA',
    backgroundImage: 'none',
  }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'none',
    }}>
      <svg viewBox="0 0 400 300" width="100%" height="100%" style={{display:'block'}} preserveAspectRatio="xMidYMid meet">
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#E5E5E5" strokeWidth="0.5"/>
          </pattern>
        </defs>
        <rect width="400" height="300" fill="url(#grid)"/>
        <path d="M70 90 L130 70 L190 75 L250 85 L300 100 L330 130 L320 170 L280 195 L230 210 L180 215 L130 200 L90 180 L70 150 Z"
              fill="#fff" stroke="#0A0A0A" strokeWidth="1.5" strokeLinejoin="round"/>
        <text x="155" y="115" fontFamily="Roboto, sans-serif" fontSize="11" fontWeight="600" fill="#737373">DE</text>
        <text x="225" y="180" fontFamily="Roboto, sans-serif" fontSize="11" fontWeight="600" fill="#737373">AT</text>
        <text x="115" y="180" fontFamily="Roboto, sans-serif" fontSize="11" fontWeight="600" fill="#737373">CH</text>
        <g transform="translate(180,168)">
          <circle r="20" fill="#FFD500" opacity="0.3"/>
          <circle r="10" fill="#FFD500" opacity="0.5"/>
          <circle r="5" fill="#0A0A0A"/>
        </g>
        <text x="195" y="172" fontFamily="Roboto, sans-serif" fontSize="13" fontWeight="600" fill="#0A0A0A">Bludenz</text>
        <text x="195" y="186" fontFamily="Roboto, sans-serif" fontSize="11" fontWeight="400" fill="#737373">Vorarlberg, AT</text>
      </svg>
      <div style={{
        position: 'absolute', top: 16, left: 16, padding: '4px 10px',
        background: '#FFD500', borderRadius: 4,
        font: '500 11px Roboto, sans-serif', letterSpacing: '0.04em',
        textTransform: 'uppercase', color: '#0A0A0A',
      }}>
        Hauptsitz
      </div>
    </div>
  </div>
);

window.LocationSection = LocationSection;