// Strategic Technology Solutions — Home page
// Three hero directions (A classic split, B immersive gradient, C editorial)
// + reorderable content sections.

// ---------- Animated constellation canvas (Hero B) ----------
function NetworkCanvas() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const cv = ref.current;
    if (!cv) return;
    const ctx = cv.getContext("2d");
    let raf, w, h, pts;
    const DPR = Math.min(2, window.devicePixelRatio || 1);
    const resize = () => {
      w = cv.clientWidth;h = cv.clientHeight;
      cv.width = w * DPR;cv.height = h * DPR;
      ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
      const n = Math.max(26, Math.round(w * h / 26000));
      pts = Array.from({ length: n }, () => ({
        x: Math.random() * w, y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.22, vy: (Math.random() - 0.5) * 0.22,
        r: Math.random() * 1.6 + 0.8
      }));
    };
    const draw = () => {
      ctx.clearRect(0, 0, w, h);
      for (let i = 0; i < pts.length; i++) {
        const p = pts[i];
        p.x += p.vx;p.y += p.vy;
        if (p.x < 0 || p.x > w) p.vx *= -1;
        if (p.y < 0 || p.y > h) p.vy *= -1;
        for (let j = i + 1; j < pts.length; j++) {
          const q = pts[j];
          const dx = p.x - q.x,dy = p.y - q.y;
          const d = Math.hypot(dx, dy);
          if (d < 132) {
            ctx.strokeStyle = "rgba(150,235,240," + 0.16 * (1 - d / 132) + ")";
            ctx.lineWidth = 1;
            ctx.beginPath();ctx.moveTo(p.x, p.y);ctx.lineTo(q.x, q.y);ctx.stroke();
          }
        }
      }
      for (const p of pts) {
        ctx.fillStyle = "rgba(215,250,252,0.85)";
        ctx.beginPath();ctx.arc(p.x, p.y, p.r, 0, 7);ctx.fill();
      }
      raf = requestAnimationFrame(draw);
    };
    resize();draw();
    window.addEventListener("resize", resize);
    return () => {cancelAnimationFrame(raf);window.removeEventListener("resize", resize);};
  }, []);
  return <canvas ref={ref}></canvas>;
}

// ---------- Stats data ----------
const VALICEN_STATS = [
{ value: 200, suffix: "+", lab: "organizations served in five states and three countries" },
{ value: 97, suffix: "%", lab: "client retention, year over year" },
{ value: 1, prefix: "<", suffix: " hour", lab: "guaranteed response, backed by SLA" }];


function StatRow() {
  return (
    <div className="stat-row">
      {VALICEN_STATS.map((s) =>
      <div className="stat" key={s.lab}>
          <div className="num"><CountUp value={s.value} suffix={s.suffix} prefix={s.prefix} /></div>
          <div className="lab">{s.lab}</div>
        </div>
      )}
    </div>);

}

// ---------- HERO A — classic split ----------
// Single cycling status check on the hero laptop screen (lower-right):
// each item appears, gets checked off with a strikethrough, then is replaced
// by the next — endlessly. Hidden for reduced-motion users (the static
// "All systems normal" readout carries the message).
function ScreenChecks() {
  const items = [["radio-tower", "Highly Available"], ["shield-check", "Secure"], ["activity", "Performant"]];
  const reduce = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [st, setSt] = React.useState({ i: 0, phase: 0 }); // 0 shown · 1 checked · 2 leaving
  React.useEffect(() => {
    if (reduce) return;
    const t = setInterval(() => {
      setSt((s) => s.phase < 2 ? { i: s.i, phase: s.phase + 1 } : { i: (s.i + 1) % items.length, phase: 0 });
    }, 950);
    return () => clearInterval(t);
  }, []);
  React.useEffect(() => { window.lucide && lucide.createIcons(); });
  if (reduce) return null;
  const [ic, label] = items[st.i];
  return (
    <div className="screen-checks">
      <div key={st.i} className={"check-item" + (st.phase >= 1 ? " done" : "") + (st.phase === 2 ? " out" : "")}>
        <i data-lucide={ic}></i><span className="lbl">{label}</span>
        <span className="check-badge" aria-hidden="true">
          <svg viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5 L5 9 L9.5 3.5" stroke="#04222B" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"></path></svg>
        </span>
      </div>
    </div>);

}

function HeroA({ go }) {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  return (
    <section className="hero heroA">
      <div className="wrap">
        <div className="heroA-grid">
          <div>
            <div className="eyebrow">Strategic Technology Solutions</div>
            <h1>A partnership you can trust.</h1>
            <p className="lede">Embrace practical, cybersecurity infused IT for your small business, so the performance, security, and availability keeps you online and ready for what's next.</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => go("contact")}>Get started <i data-lucide="arrow-right"></i></button>
              <button className="btn btn-ghost btn-lg" onClick={() => go("work")}>View our work</button>
            </div>
          </div>
          <div className="heroA-art as-device">
            <div className="laptop">
              <div className="laptop-screen netart calm">
                <div className="calm-grid"></div>
                <div className="calm-glow"></div>
                <div className="calm-stage">
                  <img className="mark" src="assets/valicen-mark-white.svg" alt="" />
                </div>
                <div className="screen-bottombar">
                  <div className="screen-status">All systems normal</div>
                  <ScreenChecks />
                </div>
              </div>
              <div className="laptop-base"></div>
            </div>
          </div>
        </div>
        <StatRow />
      </div>
    </section>);

}

// ---------- HERO B — immersive gradient ----------
function HeroB({ go }) {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  return (
    <section className="hero heroB">
      <NetworkCanvas />
      <div className="wrap">
        <div className="inner">
          <div className="eyebrow">Strategic Technology Solutions</div>
          <h1>Your invisible security blanket.</h1>
          <p className="lede">We keep small businesses protected, productive, and ready for what's next — calm, expert IT and cybersecurity that quietly does its job in the background.</p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={() => go("contact")}>Get started <i data-lucide="arrow-right"></i></button>
            <button className="btn btn-ghost-light btn-lg" onClick={() => go("services")}>Explore services</button>
          </div>
          <div className="floaters">
            <div className="netart chip" style={{ position: "static" }}><i data-lucide="shield-check"></i>Secure by default</div>
            <div className="netart chip" style={{ position: "static" }}><i data-lucide="activity"></i>Monitored 24/7</div>
            <div className="netart chip" style={{ position: "static" }}><i data-lucide="zap"></i>11-min response</div>
          </div>
          <StatRow />
        </div>
      </div>
    </section>);

}

// ---------- HERO C — editorial asymmetric ----------
function HeroC({ go }) {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const tick = [
  ["shield-check", "Cybersecurity"], ["network", "Networking"],
  ["server", "Data center"], ["monitor-smartphone", "Managed workstations"],
  ["cloud", "Cloud services"], ["database-backup", "Data protection"]];

  return (
    <section className="hero heroC">
      <div className="wrap">
        <div className="kicker-line"></div>
        <div className="eyebrow">Strategic Technology Solutions</div>
        <h1>Technology that <span className="tq">works</span> for business.</h1>
        <div className="heroC-foot">
          <div>
            <p className="lede">Secure, practical IT and cybersecurity for small businesses. We handle the technology so you can run the company — protected, efficient, and ready for what's next.</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => go("contact")}>Talk to an engineer <i data-lucide="arrow-right"></i></button>
              <button className="btn btn-ghost btn-lg" onClick={() => go("work")}>View our work</button>
            </div>
          </div>
          <div className="heroC-card">
            <div className="row"><div className="ic"><i data-lucide="shield-check"></i></div><div className="tx"><b>Always-on protection</b><span>Threat monitoring &amp; response</span></div></div>
            <div className="row"><div className="ic"><i data-lucide="phone-call"></i></div><div className="tx"><b>One team to call</b><span>Workstations to cloud</span></div></div>
            <div className="row"><div className="ic"><i data-lucide="trending-up"></i></div><div className="tx"><b>Built to scale</b><span>Tech that grows with you</span></div></div>
          </div>
        </div>
        <div className="ticker">
          <div className="ticker-track">
            {[...tick, ...tick].map(([ic, t], i) =>
            <span className="ticker-item" key={i}><i data-lucide={ic}></i>{t}</span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Sections ----------
function Capabilities({ go }) {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const caps = [
  { icon: "shield-check", title: "Cybersecurity", body: "Always-on protection — threat monitoring, response, and the controls that keep your business secure by default." },
  { icon: "network", title: "Networking", body: "Fast, secure networks — cabling, fiber, switching, firewalls, and Wi-Fi — keeping your sites connected and protected." },
  { icon: "server", title: "Data center", body: "Resilient, performant infrastructure — designed, run, and monitored so uptime is never your problem." },
  { icon: "monitor-smartphone", title: "Managed workstations", body: "Every device patched, protected, and supported. Your team stays productive; we handle the rest." },
  { icon: "cloud", title: "Cloud services", body: "Cloud that's right-sized for cost, security, and growth — plus practical AI and automation that removes busywork." },
  { icon: "database-backup", title: "Data protection", body: "Backup, recovery, and continuity planning so your data survives anything — and so do you." }];

  return (
    <section className="section alt" id="solutions">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow">Solutions</div>
          <h2>Comprehensive IT, end to end.</h2>
          <p>From workstations to data center to cloud — one team for the technology your business runs on, secured at every layer.</p>
        </div>
        <div className="cap-grid">
          {caps.map((c) =>
          <a className="cap reveal" key={c.title} href="#" onClick={(e) => {e.preventDefault();go("services");}}>
              <div className="ico"><i data-lucide={c.icon}></i></div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <span className="more">Learn more <i data-lucide="arrow-right"></i></span>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function EngagementModel() {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const steps = [
  { n: "01", t: "Assess + Baseline", b: "We map your environment, surface the gaps, and baseline performance, security, and availability at every layer — an honest read of where you stand, in plain language." },
  { n: "02", t: "Solution", b: "We design the right-sized fix for your business and budget — options and trade-offs on the table, no overbuilding, no fear-based upsell." },
  { n: "03", t: "Build", b: "We implement carefully and document everything — migrations, hardening, and rollouts delivered without interrupting your work." },
  { n: "04", t: "Monitor", b: "Always-on monitoring and automated response, backed by proactive, human-led spot checks. You'll hear from us before you hear about a problem." }];

  return (
    <section className="band" id="platform">
      <img className="band-mark" src="assets/valicen-mark-white.svg" alt="" />
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow">How we work</div>
          <h2>Calm, expert guidance.</h2>
          <p>Reliable security and a team that already handled the thing you're worried about — so technology becomes an advantage, not a distraction.</p>
        </div>
        <div className="steps">
          {steps.map((s, i) =>
          <div className={"step reveal" + (i === 3 ? " on" : "")} key={s.n}>
              <div className="n">{s.n} — {s.t.toUpperCase()}</div>
              <h4>{s.t}</h4>
              <p>{s.b}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// One client slot: shows a real logo image from assets/logos/<slug>.(svg|png)
// when present, and falls back to the styled wordmark until a file is dropped in.
function LogoItem({ name, slug }) {
  const exts = ["svg", "png", "webp"];
  const [i, setI] = React.useState(0);
  const failed = i >= exts.length;
  return (
    <span className={"cl" + (failed ? " cl-text" : " cl-has-img")}>
      {!failed &&
      <img
        className="cl-img"
        src={"assets/logos/" + slug + "." + exts[i]}
        alt={name}
        loading="lazy"
        onError={() => setI(i + 1)} />
      }
      {failed && <span className="cl-txt">{name}</span>}
    </span>);

}

function Proof() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head center reveal">
          <div className="eyebrow">In good company</div>
          <h2>Trusted by businesses that can't afford downtime.</h2>
        </div>
        <div className="logos reveal">
          {["Sheraton", "SPS Technologies", "Akron-Canton Regional Foodbank", "American Endowment Foundation", "Hissong Kenworth", "Cold Heading Company", "Otto Koningslow Manufacturing", "Michigan Rivet Corporation", "Euclid Fish", "Specialty Lubricants", "Sadler Stamping", "Reliable Title", "Omni Realty", "Pasco", "Inrecon", "Model Box", "Wartko Construction", "Zavarello and Davis", "Shapero and Associates", "Gesa Design", "Karlsson Spools"].map((c) =>
          <LogoItem key={c} name={c} slug={c.toLowerCase().replace(/&/g, "and").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")} />
          )}
        </div>
      </div>
    </section>);

}

function Testimonials() {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  const qs = [
  { q: "“When a new operating platform was suggested as \u201clow maintenance,\u201d I admit I had my doubts \u2014 but it ended up reducing the need for visits by less than half.”", n: "Managing Partner", r: "Established law firm", i: "BG" },
  { q: "“The move to the cloud ended up being fantastic. We're able to do more now than before \u2014 plus not having to worry about hardware refreshes in the server closet.”", n: "Owner", r: "Long-standing building & remodeling company", i: "BR" },
  { q: "\u201cBold and complete thinking\u201d \u2014 an uncommonly thorough global networking strategy most organizations struggle to create.", n: "Senior Analyst", r: "Enterprise technology advisory firm", i: "EA" }];

  return (
    <section className="section alt">
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="eyebrow">In their words</div>
          <h2>The kind of partner you don't have to manage.</h2>
        </div>
        <div className="quote-grid">
          {qs.map((t) =>
          <figure className="quote reveal" key={t.n}>
              <div className="stars">{[0, 1, 2, 3, 4].map((i) => <i data-lucide="star" key={i}></i>)}</div>
              <blockquote>{t.q}</blockquote>
              <figcaption className="who">
                <span className="av">{t.i}</span>
                <span><b>{t.n}</b><span>{t.r}</span></span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

function CTA({ go }) {
  React.useEffect(() => {window.lucide && lucide.createIcons();});
  return (
    <section className="cta">
      <div className="wrap reveal">
        <h2>Let's make technology your advantage.</h2>
        <p>Tell us what's keeping you up at night. We'll spend an hour on it with you — no pitch, just a clear next step.</p>
        <div className="cta-actions">
          <button className="btn btn-primary btn-lg" onClick={() => go("contact")}>Get started <i data-lucide="arrow-right"></i></button>
          <button className="btn btn-ghost btn-lg" onClick={() => go("contact")}>Talk to an engineer</button>
        </div>
      </div>
    </section>);

}

// ---------- Home assembly ----------
function HomePage({ go, heroDir, order }) {
  useReveal();
  const Hero = heroDir === "B" ? HeroB : heroDir === "C" ? HeroC : HeroA;
  const sections = {
    services: <Capabilities key="services" go={go} />,
    process: <EngagementModel key="process" />,
    proof: <Proof key="proof" />,
    testimonials: <Testimonials key="testimonials" />
  };
  return (
    <main className="page-enter">
      <Hero go={go} />
      {order.map((k) => sections[k]).filter(Boolean)}
      <CTA go={go} />
    </main>);

}

Object.assign(window, { HomePage });