/* Testimonial — full-bleed photo on the left, pull-quote + KV brief on the
 * right. Real testimonial from the live site: Peter Boneham, Managing Director. */

function Testimonial() {
  return (
    <section id="testimonials" style={{
      background: "var(--ri-paper)", padding: "120px 0",
    }}>
      <Container>
        <div style={{
          display: "grid", gridTemplateColumns: "6fr 5fr",
          background: "var(--ri-ink)", color: "var(--fg-inverse)",
          borderRadius: 24, overflow: "hidden",
          minHeight: 560,
          boxShadow: "0 24px 64px rgba(8,5,38,0.20)",
        }} className="ri-quote-card">

          <div style={{ position: "relative" }}>
            <img
              src="assets/photography/team-conversation.webp"
              alt="Reformed IT cybersecurity engineers reviewing a client estate"
              style={{ width: "100%", height: "100%", objectFit: "cover",
                       objectPosition: "center 30%", display: "block",
                       position: "absolute", inset: 0 }}
            />
            <div aria-hidden="true" style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(90deg, transparent 60%, rgba(8,5,38,0.55) 100%)",
              pointerEvents: "none",
            }}></div>
            <div style={{
              position: "absolute", top: 22, left: 22,
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "6px 12px", borderRadius: 999,
              background: "rgba(8,5,38,0.55)", backdropFilter: "blur(8px)",
              fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase",
              color: "#fff", fontWeight: 600,
            }}>
              <span style={{ width: 5, height: 5, borderRadius: "50%",
                             background: "var(--ri-pink)" }}></span>
              Client · Boneham · Managing Director
            </div>
          </div>

          <div style={{ padding: "56px 48px", display: "flex",
                        flexDirection: "column", justifyContent: "space-between",
                        gap: 28, position: "relative" }}>
            <div aria-hidden="true" style={{
              position: "absolute", left: 0, right: 0, top: 0, height: 3,
              background: "var(--grad-brand)",
            }}></div>

            <div style={{
              fontFamily: "Georgia, serif", fontSize: 84, lineHeight: 0.4,
              color: "var(--ri-pink)", fontWeight: 700, marginBottom: -28,
            }} aria-hidden="true">"</div>

            <blockquote style={{
              margin: 0,
              fontSize: "clamp(22px, 2.4vw, 32px)",
              fontWeight: 600, lineHeight: 1.32, letterSpacing: "-0.015em",
              color: "#fff", textWrap: "balance",
            }}>
              Hands down the most proactive and responsive IT support company we have worked with. If you take cyber security and continuity seriously — we can honestly recommend the Reformed IT approach.
            </blockquote>

            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>Peter Boneham</div>
              <div style={{ fontSize: 12.5, color: "rgba(245,245,247,0.6)",
                            marginTop: 2, letterSpacing: "0.04em" }}>
                Managing Director · Boneham
              </div>
            </div>

            <dl style={{
              margin: 0, paddingTop: 22,
              borderTop: "1px solid rgba(255,255,255,0.10)",
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 24px",
            }}>
              <KVT k="Service" v="Fully-managed IT" />
              <KVT k="Sector" v="Manufacturing" />
              <KVT k="Response time" v="Avg < 30 min" />
              <KVT k="With us since" v="2021" />
            </dl>

            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <Button variant="primary" size="md" iconRight="arrow-right"
                      as="a" href="blog-post.html">
                Read the case study
              </Button>
              <span style={{ fontSize: 12, color: "rgba(245,245,247,0.5)" }}>7 min read</span>
            </div>
          </div>
        </div>

        {/* Secondary quote row — Nathan & Emma */}
        <div style={{
          marginTop: 16, display: "grid",
          gridTemplateColumns: "1fr 1fr", gap: 16,
        }} className="ri-quote-row">
          <SmallQuote
            text="Reformed IT have been beyond brilliant with helping us improve our current IT infrastructure and security. The services they provide has taken enormous pressure off our internal IT team."
            author="Nathan Warden"
            role="IT Technician"
          />
          <SmallQuote
            text="Excellent service, really professional and so helpful. Extremely willing to answer any questions regardless of how simple they may be. Would certainly recommend them to anyone."
            author="Emma Matier"
            role="Accountant"
          />
        </div>
      </Container>

      <style>{`
        @media (max-width: 980px) {
          .ri-quote-card { grid-template-columns: 1fr !important; min-height: 0 !important; }
          .ri-quote-card > div:first-child { min-height: 320px; }
          .ri-quote-card > div:first-child > div[aria-hidden] {
            background: linear-gradient(180deg, transparent 50%, rgba(8,5,38,0.6) 100%) !important;
          }
          .ri-quote-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function SmallQuote({ text, author, role }) {
  return (
    <article style={{
      background: "#fff", border: "1px solid var(--border)",
      borderRadius: 20, padding: "32px 28px",
      display: "flex", flexDirection: "column", gap: 18,
      position: "relative", overflow: "hidden",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", left: 0, right: 0, top: 0, height: 3,
        background: "var(--grad-brand)",
      }}></div>
      <div style={{
        fontFamily: "Georgia, serif", fontSize: 56, lineHeight: 0.4,
        color: "var(--ri-pink)", fontWeight: 700, marginBottom: -20,
      }} aria-hidden="true">"</div>
      <p style={{
        margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--fg)",
        fontWeight: 500, flex: 1,
      }}>{text}</p>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10,
                    paddingTop: 14, borderTop: "1px solid var(--border)" }}>
        <span style={{ fontSize: 14, fontWeight: 700 }}>{author}</span>
        <span style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>· {role}</span>
      </div>
    </article>
  );
}

function KVT({ k, v }) {
  return (
    <div>
      <dt style={{ fontSize: 10, letterSpacing: "0.18em",
                   textTransform: "uppercase", fontWeight: 600,
                   color: "var(--ri-pink)", marginBottom: 4 }}>{k}</dt>
      <dd style={{ margin: 0, fontSize: 13.5, fontWeight: 500,
                   color: "#fff", lineHeight: 1.35 }}>{v}</dd>
    </div>
  );
}

Object.assign(window, { Testimonial });