// Home page — Hero D (editorial, typographic) + what-we-do + capabilities
// + a teaser pointing to the Product page.

// ────────── Hero D · the picked direction ──────────
const HomeHero = () => (
  <section style={{
    position: "relative", overflow: "hidden",
    minHeight: "calc(88vh - 72px)",
    display: "flex", flexDirection: "column",
    padding: "56px 80px 48px",
  }}>
    <div className="site-grid" />
    <div className="nh-glow" style={{
      width: 760, height: 760, right: "12%", top: -240,
      background: "radial-gradient(circle, var(--nh-amber) 0%, transparent 60%)",
      opacity: 0.12,
    }} />
    <div className="nh-glow" style={{
      width: 700, height: 700, left: -200, bottom: -240,
      background: "radial-gradient(circle, var(--nh-violet) 0%, transparent 60%)",
      opacity: 0.10,
    }} />

    <div className="site-wrap" style={{
      position: "relative", flex: 1,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        paddingTop: 24,
      }}>
        <span className="nh-mono" style={{
          fontSize: 11, color: "var(--nh-accent)", letterSpacing: "0.28em", textTransform: "uppercase",
        }}>
          ◇ NEOHELIO · SMART ENERGY MANAGEMENT
        </span>
      </div>

      <div style={{ maxWidth: 1100, marginTop: 56 }}>
        <h1 style={{
          fontFamily: "var(--nh-display)", fontWeight: 500,
          fontSize: "clamp(64px, 9vw, 132px)",
          lineHeight: 0.96, letterSpacing: "-0.04em",
          margin: 0, color: "var(--nh-ink)",
          textWrap: "balance",
        }}>
          Smart energy management platform for operators.
        </h1>
        <p style={{
          fontFamily: "var(--nh-display)", fontWeight: 400,
          fontSize: 22, lineHeight: 1.45, letterSpacing: "-0.01em",
          color: "var(--nh-ink-2)", margin: "36px 0 0", maxWidth: 720,
          textWrap: "balance",
        }}>
          neohelio builds orbit — a vendor-agnostic platform that turns solar telemetry into money saved, expected yield delivered, and faults closed. Operators see one console for every site, regardless of who supplied the equipment.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 40 }}>
          <a href="contact.html" className="site-btn site-btn--primary">Get in touch →</a>
          <a href="#what-we-do" className="site-btn">What we do</a>
        </div>
      </div>

      <div style={{
        marginTop: 64, paddingTop: 24,
        borderTop: "1px solid var(--nh-line)",
        display: "flex", justifyContent: "space-between", alignItems: "baseline",
        gap: 32, flexWrap: "wrap",
      }}>
        <span className="nh-mono" style={{
          fontSize: 11, color: "var(--nh-ink-3)", letterSpacing: "0.22em", textTransform: "uppercase",
        }}>
          ◇ NOW ONBOARDING NEW OPERATORS
        </span>
        <a href="#what-we-do" className="nh-mono nh-scroll-cue" style={{
          fontSize: 11, color: "var(--nh-accent)", letterSpacing: "0.22em", textTransform: "uppercase",
          display: "inline-flex", alignItems: "center", gap: 10,
        }}>
          SCROLL <span className="nh-scroll-cue__arrow">↓</span>
        </a>
      </div>
    </div>
  </section>
);

// ────────── What we do — three-column with the parent/product/edge story ──────────
const HomeWhatWeDo = () => (
  <section id="what-we-do" className="site-section">
    <div className="site-wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, marginBottom: 80 }}>
        <div>
          <SiteEyebrow id="WHAT WE DO" />
          <h2 className="site-h2" style={{ marginTop: 24 }}>
            What we build.
          </h2>
        </div>
        <div>
          <p className="site-body" style={{ fontSize: 18, maxWidth: 640 }}>
            orbit is one vendor-agnostic platform with two halves: a site layer that integrates with any equipment at the plant, and a cloud console the operator uses to run the fleet. We deliver both to EPCs and operators as one solution.
          </p>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
        <ColumnCard
          tag="AT THE PLANT"
          title="orbit satellite"
          subtitle="Site integration layer"
          body="Connects to inverters, meters, weather stations, and balance-of-plant equipment from any vendor. Normalises everything onto one schema, buffers locally, and uplinks to the cloud."
          bullets={[
            "Vendor-agnostic equipment integration",
            "Local buffering on low-bandwidth sites",
            "Multi-protocol — RS-485, Modbus, RJ-45",
          ]}
          accent="amber"
        />
        <ColumnCard
          tag="IN THE CLOUD"
          title="orbit console"
          subtitle="Operator-facing platform"
          body="Fleet financial view, site-level live telemetry with TOU bands, alert triage, performance against simulation, and a built-in CMMS — all from one console."
          bullets={[
            "Financial-first fleet view",
            "Multi-source cross-validation",
            "Platform Signals — derived alerts",
          ]}
          accent="amber"
          highlight
        />
        <ColumnCard
          tag="DELIVERED BY NEOHELIO"
          title="One platform, one team"
          subtitle="For the EPC and the operator"
          body="EPCs ship one solution to the operator. The operator gets one console for the whole fleet, with the same view regardless of who built the plant or supplied the equipment."
          bullets={[
            "Nine OEM integrations and growing",
            "Built-in CMMS — tasks, assets, SLAs",
            "Telegram, email, in-app notifications",
          ]}
          accent="violet"
        />
      </div>
    </div>
  </section>
);

const ColumnCard = ({ tag, title, subtitle, body, bullets, accent, highlight }) => (
  <div className="nh-card" style={{
    padding: 32,
    background: highlight
      ? "linear-gradient(180deg, rgba(245,158,11,0.05), rgba(245,158,11,0.005))"
      : undefined,
    borderColor: highlight ? "var(--nh-line-amber)" : undefined,
    position: "relative",
  }}>
    <div className="nh-mono" style={{
      fontSize: 10, color: `var(--nh-${accent})`,
      letterSpacing: "0.22em", textTransform: "uppercase",
    }}>◇ {tag}</div>
    <h3 className="site-h3" style={{ marginTop: 18 }}>{title}</h3>
    <div className="nh-mono" style={{
      fontSize: 11, color: "var(--nh-ink-3)", marginTop: 6, letterSpacing: "0.12em",
    }}>{subtitle}</div>
    <p style={{
      fontFamily: "var(--nh-sans)", fontSize: 15, lineHeight: 1.6,
      color: "var(--nh-ink-2)", margin: "20px 0 24px",
    }}>{body}</p>
    <ul style={{
      borderTop: "1px solid var(--nh-line)",
      paddingTop: 16, margin: 0, listStyle: "none",
      display: "flex", flexDirection: "column", gap: 10,
    }}>
      {bullets.map((b, i) => (
        <li key={i} style={{
          display: "flex", gap: 12,
          fontFamily: "var(--nh-sans)", fontSize: 14, color: "var(--nh-ink-2)",
          lineHeight: 1.45,
        }}>
          <span style={{ color: `var(--nh-${accent})`, marginTop: 1 }}>—</span>
          <span>{b}</span>
        </li>
      ))}
    </ul>
  </div>
);

// ────────── Capabilities grid — six items ──────────
const CAPABILITIES = [
  {
    n: "01",
    title: "Money first",
    body: "The fleet view leads with savings month-to-date, baseline comparison, wasted revenue, and a blended tariff. A bot summary tells you what you've earned and what you'll close at.",
  },
  {
    n: "02",
    title: "Time-of-use intelligence",
    body: "Peak, standard, and off-peak tariff bands overlaid directly on every site's live power curve. Calibrated per site, per tariff structure.",
  },
  {
    n: "03",
    title: "Multi-source cross-validation",
    body: "When two OEMs read the same plant, orbit shows both side by side and quantifies the disagreement. You pick the authoritative source per metering point.",
  },
  {
    n: "04",
    title: "Curtailment auto-investigation",
    body: "Detected curtailment events open a pre-filled investigation task with the time window, site, and assignee. The OEM-alarm to field-engineer loop happens inside one platform.",
  },
  {
    n: "05",
    title: "IEC 61724-1 PR vs simulation",
    body: "Performance Ratio against HelioScope P50/P90 expected, with panel-degradation curves auto-applied per OEM datasheet from the commissioning anniversary.",
  },
  {
    n: "06",
    title: "Platform Signals",
    body: "Derived alerts the OEMs don't raise — yield-trend decay, agreed-demand breach with dead-band tolerance, PF-correction opportunity surfaced in currency-per-month.",
  },
];

const HomeCapabilities = () => (
  <section id="capabilities" className="site-section" style={{ background: "var(--nh-bg-2)" }}>
    <div className="site-wrap">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, marginBottom: 64, alignItems: "end" }}>
        <div>
          <SiteEyebrow id="CAPABILITIES" />
          <h2 className="site-h2" style={{ marginTop: 24 }}>
            Capabilities.
          </h2>
        </div>
        <p className="site-body" style={{ fontSize: 18, maxWidth: 620 }}>
          What the platform does today. Latency, retention, and integration figures come from the production fleet — they are not aspirational.
        </p>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        borderTop: "1px solid var(--nh-line)",
        borderLeft: "1px solid var(--nh-line)",
      }}>
        {CAPABILITIES.map((c, i) => (
          <div key={i} style={{
            padding: 32,
            borderRight: "1px solid var(--nh-line)",
            borderBottom: "1px solid var(--nh-line)",
            display: "flex", flexDirection: "column", minHeight: 260,
            position: "relative",
          }}>
            <span className="nh-mono" style={{
              fontSize: 14, color: "var(--nh-accent)", letterSpacing: "0.16em",
            }}>{c.n}</span>
            <h3 style={{
              fontFamily: "var(--nh-display)", fontWeight: 500,
              fontSize: 22, letterSpacing: "-0.02em",
              margin: "32px 0 16px", maxWidth: "16ch",
            }}>{c.title}</h3>
            <p style={{
              fontFamily: "var(--nh-sans)", fontSize: 14, lineHeight: 1.6,
              color: "var(--nh-ink-2)", margin: 0,
            }}>{c.body}</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, textAlign: "center" }}>
        <a href="product.html" className="site-btn">See the platform in detail →</a>
      </div>
    </div>
  </section>
);

// ────────── Product teaser — a flat console screenshot with copy ──────────
const HomeOrbitTeaser = () => (
  <section className="site-section">
    <div className="site-wrap">
      <div style={{
        display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 64, alignItems: "center",
      }}>
        <div>
          <SiteEyebrow id="THE PLATFORM" />
          <h2 className="site-h2" style={{ marginTop: 24 }}>
            <span style={{ fontStyle: "italic", fontWeight: 400, color: "var(--nh-accent)" }}>orbit</span><br />
            the operator console.
          </h2>
          <p className="site-body" style={{ fontSize: 17, marginTop: 28 }}>
            Fleet view, site detail, alert triage, forecasts, and historical roll-ups. Designed for a large monitor in a low-light room.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
            <a href="product.html" className="site-btn site-btn--primary">Product detail →</a>
            <a href="contact.html" className="site-btn">Book a demo</a>
          </div>

          <div style={{
            marginTop: 48, paddingTop: 24,
            borderTop: "1px solid var(--nh-line)",
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, rowGap: 18,
          }}>
            {[
              ["FLEET VIEW", "Financial-first, all sites in one list"],
              ["SITE DETAIL", "Live telemetry with TOU bands"],
              ["ALERT TRIAGE", "OEM alarms and Platform Signals"],
              ["BUILT-IN CMMS", "Tasks, assets, SLA escalation"],
            ].map(([k, v], i) => (
              <div key={i}>
                <div className="nh-mono" style={{
                  fontSize: 10, color: "var(--nh-accent)", letterSpacing: "0.18em",
                }}>◇ {k}</div>
                <div style={{
                  fontFamily: "var(--nh-sans)", fontSize: 13, color: "var(--nh-ink-2)",
                  marginTop: 6, lineHeight: 1.5,
                }}>{v}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ position: "relative", aspectRatio: "16 / 10" }}>
          {/* corner brackets */}
          {["tl", "tr", "bl", "br"].map((c) => (
            <div key={c} style={{
              position: "absolute", width: 18, height: 18,
              borderColor: "var(--nh-accent)", borderStyle: "solid",
              borderWidth:
                c === "tl" ? "1px 0 0 1px" : c === "tr" ? "1px 1px 0 0" :
                c === "bl" ? "0 0 1px 1px" : "0 1px 1px 0",
              top: c.includes("t") ? -10 : "auto",
              bottom: c.includes("b") ? -10 : "auto",
              left: c.includes("l") ? -10 : "auto",
              right: c.includes("r") ? -10 : "auto",
              opacity: 0.7,
            }} />
          ))}
          <div className="nh-mono" style={{
            position: "absolute", top: -28, left: 0,
            fontSize: 10, color: "var(--nh-ink-3)", letterSpacing: "0.22em",
          }}>
            ◇ ORBIT · FLEET-VIEW · LIVE
          </div>
          <img src="img/fleet-financial.jpg" alt="orbit Fleet view in Financial mode"
            style={{
              width: "100%", height: "100%", display: "block",
              objectFit: "cover", objectPosition: "top left",
              border: "1px solid var(--nh-line)",
            }}
          />
        </div>
      </div>
    </div>
  </section>
);

// ────────── The home page composition ──────────
const HomePage = () => (
  <>
    <SiteNav active="home" />
    <main>
      <HomeHero />
      <HomeWhatWeDo />
      <HomeCapabilities />
      <HomeOrbitTeaser />
      <SiteCTA
        eyebrow="NH-CTA/01"
        title="Get in touch."
        body="For EPCs and operators. Tell us about the fleet — capacity, regions, current equipment — and we will follow up with a demo."
        primary="Contact us"
        primaryHref="contact.html"
        secondary="See the platform"
        secondaryHref="product.html"
      />
    </main>
    <SiteFooter />
  </>
);

window.HomePage = HomePage;