// Hero — full-bleed photo with anchored editorial headline.

const Hero = ({ t, photoMode, headlineIndex, onNav }) => {
  const lines = t.hero_titles[headlineIndex % t.hero_titles.length];
  return (
    <section data-screen-label="00 Hero" id="top" style={{
      position: "relative", height: "100vh", minHeight: 720, overflow: "hidden",
      color: "var(--bone)"
    }}>
      <Plate src="photos/exterior-aerial.jpg" mode={photoMode} position="center 40%"
      style={{ position: "absolute", inset: 0 }} overlay />

      {/* Top eyebrow stamp, upper-right */}
      <div style={{ position: "absolute", top: 110, right: 56, zIndex: 2, textAlign: "right" }}>
        <Eyebrow tone="muteDark">{"\n\nPremium Apartment"}</Eyebrow>
        <div style={{ marginTop: 10, display: "flex", justifyContent: "flex-end" }}>
          <HairlineGold width={48} />
        </div>
      </div>

      {/* Anchored headline, lower-left */}
      <div style={{ position: "absolute", left: 56, bottom: 96, zIndex: 2, maxWidth: 760 }}>
        <div style={{ marginTop: 24 }}>
          <Headline lines={lines} size={92} light />
        </div>
        <div style={{
          marginTop: 28, fontFamily: "var(--font-serif)", fontStyle: "italic",
          lineHeight: 1.5, color: "rgba(245,241,234,0.82)", maxWidth: 460, fontSize: "26px"
        }}>
          {t.hero_fineprint}
        </div>
        <div style={{ marginTop: 36, display: "flex", gap: 14 }}>
          <Button variant="primary" dark onClick={() => onNav("contact")}>{t.cta_inquire}</Button>
          <Button variant="ghost" dark onClick={() => onNav("object")}>{t.cta_view}</Button>
        </div>
      </div>

      {/* Bottom-right scroll cue */}
      <div style={{
        position: "absolute", bottom: 32, right: 48, zIndex: 2,
        display: "flex", alignItems: "center", gap: 12,
        fontFamily: "var(--font-sans)", fontSize: 10, letterSpacing: "0.28em",
        textTransform: "uppercase", color: "rgba(245,241,234,0.7)"
      }}>
        <span>{t.scroll}</span>
        <span style={{ width: 36, height: 1, background: "currentColor", opacity: 0.6 }} />
      </div>
    </section>);

};

// Stat strip — sparse facts with hairline dividers.
const FactStrip = ({ t, dark = false }) =>
<section style={{
  background: dark ? "var(--ink)" : "var(--bone)",
  color: dark ? "var(--bone)" : "var(--graphite)",
  padding: "44px 56px", borderTop: `1px solid ${dark ? "rgba(201,168,106,0.25)" : "var(--linen)"}`,
  borderBottom: `1px solid ${dark ? "rgba(201,168,106,0.25)" : "var(--linen)"}`
}}>
    <div style={{
    maxWidth: 1240, margin: "0 auto",
    display: "grid", gridTemplateColumns: "repeat(4, 1fr)", alignItems: "center"
  }}>
      {t.facts.map(([n, l], i) =>
    <div key={i} style={{
      display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
      borderLeft: i === 0 ? "none" : `1px solid ${dark ? "rgba(245,241,234,0.14)" : "var(--linen)"}`,
      padding: "8px 16px"
    }}>
          <span style={{
        fontFamily: "var(--font-serif)", fontStyle: "italic",
        fontSize: 36, color: "var(--gold)", lineHeight: 1
      }}>{n}</span>
          <Eyebrow tone={dark ? "muteDark" : "mute"}>{l}</Eyebrow>
        </div>
    )}
    </div>
  </section>;


window.Hero = Hero;
window.FactStrip = FactStrip;