// AboutPage.jsx — "About us" story, principles, and the Locate2u connection.

// Locate2u brand glyph — white upward swoosh arrow (drawn to fill currentColor).
function LDLocate2uMark({ size = 26 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 512 512" fill="none" aria-hidden="true">
      <path
        d="M74 208 C156 256 256 326 330 298 L320 262 L452 222 L410 352 L366 308 C290 372 168 336 86 220 Z"
        fill="currentColor"
      />
    </svg>
  );
}

function LDAbout() {
  const principles = [
    {
      icon: window.LDIcon.Calendar,
      title: "Real dates, not vague promises",
      body: "A customer who sees “Friday, 9am–12pm” trusts you more than one who sees “2–5 business days.” We make the real delivery date the default at checkout.",
    },
    {
      icon: window.LDIcon.Check,
      title: "Only sell what you can deliver",
      body: "Slots, cutoffs, blackout dates and per-area limits mean you never take an order you can’t fulfil. Under-promise at the cart, over-deliver at the door.",
    },
    {
      icon: window.LDIcon.Bolt,
      title: "Live on your store this afternoon",
      body: "No developer and no theme surgery. Install from the App Store, draw your delivery areas, and the scheduler shows up in your cart the same day.",
    },
    {
      icon: window.LDIcon.Star,
      title: "Fair, predictable pricing",
      body: "One simple monthly price with a free trial. No per-order fees skimming your margins, and no surprise upgrade to unlock the basics.",
    },
  ];

  // Customer journey for the "where it fits" card.
  const flow = [
    { mark: <window.LDShopifyBag size={24} />, bg: "#fff", label: "Shopify storefront", note: "Customer checks out" },
    { mark: <span style={{ fontStyle: "italic", fontWeight: 900, fontSize: 20, letterSpacing: "-1.5px", lineHeight: 1, paddingLeft: 1 }}>LD</span>, bg: "var(--ld-yellow)", label: "Local Delivery Premium", note: "Picks area, date & time" },
    { mark: <LDLocate2uMark size={26} />, bg: "#2E9BF5", color: "#fff", label: "Locate2u", note: "Routed & delivered on time" },
  ];

  const partners = ["Shopify", "Locate2u", "Twilio", "Zapier"];

  return (
    <React.Fragment>
      {/* ---- Our story ---- */}
      <section className="ld-section" style={{ background: "var(--ld-cream)" }}>
        <div className="ld-container-wide">
          <div className="ld-split-r" style={{ alignItems: "center" }}>
            <div>
              <span className="ld-eyebrow ld-eyebrow-dot">Our story</span>
              <h2 className="ld-h2" style={{ marginTop: 18 }}>
                Built by people who move things for a living.
              </h2>
              <p className="ld-body" style={{ marginTop: 22, fontSize: 17 }}>
                Local Delivery Premium grew out of Locate2u — the routing and dispatch
                platform that helps delivery teams plan stops, optimise routes, and get
                orders to the door on time. Day after day we watched Shopify merchants
                try to bolt local delivery onto a checkout that was only ever designed
                for shipping labels.
              </p>
              <p className="ld-body" style={{ marginTop: 18, fontSize: 17 }}>
                So we built the piece that was missing: a delivery scheduler that lives
                right in the cart. Pick an area, pick a date, pick a time — and the order
                flows straight through to the people who actually deliver it. No
                spreadsheets, no guesswork, no “we’ll call you to arrange a time.”
              </p>
            </div>

            {/* "Where it fits" lineage card */}
            <div style={{
              background: "#fff", border: "2px solid var(--ld-ink)", borderRadius: 20,
              boxShadow: "8px 8px 0 var(--ld-ink)", padding: "26px 24px",
              transform: "rotate(-1.4deg)",
            }}>
              <div className="ld-mono" style={{
                fontSize: 10, color: "var(--ld-ink-soft)", letterSpacing: "1.4px",
                textTransform: "uppercase", fontWeight: 700, marginBottom: 18,
              }}>
                Where it fits
              </div>
              {flow.map((s, i) => (
                <React.Fragment key={s.label}>
                  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 11, flexShrink: 0,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      background: s.bg,
                      border: "1.5px solid var(--ld-ink)",
                      boxShadow: "3px 3px 0 var(--ld-ink)",
                      color: s.color || "var(--ld-ink)",
                    }}>
                      {s.mark}
                    </div>
                    <div>
                      <div style={{ fontWeight: 800, fontSize: 15, color: "var(--ld-ink)", letterSpacing: "-0.2px" }}>{s.label}</div>
                      <div className="ld-small" style={{ marginTop: 2 }}>{s.note}</div>
                    </div>
                  </div>
                  {i < flow.length - 1 && (
                    <div style={{ paddingLeft: 14, height: 26, display: "flex", alignItems: "center" }}>
                      <svg width="16" height="20" viewBox="0 0 16 20" fill="none" stroke="var(--ld-ink-soft)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="M8 2v14M3 11l5 5 5-5" />
                      </svg>
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ---- What we believe ---- */}
      <section className="ld-section" style={{ background: "var(--ld-paper)", borderTop: "1px solid var(--ld-line)", borderBottom: "1px solid var(--ld-line)" }}>
        <div className="ld-container-wide">
          <div style={{ maxWidth: 620, marginBottom: 48 }}>
            <span className="ld-eyebrow ld-eyebrow-dot">What we believe</span>
            <h2 className="ld-h2" style={{ marginTop: 18 }}>Delivery should be honest.</h2>
            <p className="ld-lead" style={{ marginTop: 16 }}>
              A few principles shape every feature we ship — and a few we deliberately don’t.
            </p>
          </div>

          <div className="ld-split-2" style={{ alignItems: "stretch", gap: 24 }}>
            {principles.map((p) => (
              <div key={p.title} className="ld-card" style={{ padding: "30px 28px", borderRadius: 20 }}>
                <div style={{
                  width: 52, height: 52, borderRadius: 14,
                  background: "var(--ld-yellow)", border: "1.5px solid var(--ld-ink)",
                  boxShadow: "3px 3px 0 var(--ld-ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "var(--ld-ink)", marginBottom: 20,
                }}>
                  <p.icon size={24} />
                </div>
                <h3 className="ld-h4" style={{ marginBottom: 10 }}>{p.title}</h3>
                <p className="ld-body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---- Part of Locate2u (dark band) ---- */}
      <section style={{ background: "var(--ld-dark)", color: "#fff", padding: "96px 0", position: "relative", overflow: "hidden" }}>
        <div aria-hidden="true" style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(620px 420px at 88% 8%, rgba(255,214,10,0.18), transparent 62%)",
        }} />
        <div className="ld-container-wide" style={{ position: "relative" }}>
          <div className="ld-split-r" style={{ alignItems: "center" }}>
            <div style={{ maxWidth: 560 }}>
              <span className="ld-eyebrow" style={{ color: "var(--ld-yellow)" }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ld-yellow)", display: "inline-block" }} />
                Part of Locate2u
              </span>
              <h2 className="ld-h2" style={{ color: "#fff", marginTop: 16, letterSpacing: "-1.6px" }}>
                The same delivery DNA, now at checkout.
              </h2>
              <p className="ld-body" style={{ color: "rgba(255,255,255,0.72)", marginTop: 20, fontSize: 17 }}>
                Local Delivery Premium is a product of Locate2u — software trusted by
                delivery and field teams to plan routes, dispatch drivers, and track jobs
                in real time. That means the dates your customers pick at checkout can
                feed a real delivery operation, not just another email notification.
              </p>
              <a href="https://locate2u.com" target="_blank" rel="noreferrer" className="ld-btn ld-btn-lg" style={{
                marginTop: 30, background: "var(--ld-yellow)", color: "var(--ld-ink)",
                border: "2px solid var(--ld-ink)", boxShadow: "0 4px 0 rgba(255,255,255,0.35)",
              }}>
                Explore Locate2u <window.LDIcon.Arrow size={14} />
              </a>
            </div>

            <div>
              <div className="ld-mono" style={{ color: "rgba(255,255,255,0.5)", fontSize: 11, letterSpacing: "1.6px", textTransform: "uppercase", fontWeight: 600, marginBottom: 18 }}>
                Works with the tools you already use
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
                {partners.map((name) => (
                  <span key={name} style={{
                    display: "inline-flex", alignItems: "center", gap: 9,
                    padding: "11px 18px", borderRadius: 999,
                    background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.16)",
                    color: "#fff", fontWeight: 700, fontSize: 15,
                  }}>
                    <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--ld-yellow)" }} />
                    {name}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}
window.LDAbout = LDAbout;