/* global React */

window.HomePage = function HomePage({ onNav }) {
  return (
    <div>
      <HomeHero onNav={onNav} />
    </div>);

};

/* ============ HERO ============ */
function HomeHero({ onNav }) {
  return (
    <section style={hStyles.section}>
      <div style={hStyles.photo} aria-hidden="true">
        <img
          src="assets/photos/stavanger-hero.jpg"
          alt="Stavanger havn, Norge"
          style={hStyles.img} />
        <div style={hStyles.scrim} />
        <div className="volt-hero-ambient" aria-hidden="true" />
        <div style={hStyles.photoLabel}>STAVANGER, NORGE</div>
      </div>

      <div style={hStyles.copy}>
        <h1 style={{ ...hStyles.headline, color: "rgb(236, 236, 221)", width: "900px", fontSize: "70px" }}>
           <span style={{ color: "#cf8b51", fontSize: "70px" }}>Verdiskapende</span><br />Eiendomsutvikler
        </h1>
        <p style={hStyles.lead}>Grunnlagt 2026.</p>
        <div style={hStyles.ctaRow}>
          <button style={hStyles.primary} onClick={() => onNav("kontakt")}>
            Ta kontakt <span style={{ marginLeft: 8 }}>→</span>
          </button>
        </div>
      </div>

      <div style={hStyles.scrollHint}>Bla for å utforske <span style={{ marginLeft: 8 }}>↓</span></div>
    </section>);
}

const hStyles = {
  section: {
    position: "relative",
    marginTop: -76,
    height: "min(820px, 100vh)",
    minHeight: 640,
    overflow: "hidden",
    background: "#0d1b2a",
    color: "#f2f2ec"
  },
  photo: { position: "absolute", inset: 0 },
  img: {
    width: "100%", height: "100%", objectFit: "cover",
    filter: "saturate(0.85) brightness(0.78)"
  },
  scrim: {
    position: "absolute", inset: 0,
    background:
    "linear-gradient(180deg, rgba(8,17,28,0.55) 0%, rgba(8,17,28,0.18) 30%, rgba(8,17,28,0.35) 65%, rgba(8,17,28,0.85) 100%)"
  },
  photoLabel: {
    position: "absolute", bottom: 16, right: 32,
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, color: "rgba(242,242,236,0.55)",
    letterSpacing: "0.12em", textTransform: "uppercase"
  },
  copy: {
    position: "absolute",
    left: "max(56px, calc((100vw - 1240px) / 2 + 32px))",
    bottom: 88,
    right: 32,
    maxWidth: 760,
    color: "#f2f2ec"
  },
  headline: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontWeight: 500, fontSize: 60, lineHeight: 1.08,
    letterSpacing: "-0.01em", color: "#f2f2ec",
    margin: 0
  },
  lead: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 17, lineHeight: 1.6, color: "rgba(242,242,236,0.78)",
    marginTop: 24, marginBottom: 0, maxWidth: 540
  },
  ctaRow: { display: "flex", gap: 12, marginTop: 32 },
  primary: {
    background: "#f2f2ec", color: "#0d1b2a", border: 0,
    borderRadius: 999, height: 48, padding: "0 22px",
    fontSize: 15, fontWeight: 500, cursor: "pointer",
    fontFamily: "Inter Tight, system-ui, sans-serif",
    display: "inline-flex", alignItems: "center"
  },
  scrollHint: {
    position: "absolute", left: "max(56px, calc((100vw - 1240px) / 2 + 32px))",
    bottom: 32,
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 12, color: "rgba(242,242,236,0.6)",
    letterSpacing: "0.04em"
  }
};

/* ============ PORTFOLIO PREVIEW ============ */
function HomePortfolio() {
  const items = [
  {
    tag: "Kontorbygg · 1991",
    name: "Solli plass 4",
    desc: "Hovedkontor for tre langtidsleietakere. 8 200 m² kontor med fasade i lys kalkstein.",
    bg: "#1a2a3d",
    accent: "#b8743a"
  },
  {
    tag: "Bygg under utvikling",
    name: "Karenslyst Allé 11",
    desc: "Pågående utvikling. Tre etasjer kontor, 1 240 m² ledig fra mars 2026.",
    bg: "#4f6f3f",
    accent: "#f2f2ec"
  },
  {
    tag: "Logistikk · 2008",
    name: "Alnabru Nord",
    desc: "Logistikkterminal med 14 lasteporter. Eid og driftet av oss siden ferdigstilling.",
    bg: "#3a3527",
    accent: "#cf8b51"
  }];


  return (
    <section style={{ ...pStyles.section, fontSize: "2px" }}>
      <div style={pStyles.inner}>
        <div style={pStyles.head}>
          <div>
            <div style={{ ...pStyles.overline, height: "30px", fontSize: "20px", color: "rgb(207, 139, 81)" }}>VÅRE EIENDOMMER</div>
            <h2 style={pStyles.headline}>En portefølje som gir lokal verdi.</h2>
          </div>
        </div>

        <div style={pStyles.grid}>
          {items.map((it, i) =>
          <article key={i} style={pStyles.card}>
              <div style={{ ...pStyles.cardImg, background: it.bg }}>
                <ArchDecor accent={it.accent} variant={i} />
                <div style={pStyles.cardTag}>{it.tag}</div>
              </div>
              <div style={pStyles.cardBody}>
                <h3 style={pStyles.cardName}>{it.name}</h3>
                <p style={pStyles.cardDesc}>{it.desc}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function ArchDecor({ accent, variant }) {
  if (variant === 0) {
    return (
      <svg width="100%" height="100%" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice"
      style={{ position: "absolute", inset: 0 }}>
        {Array.from({ length: 12 }).map((_, i) =>
        <rect key={i} x={i * 36} y="0" width="34" height="320"
        fill="rgba(255,255,255,0.04)" />
        )}
        {Array.from({ length: 8 }).map((_, i) =>
        <rect key={`w${i}`} x="0" y={i * 40 + 30} width="400" height="2" fill="rgba(255,255,255,0.06)" />
        )}
        <path d="M 280 40 L 240 140 L 270 140 L 250 220 L 320 110 L 290 110 Z"
        fill={accent} opacity="0.12" />
      </svg>);
  }
  if (variant === 1) {
    return (
      <svg width="100%" height="100%" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice"
      style={{ position: "absolute", inset: 0 }}>
        <circle cx="320" cy="80" r="50" fill="rgba(255,255,255,0.08)" />
        {Array.from({ length: 6 }).map((_, i) =>
        <line key={i} x1="0" y1={i * 50 + 80} x2="400" y2={i * 50 + 60}
        stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
        )}
        <rect x="40" y="180" width="120" height="120" fill="rgba(255,255,255,0.05)" />
        <rect x="180" y="220" width="80" height="80" fill="rgba(255,255,255,0.07)" />
      </svg>);
  }
  return (
    <svg width="100%" height="100%" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid slice"
    style={{ position: "absolute", inset: 0 }}>
      {Array.from({ length: 14 }).map((_, i) =>
      <rect key={i} x={i * 30} y="180" width="22" height="140"
      fill="rgba(255,255,255,0.05)" />
      )}
      <rect x="0" y="170" width="400" height="4" fill={accent} opacity="0.4" />
      <rect x="0" y="180" width="400" height="2" fill="rgba(255,255,255,0.1)" />
    </svg>);
}

const pStyles = {
  section: { background: "#f2f2ec", padding: "96px 32px" },
  inner: { maxWidth: 1240, margin: "0 auto" },
  head: {
    display: "flex", justifyContent: "space-between", alignItems: "flex-end",
    marginBottom: 48, gap: 32
  },
  overline: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
    color: "#7a8492", fontWeight: 500, marginBottom: 16
  },
  headline: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontWeight: 500, fontSize: 48, lineHeight: 1.15,
    letterSpacing: "-0.005em", color: "#0d1b2a",
    margin: 0, maxWidth: 720
  },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 },
  card: {
    background: "#f9f8f2",
    borderRadius: 20, overflow: "hidden",
    boxShadow: "0 0 0 1px #ebe9df",
    cursor: "pointer",
    transition: "transform 220ms cubic-bezier(0.22,1,0.36,1)"
  },
  cardImg: {
    height: 260, position: "relative", overflow: "hidden"
  },
  cardTag: {
    position: "absolute", top: 20, left: 20,
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
    color: "rgba(242,242,236,0.85)",
    background: "rgba(8,17,28,0.4)",
    padding: "6px 12px", borderRadius: 999,
    backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
    boxShadow: "inset 0 0 0 1px rgba(242,242,236,0.18)"
  },
  cardBody: { padding: "24px 24px 28px" },
  cardName: {
    fontFamily: "'Source Serif 4', Georgia, serif",
    fontWeight: 500, fontSize: 22, color: "#0d1b2a",
    margin: 0, marginBottom: 10
  },
  cardDesc: {
    fontFamily: "Inter Tight, system-ui, sans-serif",
    fontSize: 14, lineHeight: 1.55, color: "#4a5868", margin: 0
  }
};