/* =========================================================
   SIGNET — Home page (Midnight + Gold)
   ========================================================= */

const Home = ({ go }) => {
  return (
    <main className="page-fade">
      {/* HERO — full bleed quill image */}
      <section className="hero">
        <div className="hero-bg" aria-hidden="true"></div>
        <div className="shell" style={{ position: "relative", zIndex: 2, width: "100%" }}>
          <div className="hero-content">
          <div className="hero-eyebrow">
            <span className="line"></span>
            <span>Managed IT · Established 2017</span>
          </div>
          <h1>
            Your IT,<br/>
            <em>sealed</em> with a<br/>
            signature.
          </h1>
          <p className="hero-sub">
            Signature Networks is the managed-services partner for growing businesses
            who are done with long ticket queues, vendor finger-pointing, and the
            quiet anxiety of not knowing if they're covered.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary" onClick={() => go("contact")}>
              Book a 30-min consult <Arrow />
            </button>
            <button className="btn btn-ghost" onClick={() => go("services")}>
              See what we cover
            </button>
          </div>
          <div className="hero-trust">
            <div className="stat">
              <div className="num">4 min</div>
              <div className="label">Avg. first response</div>
            </div>
            <div className="stat">
              <div className="num">98%</div>
              <div className="label">Satisfaction rating</div>
            </div>
            <div className="stat">
              <div className="num">50+</div>
              <div className="label">Solutions provided</div>
            </div>
            <div className="stat">
              <div className="num">14,000+</div>
              <div className="label">Tickets resolved</div>
            </div>
          </div>
          </div>
        </div>
      </section>

      {/* INTRO STATEMENT */}
      <section>
        <div className="shell">
          <div style={{ maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
            <span className="eyebrow">The Signet difference</span>
            <h2 style={{ marginTop: 24, fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.1 }}>
              A signet is the crest a craftsman pressed into wax to claim their work as their own. We stand behind ours — and proudly place our <em>mark</em> on yours.
            </h2>
            <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
              <SignatureMark width={220} />
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES PREVIEW */}
      <section style={{ paddingTop: 0 }}>
        <div className="shell">
          <div className="section-header">
            <div>
              <span className="eyebrow">What we cover</span>
              <h2 style={{ marginTop: 20 }}>
                One partner for the whole<br/>IT picture.
              </h2>
            </div>
          </div>
          <div className="services-grid">
            {SERVICES.map((s) => (
              <div key={s.id} className="service-cell" onClick={() => go("service-detail", s.id)}>
                <span className="service-num">{s.num}</span>
                <h3>{s.name}</h3>
                <p>{s.short}</p>
                <span className="service-arrow">→</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40, textAlign: "center" }}>
            <button className="btn btn-ghost" onClick={() => go("services")}>
              Explore every service <Arrow />
            </button>
          </div>
        </div>
      </section>

      {/* SIGNATURE PROMISE */}
      <section>
        <div className="shell">
          <div className="promise">
            <div>
              <span className="eyebrow">The signet promise</span>
              <h2 style={{ marginTop: 20 }}>
                Our name is our <em>guarantee</em>.
              </h2>
              <p style={{ marginTop: 24 }}>
                Four structural commitments. Not marketing language —
                contract terms. If we ever stop earning your business, you
                stop paying.
              </p>
              <div style={{ marginTop: 32 }}>
                <SignatureMark width={200} />
              </div>
            </div>
            <div className="promise-list">
              <div className="promise-item">
                <span className="num">I.</span>
                <p className="body">
                  <strong>One named team.</strong> Every client gets a dedicated trio
                  — a Tech Support Agent, a Sysadmin, and a Client Success Rep. The same
                  three voices from kickoff to year ten.
                </p>
              </div>
              <div className="promise-item">
                <span className="num">II.</span>
                <p className="body">
                  <strong>Plain-English agreements.</strong> No convoluted legalese — just straightforward expertise.
                </p>
              </div>
              <div className="promise-item">
                <span className="num">III.</span>
                <p className="body">
                  <strong>No vendor games.</strong> Independent advice on every
                  tool. Fully vetted and trusted solutions.
                </p>
              </div>
              <div className="promise-item">
                <span className="num">IV.</span>
                <p className="body">
                  <strong>Month-to-month, always.</strong> If we ever stop earning
                  your business, you stop paying. No exit fees, ever.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section>
        <div className="shell">
          <div className="testimonial">
            <div>
              <span className="eyebrow">What clients say</span>
              <p className="testimonial-quote" style={{ marginTop: 28 }}>
                We replaced four vendors and an internal sysadmin with Signet
                and somehow have less to think about. Their team knows our
                stack better than we do.
              </p>
              <div className="testimonial-attr">
                <a href="https://proactivemonitoring.us" target="_blank" rel="noopener noreferrer" style={{
                  width: 120, height: 40,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>
                  <img src="img/sandru-logo.png" alt="Sandru Monitoring" style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }} />
                </a>
                <div>
                  <div className="testimonial-name">Mike Sandru</div>
                  <div className="testimonial-role">Owner, Sandru Monitoring — Bellevue, WA</div>
                </div>
              </div>
            </div>
            <div className="media-frame" style={{ aspectRatio: "1 / 1" }}>
              <Placeholder />
              <a
                href="https://proactivemonitoring.us"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  position: "absolute",
                  top: "50%", left: "50%",
                  transform: "translate(-50%, -50%)",
                  width: "70%", display: "block",
                  zIndex: 1
                }}
              >
                <img
                  src="img/sandru-logo.png"
                  alt="Sandru Monitoring"
                  style={{ width: "100%", height: "auto", display: "block" }}
                />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS — onboarding journey */}
      <section>
        <div className="shell">
          <div className="section-header">
            <div>
              <span className="eyebrow">The first 90 days</span>
              <h2 style={{ marginTop: 20 }}>A calm, deliberate <em>handover</em>.</h2>
            </div>
            <p className="lead">
              The first three months set the tone for the next ten years. Here
              is exactly what we do — and what we ask of you.
            </p>
          </div>
          <div className="journey">
            {[
              { w: "Week 01", t: "Listen.", d: "We sit with your team, audit every system, and document what we find — no proposals yet." },
              { w: "Weeks 02–04", t: "Stabilize.", d: "We patch the security gaps, take over alerts, and absorb your ticket queue. You feel quieter immediately." },
              { w: "Months 02–03", t: "Standardize.", d: "Identity, devices, backup, and documentation aligned to one playbook. Your audit becomes a printout." },
              { w: "Month 03+", t: "Grow.", d: "Quarterly roadmaps, budget reviews, and the kind of strategic conversation IT rarely makes time for." },
            ].map((s, i) => (
              <div key={i} className="journey-step">
                <span className="when">{s.w}</span>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaStrip go={go} />
    </main>
  );
};

window.Home = Home;