/* Home / landing for ArchDaily Business. */

function Hero({ onNav }) {
  const { Button } = window.ArchDailyDesignSystem_788ad7;
  return (
    <section style={{ position: "relative", minHeight: "88vh", display: "flex", alignItems: "flex-end", overflow: "hidden", background: "var(--ad-deep)" }}>
      {/* Full-bleed photograph — light is the subject */}
      <img src={window.ADBIZ.hero} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", transform: "scale(1.12)", display: "block" }} />
      {/* Subtle flat scrim — legibility from the image itself, no gradient */}
      <div style={{ position: "absolute", inset: 0, background: "rgba(0,24,71,0.32)" }} />
      <Container style={{ position: "relative", padding: "0 var(--space-6) var(--space-9)" }}>
        <div style={{ maxWidth: 760 }}>
          <h1 style={{ fontSize: "var(--fs-display)", lineHeight: "var(--lh-tight)", letterSpacing: "var(--ls-tight)", fontWeight: "var(--fw-bold)", color: "var(--ad-grey-100)", margin: "var(--space-4) 0 var(--space-5)", textWrap: "balance" }}>
            Get your brand in front of the architects who spec it.
          </h1>
          <p style={{ fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-relaxed)", color: "var(--ad-grey-100)", maxWidth: 540, margin: "0 0 var(--space-6)" }}>
            The next step: your options, and how to get started.
          </p>
          <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" href={routeHref("contact")} onClick={(e) => { e.preventDefault(); onNav("contact"); }} iconRight={<Icon n="arrow-up-right" size={18} />}>Partner with us</Button>
            <a href="assets/ArchDaily Media Kit 2026.pdf" download style={{ textDecoration: "none" }}>
              <Button variant="secondary" size="lg" style={{ color: "var(--ad-grey-100)", borderColor: "rgba(244,244,245,0.5)", background: "rgba(244,244,245,0.06)" }} iconRight={<Icon n="download" size={18} />}>Download Media Kit</Button>
            </a>
          </div>
        </div>
      </Container>
      {/* Photo credit — Source Sans, light grey, minimal */}
      <span style={{ position: "absolute", right: "var(--space-6)", bottom: "var(--space-4)", textAlign: "right", fontFamily: "var(--font-sans)", fontSize: 11, lineHeight: 1.4, color: "rgba(244,244,245,0.75)" }}>Anthill House<br/>Kaushal TaTiya Architects<br/>Image © Avesh Gaur</span>
    </section>
  );
}

function Showcase({ onNav }) {
  const items = window.ADBIZ.showcase;
  const span = (s) => s === "tall" ? { gridRow: "span 2" } : s === "wide" ? { gridColumn: "span 2" } : {};
  return (
    <section id="showcase" style={{ padding: "var(--space-9) 0", scrollMarginTop: 80 }}>
      <Container>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: "var(--space-6)", gap: "var(--space-5)" }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow>What we publish</Eyebrow>
            <h2 style={{ fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-3)" }}>A stage for the built environment.</h2>
            <p className="ad-lead" style={{ margin: 0 }}>Beauty in the details, materials highlighted, perspective as a scope of scale — this is the work your brand sits beside.</p>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridAutoRows: "200px", gap: "var(--space-3)" }}>
          {items.map((it) => (
            <ShowcaseTile key={it.title} item={it} style={span(it.span)} />
          ))}
        </div>
      </Container>
    </section>
  );
}

function ShowcaseTile({ item, style }) {
  const [hover, setHover] = React.useState(false);
  return (
    <figure
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", margin: 0, overflow: "hidden", borderRadius: "var(--radius-md)", background: "var(--surface-sunken)", cursor: "pointer", ...style }}>
      <img src={item.img} alt={item.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transform: hover ? "scale(1.04)" : "scale(1)", transition: "transform var(--dur-slow) var(--ease-out)" }} />
      <figcaption style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
        <div style={{ padding: "var(--space-4)", background: "rgba(0,24,71,0.55)" }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 10, letterSpacing: "var(--ls-label)", textTransform: "uppercase", color: "var(--ad-grey-100)" }}>{item.office}</span><br />
          <span style={{ fontSize: "var(--fs-body)", fontWeight: "var(--fw-semibold)", color: "var(--ad-grey-100)" }}>{item.title}</span>
        </div>
      </figcaption>
    </figure>
  );
}

function StatBand() {
  return (
    <section style={{ background: "var(--ad-legacy)", color: "var(--ad-grey-100)" }}>
      <Container style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--space-5)", padding: "var(--space-7) var(--space-6)" }}>
        {window.ADBIZ.stats.map((s) => (
          <div key={s.label}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h1)", lineHeight: 1, color: "var(--ad-grey-100)" }}>{s.value}</div>
            <div style={{ fontSize: "var(--fs-sm)", color: "var(--ad-sky-200)", marginTop: 6 }}>{s.label}</div>
          </div>
        ))}
      </Container>
    </section>
  );
}

function FeaturedWork({ onOpen, onNav }) {
  const { ProjectCard, Button } = window.ArchDailyDesignSystem_788ad7;
  const items = window.ADBIZ.work.slice(0, 3);
  return (
    <section id="campaigns" style={{ padding: "var(--space-9) 0", scrollMarginTop: 80 }}>
      <Container>
        <div style={{ marginBottom: "var(--space-6)" }}>
          <h2 style={{ fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "0" }}>Latest Campaigns</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }}>
          {items.map((w) => (
            <ProjectCard key={w.id}
              image={w.img}
              kicker={w.kicker}
              title={w.title}
              office={w.office}
              location={w.location}
              badge={w.badge}
              badgeVariant={w.badgeVariant}
              href={w.link || caseHref(w.id)}
              target={w.link ? "_blank" : undefined}
              rel={w.link ? "noopener noreferrer" : undefined}
              onClick={w.link ? undefined : (e) => { e.preventDefault(); onOpen(w.id); }}
            />
          ))}
        </div>
      </Container>
    </section>
  );
}

function ClientStrip() {
  return (
    <section style={{ background: "var(--surface-page)" }}>
      <Container style={{ padding: "var(--space-7) var(--space-6)" }}>
        <p style={{ fontSize: "var(--fs-h4)", color: "var(--text-primary)", margin: "0 0 var(--space-5)", maxWidth: 720 }}>
          A few of the 100+ brands already part of the ArchDaily network.
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-7)", alignItems: "center" }}>
          {window.ADBIZ.clients.map((c) => (
            <span key={c} style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h4)", fontWeight: "var(--fw-semibold)", color: "var(--ad-charcoal)", letterSpacing: "-0.01em" }}>{c}</span>
          ))}
        </div>
      </Container>
    </section>
  );
}

function MediaKit({ onNav }) {
  const { Button } = window.ArchDailyDesignSystem_788ad7;
  const includes = [
    { icon: "bar-chart-3", t: "Audience & traffic data" },
    { icon: "layout-grid", t: "Ad formats & placements" },
    { icon: "calendar", t: "Editorial calendar" },
    { icon: "tag", t: "Rate card" },
  ];
  return (
    <section id="mediakit" style={{ padding: "var(--space-9) 0", scrollMarginTop: 80 }}>
      <Container>
        <div style={{ background: "var(--ad-deep)", borderRadius: "var(--radius-lg)", padding: "var(--space-8)", color: "var(--ad-grey-100)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-8)", alignItems: "center" }}>
          <div>
            <Eyebrow color="var(--ad-grey-100)">Media Kit</Eyebrow>
            <h2 style={{ color: "var(--ad-grey-100)", fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "var(--space-3) 0 var(--space-4)" }}>Everything you need to plan with us.</h2>
            <p style={{ color: "var(--ad-grey-100)", fontSize: "var(--fs-body-lg)", margin: "0 0 var(--space-6)" }}>
              Audience data, formats, calendar and rates — in one document.
            </p>
            <div style={{ display: "flex", gap: "var(--space-3)" }}>
              <a href="assets/ArchDaily Media Kit 2026.pdf" download style={{ textDecoration: "none" }}>
                <Button variant="primary" size="lg" iconRight={<Icon n="download" size={18} />}>Download media kit</Button>
              </a>
              <Button variant="secondary" size="lg" href={routeHref("contact")} style={{ color: "var(--ad-grey-100)", borderColor: "rgba(244,244,245,0.4)" }} onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact sales</Button>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)" }}>
            {includes.map((i) => (
              <div key={i.t} style={{ display: "flex", alignItems: "center", gap: 12, borderRadius: "var(--radius-md)", padding: "var(--space-4)" }}>
                <span style={{ color: "var(--ad-grey-100)" }}><Icon n={i.icon} size={20} /></span>
                <span style={{ fontSize: "var(--fs-sm)", color: "var(--ad-grey-100)" }}>{i.t}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

function CTA({ onNav }) {
  const { Button } = window.ArchDailyDesignSystem_788ad7;
  return (
    <section style={{ padding: "0 0 var(--space-9)" }}>
      <Container>
        <div style={{ background: "var(--ad-electric)", borderRadius: "var(--radius-lg)", padding: "var(--space-8)", display: "grid", gridTemplateColumns: "1.3fr 0.7fr", gap: "var(--space-6)", alignItems: "center" }}>
          <div>
            <h2 style={{ color: "var(--ad-grey-100)", fontSize: "var(--fs-h1)", letterSpacing: "var(--ls-tight)", margin: "0 0 var(--space-3)" }}>Let's build your partnership.</h2>
            <p style={{ color: "var(--ad-grey-100)", fontSize: "var(--fs-body-lg)", margin: 0 }}>We'll help you find the right fit — fast.</p>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: "var(--space-3)" }}>
            <Button variant="secondary" size="lg" href={routeHref("contact")} style={{ background: "#fff", color: "var(--ad-electric)", borderColor: "#fff" }} onClick={(e) => { e.preventDefault(); onNav("contact"); }} iconRight={<Icon n="arrow-up-right" size={18} />}>Partner with us</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Home({ onNav, onOpen }) {
  return (
    <div>
      <Hero onNav={onNav} />
      <StatBand />
      <FeaturedWork onOpen={onOpen} onNav={onNav} />
      <ClientStrip />
      <CTA onNav={onNav} />
    </div>
  );
}

Object.assign(window, { Home });