/* global React, Icon */

function OwnerVision() {
  return (
    <section className="ov" data-screen-label="Owner Vision">

      <div className="ov__body-wrap">
        <div className="container">
          <div className="ov__grid">

            <div className="ov__photo-col">
              <div className="ov__photo-wrap">
                <img src="./assets/Arne-Fredriksen.png" alt="Arne Frederiksen" />
                <div className="ov__photo-overlay" />
              </div>
              <img src="./assets/badges/100k-guaranti.png" alt="100k Garanti" className="ov__badge-pin" />
            </div>

            <div className="ov__copy-col">
              <span className="ov__eyebrow">Grundlæggeren bag firmaet</span>

              <blockquote className="ov__quote">
                "Håndværk er ikke et job.<br/>Det er et løfte."
              </blockquote>

              <p className="ov__text">
                Arne Frederiksen startede i branchen som ung svend og har siden brugt over 30 år på at bygge noget, der holder. Både tage og relationer. Hans filosofi er enkel: mød op til tiden, gør det rigtigt første gang, og stå ved dit arbejde.
              </p>
              <p className="ov__text">
                I 2013 slog han sine kræfter sammen med Thomas Jepsen og samlede to generationers lokalt håndværk under ét tag. I dag er Frederiksen &amp; Jepsen A/S Sønderjyllands foretrukne valg til tag, vinduer og tilbygninger. Ikke fordi vi er størst, men fordi vi er ærligst.
              </p>

              <div className="ov__byline">
                <div className="ov__byline-text">
                  <div className="ov__name">Arne Frederiksen</div>
                  <div className="ov__title">Direktør &amp; medejer · Frederiksen &amp; Jepsen A/S</div>
                </div>
                <img src="./assets/owner-sign.png" alt="Signatur" className="ov__sign" />
              </div>
            </div>

          </div>
        </div>
      </div>

      <style>{`
        .ov { position: relative; background: #0B1118; border: none; outline: none; }
        .ov::before {
          content: '';
          display: block;
          width: 100%;
          height: 110px;
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Crect width='1440' height='110' fill='white'/%3E%3Cpath d='M0,38 C280,15 520,15 720,55 C920,95 1140,95 1440,62 L1440,110 L0,110 Z' fill='%230B1118'/%3E%3Cpath d='M0,38 C280,15 520,15 720,55 C920,95 1140,95 1440,62' fill='none' stroke='%23E5AC31' stroke-width='3.5'/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
        }

        .ov__body-wrap { padding: 64px 0 96px; }

        .ov__grid {
          display: grid;
          grid-template-columns: 1fr 1.15fr;
          gap: 72px;
          align-items: center;
        }

        /* Photo */
        .ov__photo-col { position: relative; }
        .ov__photo-wrap {
          position: relative;
          border-radius: var(--radius-xl);
          overflow: hidden;
          aspect-ratio: 3/4;
          background: #0B1118;
        }
        .ov__photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: saturate(0.9) contrast(1.05); }
        .ov__photo-overlay {
          position: absolute; inset: 0;
          background: linear-gradient(to top, rgba(11,17,24,0.55) 0%, transparent 45%);
        }
        .ov__badge-pin {
          position: absolute;
          top: -65px;
          left: -65px;
          width: 208px;
          height: auto;
          transform: rotate(-16deg);
          z-index: 4;
          pointer-events: none;
        }

        /* Copy */
        .ov__eyebrow {
          display: inline-block;
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--accent);
          margin-bottom: 4px;
        }
        .ov__copy-col { display: flex; flex-direction: column; gap: 0; }
        .ov__quote {
          font-family: var(--font-display);
          font-weight: 800;
          font-size: clamp(28px, 3.5vw, 48px);
          line-height: 1.1;
          letter-spacing: -0.02em;
          text-transform: uppercase;
          color: #F4F1EC;
          margin: 18px 0 28px;
          padding: 0;
          border: none;
        }
        .ov__text {
          font-family: var(--font-body);
          font-size: 16px;
          line-height: 1.7;
          color: rgba(244,241,236,0.68);
          margin: 0 0 16px;
          max-width: 58ch;
        }

        /* Byline */
        .ov__byline {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          gap: 24px;
          margin-top: 36px;
          padding-top: 28px;
          border-top: 1px solid rgba(255,255,255,0.12);
        }
        .ov__name {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 22px;
          text-transform: uppercase;
          letter-spacing: -0.01em;
          color: #F4F1EC;
          line-height: 1;
          margin-bottom: 6px;
        }
        .ov__title {
          font-family: var(--font-body);
          font-size: 13px;
          color: rgba(244,241,236,0.45);
        }
        .ov__sign {
          height: 56px;
          width: auto;
          display: block;
          opacity: 0.85;
          filter: invert(1) brightness(1.2);
        }

        @media (max-width: 960px) {
          .ov__grid { grid-template-columns: 1fr; gap: 40px; }
          .ov__photo-wrap { aspect-ratio: 4/3; }
          .ov__quote { font-size: clamp(24px, 6vw, 36px); }
          .ov__body-wrap { padding: 40px 0 64px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { OwnerVision });