/* global React */

window.InvestPage = function InvestPage({ onNav }) {
  return (
    <div>
      <InvestPrinciples />
    </div>);

};

function InvestPrinciples() {
  const principles = [
  {
    n: "01",
    title: "Evigvarende eierskap",
    body: "Alltid et evighetsperspektiv på våre eiendommer."
  },
  {
    n: "02",
    title: "Utøve kapitaldisiplin",
    body: "Attraktiv prising på netto kjøpsyield."
  },
  {
    n: "03",
    title: "Bygge relasjoner som varer",
    body: "Gode partnere er alfa omega."
  }];

  return (
    <section style={ivStyles.principles}>
      <div style={ivStyles.inner}>
        <div style={{ ...ivStyles.sectionOverline, fontSize: "20px", color: "rgb(207, 139, 81)" }}>Investeringsfilosofi</div>
        <h2 style={{ ...ivStyles.sectionHeadline, color: "rgb(30, 29, 29)" }}>
          Kjøper av kvalitetseiendom<br />
          <span style={{ fontStyle: "italic", color: "rgb(30, 29, 29)" }}>med strategisk beliggenhet</span>
        </h2>
        <p style={ivStyles.lead}>Tre prinsipper: evighetsperspektiv, kapitaldisiplin og gode relasjoner.


        </p>
        <div style={ivStyles.principleList}>
          {principles.map((p, i) =>
          <div key={p.n} style={{ ...ivStyles.principleRow, ...(i === principles.length - 1 ? ivStyles.principleRowLast : null) }}>
              <div style={ivStyles.principleHead}>
                <h3 style={ivStyles.principleTitle}>{p.title}</h3>
                <div style={{ ...ivStyles.principleN, height: "20.8px" }}>{p.n}</div>
              </div>
              <p style={ivStyles.principleBody}>{p.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

const ivStyles = {
  inner: { maxWidth: 1240, margin: "0 auto" },
  sectionOverline: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    color: "#7a8492", fontWeight: 500, marginBottom: 20
  },
  sectionHeadline: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontWeight: 500, fontSize: 56, lineHeight: 1.12,
    letterSpacing: "-0.005em", color: "#0d1b2a",
    margin: 0
  },
  lead: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 18, lineHeight: 1.6, color: "#4a5868",
    marginTop: 28, maxWidth: 640
  },
  principles: { background: "#f2f2ec", padding: "112px 32px 56px" },
  principleList: {
    marginTop: 56,
    borderTop: "1px solid #d8d6c9"
  },
  principleRow: {
    padding: "32px 0",
    borderBottom: "1px solid #d8d6c9"
  },
  principleRowLast: {},
  principleHead: {
    display: "flex", alignItems: "baseline", justifyContent: "space-between",
    gap: 24, marginBottom: 12
  },
  principleN: {
    fontFamily: "JetBrains Mono, monospace",
    fontSize: 13, color: "#b8743a", letterSpacing: "0.04em",
    flexShrink: 0
  },
  principleTitle: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontWeight: 600, fontSize: 26, color: "#0d1b2a",
    margin: 0, letterSpacing: "-0.005em"
  },
  principleBody: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 16, lineHeight: 1.65, color: "#4a5868", margin: 0,
    maxWidth: 760
  }
};