/* global React */
const { useState, useMemo } = window.ReactHooks;

function HomePage() {
  const [tab, setTab] = useState("Revenue");
  const products = window.PRODUCTS;

  return (
    <main>
      {/* HERO */}
      <section className="hero gridbg">
        <div className="container">
          <div className="hero-chip" style={{ marginBottom: 32 }}>
            <span className="dot" />
            <span>Available on Microsoft AppSource</span>
          </div>
          <h1 className="display">
            Custom Power BI visuals<br/>
            <em>engineered for the enterprise.</em>
          </h1>
          <div className="hero-meta">
            <a href="#/catalog" className="btn">Browse the catalog →</a>
            <a href="#/gallery" className="btn btn-ghost">See live demos</a>
            <span className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", color: "var(--muted)", textTransform: "uppercase" }}>
              10 visuals · 70,000+ installs · 4.8★ average
            </span>
          </div>

          {/* Chart Panel */}
          <div className="chart-panel">
            <div className="chart-panel-head">
              <div className="chart-tabs" role="tablist">
                {["Revenue", "Pipeline", "Retention"].map((t) => (
                  <button key={t} className={"chart-tab " + (tab === t ? "active" : "")} onClick={() => setTab(t)}>
                    {t}
                  </button>
                ))}
              </div>
              <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--muted)", textTransform: "uppercase" }}>
                  Horizon KPI · Live
                </span>
                <span className="hero-chip"><span className="dot" /> LIVE</span>
              </div>
            </div>
            <div className="chart-body">
              <window.LineChart width={760} height={360} seed={tab === "Revenue" ? 17 : tab === "Pipeline" ? 42 : 91} />
              <div className="kpi-col">
                <div className="kpi">
                  <div className="label">{tab} this quarter</div>
                  <div className="value num">{tab === "Revenue" ? "$12.8M" : tab === "Pipeline" ? "$34.1M" : "94.2%"}</div>
                  <div className="delta">▲ {tab === "Revenue" ? "12.4%" : tab === "Pipeline" ? "8.9%" : "2.1pt"} vs prior</div>
                </div>
                <div className="kpi">
                  <div className="label">Against target</div>
                  <div className="value num">{tab === "Revenue" ? "104%" : tab === "Pipeline" ? "96%" : "107%"}</div>
                  <div className="delta">On track</div>
                </div>
                <div className="kpi">
                  <div className="label">Last refresh</div>
                  <div className="value num" style={{ fontSize: 18 }}>2 min ago</div>
                  <div className="delta muted" style={{ color: "var(--muted)" }}>Direct Query · Azure SQL</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="section compact">
        <div className="container">
          <div className="stats">
            <div className="stat"><div className="n num">10</div><div className="lbl">Visuals shipped</div></div>
            <div className="stat"><div className="n num">70K+</div><div className="lbl">Total installs</div></div>
            <div className="stat"><div className="n num">4.8★</div><div className="lbl">Average rating</div></div>
            <div className="stat"><div className="n num">&lt; 4h</div><div className="lbl">Support reply</div></div>
          </div>
        </div>
      </section>

      {/* FEATURED CATALOG */}
      <section className="section">
        <div className="container">
          <div className="section-label">
            <span className="mono">01 · Catalog</span>
            <span className="rule" />
            <a href="#/catalog" className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase" }}>All 10 visuals →</a>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, marginBottom: 48 }}>
            <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 52px)", margin: 0 }}>
              Ten visuals, each designed to do one thing exceptionally well.
            </h2>
            <p style={{ color: "var(--muted)", fontSize: 16, maxWidth: 520, alignSelf: "end", margin: 0 }}>
              No gimmicks, no scope creep. Each visual is maintained on its own roadmap, documented like an SDK, and supported directly by the engineers who built it.
            </p>
          </div>
          <div className="cards">
            {products.slice(0, 8).map((p) => (
              <a key={p.id} href={"#/product?id=" + p.id} className="card">
                <div className="card-vis">
                  <div className="card-tag">{p.category}</div>
                  <window.ProductVisual id={p.id} />
                </div>
                <div>
                  <div className="card-title">{p.name}</div>
                  <div className="card-sub">{p.tagline}</div>
                </div>
                <div className="card-foot">
                  <span>v{p.version}</span>
                  <span className="price">${p.price}<span style={{ color: "var(--muted)", textTransform: "lowercase", letterSpacing: 0 }}> / seat / mo</span></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section">
        <div className="container">
          <div className="section-label">
            <span className="mono">02 · Principles</span>
            <span className="rule" />
          </div>
          <div className="split-2">
            <h2 className="bigcopy">The details that never make it into the marketing screenshots are the ones we obsess over.</h2>
            <p style={{ color: "var(--muted)", fontSize: 16, alignSelf: "end", margin: 0 }}>
              TC builds visuals for teams that ship dashboards to boards, regulators and field operators. That means accessibility, print fidelity, and rigorous performance on datasets that don't fit on a laptop.
            </p>
          </div>
          <div className="spacer-8" />
          <div className="feature-row">
            {[
              ["A01", "Certified build pipeline", "Every visual goes through the Microsoft certification path and is code-signed before release."],
              ["A02", "Accessibility to WCAG 2.2 AA", "Color-blind safe defaults, keyboard navigation, and screen-reader summaries in every visual."],
              ["A03", "Direct-query performant", "Tested on billion-row models. Minimal re-renders, debounced filters, and GPU-accelerated rendering where it counts."],
              ["A04", "Versioned & pinned", "Lock to a version, upgrade on your schedule. Release notes for every patch, not just majors."],
              ["A05", "Print & export parity", "What you see on the dashboard is what lands in the PDF export — sub-pixel rendering included."],
              ["A06", "Supported by engineers", "Support is triaged by the people who wrote the code. Median response time: under four hours."]
            ].map(([n, t, d]) => (
              <div key={n} className="cell">
                <span className="n">{n}</span>
                <span className="t">{t}</span>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LOGO STRIP */}
      <section className="section compact">
        <div className="container">
          <div className="section-label">
            <span className="mono">03 · Trusted by data teams at</span>
            <span className="rule" />
          </div>
          <div className="logo-row">
            <span>NORTHWIND ENERGY</span>
            <span>ACME HEALTH</span>
            <span>HELIX BANK</span>
            <span>CONTOSO RETAIL</span>
            <span>FABRIKAM LOGISTICS</span>
            <span>MERIDIAN CAPITAL</span>
            <span>ATLAS GROUP</span>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="container">
          <div className="split-2" style={{ alignItems: "center" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Get started</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: 0, letterSpacing: "-0.03em" }}>
                Pilot a single visual, free for 30 days.
              </h2>
            </div>
            <div style={{ display: "flex", gap: 16, alignItems: "center", justifySelf: "end" }}>
              <a href="#/catalog" className="btn btn-accent">Start a pilot →</a>
              <a href="#/contact" className="btn btn-ghost">Talk to sales</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.HomePage = HomePage;