/* eslint-disable no-undef */
/**
 * Home page — Direction A (Editorial Quiet), with real No Stone copy threaded in.
 * Lives at /index.html (also surfaced on /review.html as the 01 artboard).
 */
function NsHomeA() {
  return (
    <div className="ns-page" data-screen-label="Home">
      <NsNav variant="light" floating={true} />

      {/* HERO — white, two-column editorial */}
      <section style={{ padding: "152px 64px 96px", background: "var(--color-canvas)" }}>
        <div style={{ maxWidth: 1152, margin: "0 auto", display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 72, alignItems: "center" }}>
          <div>
            <div className="ns-eyebrow" style={{ marginBottom: 24 }}>
              <span className="ns-au-dot" />For Australian MSPs and IT providers
            </div>
            <h1 style={{
              fontFamily: "var(--font-display)",
              fontSize: 52, fontWeight: 400,
              letterSpacing: "-1.3px", lineHeight: 1.08,
              margin: 0, color: "var(--color-ink)",
              textWrap: "balance"
            }}>
              Content + Customer Engagement.<br />Consulting + Coaching.
            </h1>
            <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--color-body)", maxWidth: 540, marginTop: 28 }}>
              Practical support for Australian MSPs who want expert content, clearer offers, better delivery, and consistent customer engagement.
            </p>
            <div className="ns-cta-pair ns-cta-pair--hero" style={{ marginTop: 36 }}>
              <a href="contact.html" className="btn btn--cta" style={{ textDecoration: "none" }}>Contact us</a>
              <a href="contact.html?request=sample" className="btn btn--secondary" style={{ height: 56, padding: "16px 28px", textDecoration: "none" }}>
                Request a content sample <NsIcon name="arrow" size={16} />
              </a>
            </div>
            <div style={{ marginTop: 56, display: "flex", gap: 32, alignItems: "center", paddingTop: 32, borderTop: "1px solid var(--color-hairline)" }}>
              <ContactStat icon="phone" primary="(02) 9188 7845" sub="Australian business hours" />
              <ContactStat icon="mail" primary="hello@nostone.com.au" sub="One business day reply" />
            </div>
          </div>
          <HeroCardStackA />
        </div>
      </section>

      {/* INTRO — what we do, the two levers */}
      <section className="ns-band ns-band--soft">
        <div className="ns-band__inner">
          <div className="ns-section-head">
            <div style={{ maxWidth: 720 }}>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 400, letterSpacing: "-1px", margin: 0, lineHeight: 1.05 }}>
                Taking the stress out of MSP content, and helping IT providers hit their goals.
              </h2>
            </div>
            <p style={{ fontSize: 16, color: "var(--color-body)", maxWidth: 360, margin: 0 }}>
              No Stone supports Australian MSPs and IT providers with two practical levers. The focus is on outcomes and usable deliverables, not theory.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
            <PillarCardA
              tag="Content"
              title="Expert Content."
              desc="No Stone helps MSPs stay visible and credible with consistent, ready-to-publish content built for Australian SME audiences."
              body="You receive a monthly pack that can include long-form authority content such as a whitepaper, social posts, quote cards, and client-ready email copy. Everything is written to sound like your business, not generic marketing. We also run a short monthly review call to help you turn content into real conversations and pipeline, without adding workload to your team."
              cta="Learn more"
              href="content.html" />
            
            <PillarCardA
              tag="Guidance"
              title="Specialist Consulting and Coaching."
              desc="Practical consulting and coaching for MSP owners and IT service leaders. Sharper offers, better margins, and cleaner delivery."
              body="Typical work includes service packaging and pricing guidance, reducing delivery variation and rework, improving handoffs and operating rhythm, and building a simple 90-day plan your team can actually execute."
              cta="Learn more"
              href="guidance.html" />
            
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — 5 quotes from real clients */}
      <section className="ns-band">
        <div className="ns-band__inner">
          <div style={{ maxWidth: 640, marginBottom: 56 }}>
            <div className="ns-eyebrow" style={{ marginBottom: 16 }}>Voices</div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 400, letterSpacing: "-1px", margin: 0, lineHeight: 1.08 }}>
              What people are saying.
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            <TestimonialCard
              featured
              quote="As a small MSP, we're so busy servicing clients that we don't have time to research and write our own content. This has made it easy to boost our online presence and grow organic leads."
              name="Neil" />
            
            <TestimonialCard
              quote="I've worked with No Stone for the past few months and they've been a huge help. Always coming up with new ideas and contributing any way they can."
              name="Connor" />
            
            <TestimonialCard
              quote="We were struggling to build credibility in cybersecurity. No Stone's content changed that, and we're growing our security offering much faster."
              name="Tom" />
            
            <TestimonialCard
              quote="Blown away by how much time this has saved us. We can focus on developing and selling our services while positioning ourselves as thought leaders. It's opened up channels we couldn't use before."
              name="Susan" />
            
            <TestimonialCard
              quote="No Stone is a huge help to the team. We were struggling to produce enough content, and this is exactly what we needed. The articles are well written, relevant, and thought-provoking."
              name="James" />
            
          </div>
        </div>
      </section>

      {/* DARK CTA */}
      <section style={{ background: "var(--color-surface-dark)", color: "var(--color-on-dark)", padding: "120px 64px" }}>
        <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontSize: 60, fontWeight: 400, letterSpacing: "-1.5px", lineHeight: 1.05, margin: "0 0 20px" }}>
            Let's talk about what your MSP needs.
          </h2>
          <p style={{ fontSize: 18, color: "var(--color-on-dark-soft)", margin: "0 0 36px", maxWidth: 560, marginInline: "auto" }}>
            Whether you want consistent content, sharper service offers, or a second opinion on delivery, we're happy to help.
          </p>
          <div className="ns-cta-pair ns-cta-pair--center">
            <a href="contact.html" className="btn btn--cta" style={{ textDecoration: "none" }}>Contact us</a>
            <a href="contact.html?request=sample" className="btn btn--outline-dark" style={{ height: 56, padding: "16px 28px", textDecoration: "none" }}>
              Request a content sample
            </a>
          </div>
          <div style={{ marginTop: 40, paddingTop: 28, borderTop: "1px solid rgba(255,255,255,0.12)", display: "flex", gap: 32, justifyContent: "center", fontSize: 14, color: "var(--color-on-dark-soft)" }}>
            <a href="tel:+61291887845" style={{ color: "inherit", textDecoration: "none", fontWeight: 600 }}>(02) 9188 7845</a>
            <span>·</span>
            <a href="mailto:hello@nostone.com.au" style={{ color: "inherit", textDecoration: "none" }}>hello@nostone.com.au</a>
          </div>
        </div>
      </section>

      <NsFooter variant="light" />
    </div>);

}

function ContactStat({ icon, primary, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
      <span style={{ color: "var(--color-primary)", marginTop: 2 }}><NsIcon name={icon === "phone" ? "compass" : "mail"} size={20} /></span>
      <div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 16, fontWeight: 600, color: "var(--color-ink)", lineHeight: 1.2, letterSpacing: "-0.1px" }}>{primary}</div>
        <div style={{ fontSize: 12, color: "var(--color-muted)", marginTop: 4 }}>{sub}</div>
      </div>
    </div>);

}

function PillarCardA({ tag, title, desc, body, cta, href }) {
  return (
    <div style={{
      background: "var(--color-canvas)", border: "1px solid var(--color-hairline)",
      borderRadius: 24, padding: 40, display: "flex", flexDirection: "column", gap: 20
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="ns-chip ns-chip--primary">{tag}</span>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 400, letterSpacing: "-0.5px", lineHeight: 1.1, color: "var(--color-ink)" }}>
        {title}
      </div>
      <div style={{ fontSize: 16, color: "var(--color-ink)", fontWeight: 500, lineHeight: 1.55 }}>{desc}</div>
      <div style={{ fontSize: 15, color: "var(--color-body)", lineHeight: 1.65 }}>{body}</div>
      <a href={href} className="ns-link" style={{ marginTop: "auto" }}>{cta} <NsIcon name="arrow" size={14} /></a>
    </div>);

}

function Stars({ count = 5 }) {
  return (
    <span style={{ display: "inline-flex", gap: 2, color: "var(--color-primary)" }}>
      {Array.from({ length: count }).map((_, i) =>
      <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2 14.5 8.5 21.5 9.2 16.2 13.8 17.9 20.7 12 17 6.1 20.7 7.8 13.8 2.5 9.2 9.5 8.5z" />
        </svg>
      )}
    </span>);

}

function TestimonialCard({ quote, name, featured }) {
  return (
    <figure style={{
      margin: 0,
      background: featured ? "var(--color-surface-soft)" : "var(--color-canvas)",
      border: "1px solid var(--color-hairline)",
      borderRadius: 24, padding: 32,
      display: "flex", flexDirection: "column", gap: 20
    }}>
      <Stars />
      <blockquote style={{
        margin: 0,
        fontFamily: "var(--font-body)",
        fontSize: 16,
        lineHeight: 1.6,
        color: "var(--color-ink)",
        fontWeight: 400
      }}>
        "{quote}"
      </blockquote>
      <figcaption style={{ marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--color-hairline-soft)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "var(--color-ink)" }}>{name}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--color-muted)", letterSpacing: "0.04em", textTransform: "uppercase" }}>MSP client</div>
      </figcaption>
    </figure>);

}

/* HERO RIGHT — layered "content artifact" mockups (kept from approved layout) */
function HeroCardStackA() {
  return (
    <div style={{ position: "relative", height: 520 }}>
      {/* Back: monthly content schedule card */}
      <div className="ns-float-card--light" style={{
        position: "absolute", top: 0, right: 0, width: 360, padding: 28, borderRadius: 24
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
          <div style={{ fontSize: 12, color: "var(--color-muted)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Monthly content pack</div>
          <span className="ns-chip ns-chip--primary" style={{ padding: "2px 8px", fontSize: 11 }}>Ready to publish</span>
        </div>
        {[
        { d: "Flagship", title: "What MDR really costs in 2026", type: "Whitepaper" },
        { d: "Post 01", title: "Three things to pressure-test before your PSA migration", type: "Social" },
        { d: "Post 02", title: "What 'managed' actually means in 2026", type: "Social" },
        { d: "Email", title: "Renewal-season checklist for SMB IT", type: "Newsletter" }].
        map((row, i) =>
        <div key={i} style={{
          display: "grid", gridTemplateColumns: "56px 1fr", alignItems: "center", gap: 12,
          padding: "10px 0", borderTop: i > 0 ? "1px solid var(--color-hairline-soft)" : "1px solid var(--color-hairline)"
        }}>
            <div className="ns-mono-cap" style={{ fontSize: 11 }}>{row.d}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--color-ink)", lineHeight: 1.3 }}>{row.title}</div>
              <div style={{ fontSize: 11, color: "var(--color-muted)", marginTop: 2 }}>{row.type}</div>
            </div>
          </div>
        )}
      </div>

      {/* Front: article preview card */}
      <div className="ns-float-card--light" style={{
        position: "absolute", bottom: 0, left: 0, width: 360, padding: 0, borderRadius: 24, overflow: "hidden"
      }}>
        <div style={{
          height: 140,
          background: "linear-gradient(135deg, #3167ac 0%, #1f2a40 100%)",
          padding: 24, display: "flex", alignItems: "flex-end", color: "#fff"
        }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.75 }}>Flagship · Whitepaper</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.3px", marginTop: 8, lineHeight: 1.15 }}>
              What MDR really costs in 2026.
            </div>
          </div>
        </div>
        <div style={{ padding: 24 }}>
          <div style={{ fontSize: 13, color: "var(--color-body)", lineHeight: 1.55 }}>
            A breakdown of what Australian SMBs are actually paying for managed detection and response — and the per-seat lines that get quietly added later.
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 20, fontSize: 12, color: "var(--color-muted)" }}>
            <span>Sample piece</span>
            <a href="contact.html?request=sample" className="ns-link" style={{ fontSize: 12 }}>Request sample <NsIcon name="arrow" size={12} /></a>
          </div>
        </div>
      </div>
    </div>);

}

window.NsHomeA = NsHomeA;