const { Button, IconButton, Tag, Badge } = window.StrandvGen18DesignSystem_6e17b4;

function Wordmark({ inverse }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 20, letterSpacing: "0.12em", color: inverse ? "var(--text-inverse)" : "var(--text-heading)", whiteSpace: "nowrap" }}>STRANDVÄGEN 18</span>
      <span style={{ font: "var(--type-label)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: inverse ? "var(--sv-panel-400)" : "var(--text-faint)", marginTop: 4 }}>Kungsängen</span>
    </div>
  );
}

function Header({ t, lang, setLang, onCta }) {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "rgba(253,253,251,0.88)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
      borderBottom: "1px solid var(--border-default)",
    }}>
      <div className="ms-header" style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "12px var(--content-pad)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }}>
        <Wordmark />
        <nav style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <div className="ms-navlinks" style={{ display: "flex", gap: 20 }}>
            {t.nav.map(([id, label]) => (
              <a key={id} href={"#" + id} style={{ font: "var(--type-small)", fontFamily: "var(--font-body)", color: "var(--text-muted)", textDecoration: "none", whiteSpace: "nowrap" }}>{label}</a>
            ))}
          </div>
          <LangToggle lang={lang} onChange={setLang} />
          <span className="ms-header-cta"><Button size="sm" onClick={onCta}>{t.cta}</Button></span>
        </nav>
      </div>
    </header>
  );
}

function Hero({ t, onCta }) {
  const goHouse = () => {
    const el = document.getElementById("huset");
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };
  return (
    <section className="ms-hero" style={{ position: "relative", height: "72vh", minHeight: 440, overflow: "hidden" }}>
      <img className="ms-hero-img" src="assets/photos/balkong-utsikt.png" alt={t.phVeranda} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
      <div className="ms-hero-overlay" style={{
        position: "absolute", inset: "auto 0 0 0", height: "88%",
        background: "linear-gradient(to top, rgba(35,44,43,0.78), rgba(35,44,43,0.35) 55%, rgba(35,44,43,0))",
        display: "flex", alignItems: "flex-end",
      }}>
        <div style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "0 var(--content-pad) clamp(28px, 6vh, 56px)", width: "100%", display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ font: "var(--type-label)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--sv-white)", textShadow: "0 1px 8px rgba(35,44,43,0.6)" }}>{t.heroEyebrow}</div>
          <h1 style={{ margin: 0, font: "var(--type-hero)", letterSpacing: "var(--tracking-display)", color: "var(--text-inverse)", maxWidth: "16ch", textShadow: "0 2px 16px rgba(35,44,43,0.45)" }}>{t.heroTitle}</h1>
          <p style={{ margin: 0, font: "var(--type-lead)", color: "var(--sv-panel-100)", maxWidth: "46ch", textShadow: "0 1px 8px rgba(35,44,43,0.5)" }}>{t.heroLead}</p>
          <div style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
            <Button size="lg" onClick={onCta}>{t.cta}</Button>
            <Button size="lg" variant="secondary" onClick={goHouse}>{t.heroSecondary}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FactStrip({ t }) {
  return (
    <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border-default)" }}>
      <div className="ms-facts" style={{ maxWidth: "var(--content-max)", margin: "0 auto", padding: "24px var(--content-pad)", display: "grid", gap: 16 }}>
        {t.facts.map(([n, l]) => (
          <div key={l} style={{ display: "flex", flexDirection: "column", gap: 2, alignItems: "center", textAlign: "center" }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 30, color: "var(--text-heading)", whiteSpace: "nowrap" }}>{n}</span>
            <span style={{ font: "var(--type-caption)", fontFamily: "var(--font-body)", color: "var(--text-muted)" }}>{l}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function PhotoPlaceholder({ label, ratio = "4 / 3" }) {
  return (
    <div style={{
      aspectRatio: ratio, borderRadius: "var(--radius-lg)", border: "1px dashed var(--border-strong)",
      background: "var(--surface-sunken)", display: "flex", alignItems: "center", justifyContent: "center",
      font: "var(--type-caption)", fontFamily: "var(--font-body)", color: "var(--text-faint)", textAlign: "center", padding: 12, boxSizing: "border-box",
    }}>
      {label}
    </div>
  );
}

function SectionHeading({ eyebrow, title }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div style={{ font: "var(--type-label)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--text-muted)" }}>{eyebrow}</div>
      <h2 style={{ margin: 0, font: "var(--type-h2)", fontFamily: "var(--font-display)", color: "var(--text-heading)" }}>{title}</h2>
    </div>
  );
}

function HouseSection({ t }) {
  return (
    <section id="huset" style={{ background: "var(--surface-page)" }}>
      <div className="ms-split ms-section" style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "grid", gap: 48, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <SectionHeading eyebrow={t.houseEyebrow} title={t.houseTitle} />
          <p style={{ margin: 0, font: "var(--type-body)", fontFamily: "var(--font-body)", color: "var(--text-body)" }}>{t.houseP1}</p>
          <p style={{ margin: 0, font: "var(--type-body)", fontFamily: "var(--font-body)", color: "var(--text-body)" }}>{t.houseP2}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {t.amenities.map((a) => <Tag key={a}>{a}</Tag>)}
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <img src="assets/photos/villa-exterior.jpeg" alt={t.photoHouse} style={{ gridColumn: "1 / -1", width: "100%", aspectRatio: "16 / 10", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
          <img src="assets/photos/vardagsrummet.png" alt={t.phLiving} style={{ gridColumn: "1 / -1", width: "100%", aspectRatio: "16 / 10", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
          <img src="assets/photos/koket.png" alt={t.phKitchen} style={{ width: "100%", aspectRatio: "4 / 3", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
          <img src="assets/photos/walk-in-closet.png" alt={t.phCloset} style={{ width: "100%", aspectRatio: "4 / 3", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
          <img src="assets/photos/koket-2.png" alt={t.phKitchen2} style={{ width: "100%", aspectRatio: "4 / 3", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
          <img src="assets/photos/badrum-ovre.png" alt={t.phBathroom} style={{ width: "100%", aspectRatio: "4 / 3", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
        </div>
      </div>
    </section>
  );
}

function AreaSection({ t }) {
  return (
    <section id="omradet" style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-default)", borderBottom: "1px solid var(--border-default)" }}>
      <div className="ms-section" style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
        <SectionHeading eyebrow={t.areaEyebrow} title={t.areaTitle} />
        <div className="ms-cols4" style={{ display: "grid", gap: 24 }}>
          {t.areaPoints.map(([title, d]) => (
            <div key={title} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <div style={{ font: "var(--type-h3)", fontFamily: "var(--font-display)", color: "var(--text-heading)" }}>{title}</div>
              <p style={{ margin: 0, font: "var(--type-small)", fontFamily: "var(--font-body)", color: "var(--text-body)" }}>{d}</p>
            </div>
          ))}
        </div>
        <img src="assets/photos/badplats.jpeg" alt={t.phBeach} style={{ width: "100%", aspectRatio: "21 / 7", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
      </div>
    </section>
  );
}

function OfficeSection({ t }) {
  return (
    <section id="arbeta" style={{ background: "var(--surface-inverse)" }}>
      <div className="ms-split ms-section" style={{ maxWidth: "var(--content-max)", margin: "0 auto", display: "grid", gap: 48, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ font: "var(--type-label)", letterSpacing: "var(--tracking-label)", textTransform: "uppercase", color: "var(--sv-panel-400)" }}>{t.officeEyebrow}</div>
            <h2 style={{ margin: 0, font: "var(--type-h2)", fontFamily: "var(--font-display)", color: "var(--text-inverse)" }}>{t.officeTitle}</h2>
          </div>
          <p style={{ margin: 0, font: "var(--type-body)", fontFamily: "var(--font-body)", color: "var(--sv-panel-200)" }}>{t.officeP1}</p>
          <p style={{ margin: 0, font: "var(--type-body)", fontFamily: "var(--font-body)", color: "var(--sv-panel-200)" }}>{t.officeP2}</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <img src="assets/photos/kontoret.png" alt={t.phOffice} style={{ width: "100%", aspectRatio: "16 / 9", objectFit: "cover", borderRadius: "var(--radius-lg)", display: "block" }} />
          <div className="ms-office-points" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {t.officePoints.map(([title, d]) => (
              <div key={title} style={{ display: "flex", flexDirection: "column", gap: 4, borderTop: "1px solid var(--sv-roof-700)", paddingTop: 12 }}>
                <div style={{ font: "var(--type-small)", fontFamily: "var(--font-body)", fontWeight: 700, color: "var(--text-inverse)" }}>{title}</div>
                <div style={{ font: "var(--type-caption)", fontFamily: "var(--font-body)", color: "var(--sv-panel-400)" }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Wordmark, Header, Hero, FactStrip, HouseSection, AreaSection, OfficeSection, SectionHeading, PhotoPlaceholder });