/* global React, Icon, FJ_PHOTOS */

const OWNERS = [
  { name: "Arne Frederiksen", role: "Direktør & medejer",       sub: "Håndværkstaksator",          phone: "30 50 71 11", email: "arne@frederiksen-jepsen.dk",
    photo: "https://www.frederiksen-jepsen.dk/tl_files/materiale/medarbejderfotos/Arne_Frederiksen.jpg" },
  { name: "Thomas Jepsen",    role: "Byggeleder & medejer",     sub: "Tilbygning & tag",        phone: "20 29 15 75", email: "thomas@frederiksen-jepsen.dk",
    photo: "https://www.frederiksen-jepsen.dk/tl_files/materiale/medarbejderfotos/Thomas_Jepsen.jpg" },
];

function OwnerStory() {
  return (
    <section className="owner section grain" id="about" data-screen-label="Owner story">
      <div className="container">
        <div className="owner__head">
          <span className="eyebrow">To indehavere — én adresse</span>
          <h2 className="section-title">Vi to står på<br/>hver eneste opgave.</h2>
          <p className="section-sub">
            I 2013 lagde Arne og Thomas to lokale firmaer sammen, D. Frederiksen &amp; Søn A/S og Henry Nielsen A/S, efter mere end 20 år hver. Resultatet er ét stærkt firma med dobbelt så lang erfaring og samme korte vej til chefen.
          </p>
        </div>
        <div className="owner__team">
          <img src="./assets/FJ_teem.jpg" alt="Frederiksen &amp; Jepsen teamet" className="owner__team-img"/>
          <div className="owner__team-caption">
            <Icon name="users" size={14} stroke="#E5AC31"/>
            Holdet bag Frederiksen &amp; Jepsen A/S
          </div>
        </div>

        <div className="owner__grid">
          {OWNERS.map(o => (
            <article key={o.name} className="owner-card">
              <div className="owner-card__photo">
                <img src={o.photo} alt={o.name} referrerPolicy="no-referrer"/>
              </div>
              <div className="owner-card__body">
                <h3 className="owner-card__name">{o.name}</h3>
                <div className="owner-card__role" dangerouslySetInnerHTML={{ __html: o.role }}/>
                <div className="owner-card__sub" dangerouslySetInnerHTML={{ __html: o.sub }}/>
                <div className="owner-card__contact">
                  <a href={`tel:+45${o.phone.replace(/\s/g, "")}`} className="owner-card__phone">
                    <Icon name="phone" size={16} stroke="#E5AC31"/>
                    {o.phone}
                  </a>
                  <a href={`mailto:${o.email}`} className="owner-card__email">{o.email}</a>
                </div>
              </div>
            </article>
          ))}
        </div>
        <div className="owner__pull card-panel">
          <Icon name="award" size={28} stroke="#C9A24A" />
          <p>
            <strong>Korteste vej til chefen.</strong> Du ringer, du får fat i én af os to. Ikke en kundeservice, ikke et call center. Det er sådan vi har drevet firmaet siden 2013, og sådan det bliver ved at være.
          </p>
        </div>
      </div>
      <style>{`
        .owner__head { max-width: 780px; margin-bottom: 48px; }
        .owner__team { width: 100%; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; box-shadow: var(--shadow-card); }
        .owner__team-img { width: 100%; height: auto; display: block; filter: saturate(0.9) contrast(1.02); }
        .owner__team-caption { display: inline-flex; align-items: center; gap: 7px; padding: 10px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-faint); }
        .owner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .owner-card {
          display: grid; grid-template-columns: 200px 1fr; gap: 0;
          background: var(--surface-panel); border: 1px solid var(--surface-divider);
          border-radius: var(--radius-lg); overflow: hidden;
          box-shadow: var(--shadow-card);
        }
        .owner-card__photo { background: #0B1118; aspect-ratio: 4/5; }
        .owner-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.92) contrast(1.04); }
        .owner-card__body { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
        .owner-card__name { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; margin: 0 0 6px; }
        .owner-card__role { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
        .owner-card__sub { font-family: var(--font-body); font-size: 14px; color: var(--paper-dim); margin-bottom: 14px; }
        .owner-card__contact { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--surface-divider); }
        .owner-card__phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--accent); letter-spacing: -0.005em; }
        .owner-card__email { font-family: var(--font-body); font-size: 13px; color: var(--paper-dim); }
        .owner-card__email:hover { color: var(--paper); }
        .owner__pull { margin-top: 28px; padding: 24px 28px; display: flex; align-items: center; gap: 18px; }
        .owner__pull p { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--paper-dim); margin: 0; }
        .owner__pull strong { color: var(--paper); font-weight: 600; }
        @media (max-width: 960px) {
          .owner__grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 540px) {
          .owner-card { grid-template-columns: 1fr; }
          .owner-card__photo { aspect-ratio: 16/10; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { OwnerStory });