const { Button, Card, Badge, Stat, SectionLabel, Divider, Icon, Tag } = window.BuildingInvestDesignSystem_f8840b;

function Hero({ onNavigate, lang }) {
  const t = window.I18N[lang];
  const isMobile = useViewportWidth() < 640;
  return (
    <section data-theme="dark" style={{ position: "relative", background: "var(--concrete-900)", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.6 }}><img src="photos/hero.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%" }} /></div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--concrete-950) 0%, rgba(13,12,11,.88) 45%, rgba(13,12,11,.2) 100%)" }} />
      <Container style={{ position: "relative", padding: isMobile ? "var(--space-9) var(--page-margin-lg)" : "var(--space-13) var(--page-margin-lg)" }}>
        <div style={{ maxWidth: 680, display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
          <SectionLabel tone="inverse">{t.home.heroEyebrow}</SectionLabel>
          <h1 style={{ font: isMobile ? "var(--weight-regular) 36px/1.15 var(--font-display)" : "var(--type-display)", color: "var(--concrete-0)", letterSpacing: "var(--tracking-tighter)" }}>{t.home.heroLine1}<br />{t.home.heroLine2}</h1>
          <p style={{ font: "var(--type-body-lg)", color: "var(--alpha-white-72)", maxWidth: "54ch" }}>{t.home.heroBody}</p>
          <div style={{ display: "flex", gap: "var(--space-3)", marginTop: "var(--space-2)", flexWrap: "wrap" }}>
            <Button size="lg" iconRight="arrow-right" onClick={() => onNavigate("contact")}>{t.home.ctaOffer}</Button>
            <Button size="lg" variant="outline" style={{ color: "var(--concrete-0)", borderColor: "var(--alpha-white-24)" }} onClick={() => onNavigate("projects")}>{t.home.ctaProjects}</Button>
          </div>
          <div style={{ display: "flex", gap: "var(--space-3)", marginTop: "var(--space-5)", flexWrap: "wrap" }}>
            {window.BI_DATA[lang].certifications.map((c) => <Badge key={c.code} tone="accent" icon="shield-check">{c.code}</Badge>)}
          </div>
        </div>
      </Container>
    </section>
  );
}

function StatBand({ lang }) {
  const isMobile = useViewportWidth() < 640;
  return (
    <div style={{ background: "var(--amber-400)" }}>
      <Container style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2,1fr)" : "repeat(4,1fr)", gap: "var(--space-7)", padding: "var(--space-8) var(--page-margin-lg)" }}>
        {window.BI_DATA[lang].stats.map((s) => <Stat key={s.label} {...s} />)}
      </Container>
    </div>
  );
}

function ServiceGrid({ onNavigate, lang }) {
  const t = window.I18N[lang];
  const width = useViewportWidth();
  const cols = width < 640 ? 1 : width < 960 ? 2 : 3;
  return (
    <Section label={t.home.servicesLabel} number="01" title={t.home.servicesTitle} lead={t.home.servicesLead} tone="light">
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: "var(--gutter)" }}>
        {window.BI_DATA[lang].services.map((s) => (
          <Card key={s.id} interactive padding="var(--card-pad-lg)" onClick={() => onNavigate("services")} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <Icon name={s.icon} size="lg" color="var(--amber-600)" />
            <h3 style={{ font: "var(--type-h3)" }}>{s.title}</h3>
            <p style={{ font: "var(--type-body-sm)", color: "var(--text-secondary)" }}>{s.lead}</p>
            <span style={{ display: "flex", alignItems: "center", gap: 6, marginTop: "auto", font: "var(--weight-semibold) var(--text-xs)/1 var(--font-condensed)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--text-accent)" }}>{t.home.detailsLink} <Icon name="arrow-right" size={12} /></span>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function FeaturedProjects({ onOpenProject, onNavigate, lang }) {
  const t = window.I18N[lang];
  const width = useViewportWidth();
  const cols = width < 640 ? 1 : width < 960 ? 2 : 3;
  const items = window.BI_DATA[lang].projects.filter((p) => p.featured);
  return (
    <Section label={t.home.projectsLabel} number="02" title={t.home.projectsTitle} tone="sunken">
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: "var(--gutter)" }}>
        {items.map((p) => (
          <div key={p.id} onClick={() => onOpenProject(p.id)} style={{ cursor: "pointer", display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            <ProjectImage ratio="4 / 3" src={p.image} label={t.common.photoPrefix + p.title.toUpperCase()} />
            <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
              <Badge tone={p.status === "done" ? "neutral" : "success"} dot>{t.projects.status[p.status]}</Badge>
              <span style={{ font: "var(--type-mono)", fontSize: 11, color: "var(--text-tertiary)" }}>{p.year} · {p.area}</span>
            </div>
            <h3 style={{ font: "var(--weight-regular) var(--text-lg)/1.25 var(--font-display)" }}>{p.title}</h3>
          </div>
        ))}
      </div>
      <div style={{ marginTop: "var(--space-9)" }}><Button variant="outline" onClick={() => onNavigate("projects")} iconRight="arrow-right">{t.home.allProjects}</Button></div>
    </Section>
  );
}

function Process({ lang }) {
  const t = window.I18N[lang];
  const width = useViewportWidth();
  const cols = width < 640 ? 1 : width < 960 ? 2 : 4;
  return (
    <Section label={t.home.processLabel} number="03" title={t.home.processTitle} tone="light">
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols},1fr)`, gap: "var(--gutter)" }}>
        {window.BI_DATA[lang].process.map((p) => (
          <div key={p.n} style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)", paddingTop: "var(--space-5)", borderTop: "var(--border-rule) solid var(--amber-400)" }}>
            <span style={{ font: "var(--type-mono)", fontSize: 13, color: "var(--amber-700)" }}>{p.n}</span>
            <h3 style={{ font: "var(--type-h4)" }}>{p.title}</h3>
            <p style={{ font: "var(--type-body-sm)", color: "var(--text-secondary)" }}>{p.body}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function AboutBand({ lang }) {
  const t = window.I18N[lang];
  const isMobile = useViewportWidth() < 800;
  return (
    <Section tone="sunken">
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? "var(--space-7)" : "var(--space-11)", alignItems: "center" }}>
        <a href={t.company.mapsUrl} target="_blank" rel="noopener noreferrer" style={{ display: "block", aspectRatio: "3 / 2", borderRadius: "var(--radius-image)", overflow: "hidden", borderBottom: "none" }}>
          <img src="photos/terkep.png" alt={t.home.photoAbout} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </a>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
          <SectionLabel number="04">{t.home.aboutLabel}</SectionLabel>
          <h2 style={{ font: "var(--type-h2)", letterSpacing: "var(--tracking-tight)" }}>{t.home.aboutTitle}</h2>
          <p style={{ font: "var(--type-body)", color: "var(--text-secondary)", maxWidth: "var(--measure-prose)" }}>{t.home.aboutBody}</p>
          <Divider variant="rule" />
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
            {window.BI_DATA[lang].certifications.map((c) => (
              <div key={c.code} style={{ display: "flex", alignItems: "center", gap: "var(--space-4)", flexWrap: "wrap" }}>
                <Icon name="shield-check" size="sm" color="var(--amber-600)" />
                <span style={{ font: "var(--type-mono)", fontSize: 12 }}>{c.code}</span>
                <span style={{ font: "var(--type-body-sm)", color: "var(--text-secondary)" }}>{c.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

function CtaBand({ onNavigate, lang }) {
  const t = window.I18N[lang];
  const isMobile = useViewportWidth() < 640;
  return (
    <section data-theme="dark" style={{ background: "var(--concrete-900)" }}>
      <Container style={{ display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center", justifyContent: "space-between", gap: "var(--space-6)", padding: isMobile ? "var(--space-8) var(--page-margin-lg)" : "var(--space-11) var(--page-margin-lg)" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
          <h2 style={{ font: "var(--type-h2)", color: "var(--concrete-0)", letterSpacing: "var(--tracking-tight)" }}>{t.home.ctaBandTitle}</h2>
          <p style={{ font: "var(--type-body-lg)", color: "var(--alpha-white-72)", maxWidth: "52ch" }}>{t.home.ctaBandBody}</p>
        </div>
        <Button size="lg" iconRight="arrow-right" onClick={() => onNavigate("contact")} style={isMobile ? { width: "100%" } : undefined}>{t.home.ctaBandButton}</Button>
      </Container>
    </section>
  );
}

function Home(props) {
  return <>
    <Hero {...props} />
    <StatBand {...props} />
    <ServiceGrid {...props} />
    <FeaturedProjects {...props} />
    <Process {...props} />
    <AboutBand {...props} />
    <CtaBand {...props} />
  </>;
}

Object.assign(window, { Home, Hero, StatBand, ServiceGrid, FeaturedProjects, Process, AboutBand, CtaBand });