// FAQ.jsx — simple accordion
function LDFAQ({ showIntro = true }) {
  const faqs = [
    {
      q: "Does Local Delivery Premium work with my Shopify theme?",
      a: "Yes. It works with every modern Shopify theme out of the box — the popular free themes and most premium ones alike. The date picker installs on the cart drawer and the cart page with a one-click installer, and for heavily customised themes our team is happy to help you get it set up.",
    },
    {
      q: "Do I have to replace Shopify’s checkout?",
      a: "No. Local Delivery Premium sits on top of Shopify checkout. Customers still complete their purchase on Shopify; the delivery window is attached to the order and visible in the admin and in your driver app.",
    },
    {
      q: "What’s the difference between Local Delivery Premium and Locate2u?",
      a: "Local Delivery Premium is the Shopify app that lets your customers pick a delivery date on the cart. Locate2u is our dispatch + route-optimization platform that takes those orders and gives them to drivers. They’re sister products — install Local Delivery Premium first; turn on Locate2u when you have multiple drivers and want optimized routes.",
    },
    {
      q: "Can I run different rules for different days of the week?",
      a: "Yes. Order deadlines, fees, and slot lengths can all vary by day of week, by delivery area, by product, and by tag. Sunday delivery from 12pm? Wednesday delivery only for orders above $80? Both fine.",
    },
    {
      q: "Which countries do you support?",
      a: "Anywhere you can deliver. Postcode formats and timezones are set up per store, so it works for local delivery in most countries — the US, Canada, UK, EU, Australia, New Zealand, and beyond.",
    },
    {
      q: "What about delivery fees — does it integrate with Shopify shipping rates?",
      a: "It does. Local Delivery Premium becomes the shipping rate for your local delivery areas, replacing your flat-rate or calculated shipping rate for those postcodes. Customers outside your delivery areas still see your existing Shopify shipping options.",
    },
  ];

  if (!showIntro) {
    return (
      <section style={{ background: "var(--ld-paper)", padding: "96px 0", borderTop: "1px solid var(--ld-line)" }}>
        <div className="ld-container-wide" style={{ maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          {faqs.map((f, i) => <FAQItem key={i} {...f} defaultOpen={i === 0}/>)}
          <div style={{ marginTop: 48, textAlign: "center" }}>
            <p className="ld-body" style={{ marginBottom: 20 }}>
              Got other questions? Our team is happy to help during business hours, wherever you are — drop us a message and we’ll get back to you.
            </p>
            <a href="support.html" className="ld-btn ld-btn-ghost">
              Send us a message <window.LDIcon.Arrow size={14}/>
            </a>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section style={{ background: "var(--ld-paper)", padding: "112px 0", borderTop: "1px solid var(--ld-line)" }}>
      <div className="ld-container-wide ld-faq-split">
        <div>
          <span className="ld-eyebrow ld-eyebrow-dot">FAQ</span>
          <h2 className="ld-h2" style={{ marginTop: 16 }}>
            Questions, asked and answered.
          </h2>
          <p className="ld-body" style={{ marginTop: 20 }}>
            Got other questions? Our team is happy to help during business hours, wherever you are — drop us a message and we’ll get back to you.
          </p>
          <a href="support.html" className="ld-btn ld-btn-ghost" style={{ marginTop: 24 }}>
            Send us a message <window.LDIcon.Arrow size={14}/>
          </a>
        </div>

        <div>
          {faqs.map((f, i) => <FAQItem key={i} {...f} defaultOpen={i === 0}/>)}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, defaultOpen }) {
  const [open, setOpen] = React.useState(defaultOpen || false);
  return (
    <div style={{ borderTop: "1px solid var(--ld-line)" }}>
      <button
        onClick={() => setOpen((o) => !o)}
        style={{
          width: "100%", textAlign: "left",
          background: "transparent", border: "none",
          padding: "24px 0",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 24, cursor: "pointer",
        }}
      >
        <span style={{ fontSize: 18, fontWeight: 700, color: "var(--ld-ink)", letterSpacing: "-0.2px" }}>{q}</span>
        <span style={{
          flexShrink: 0,
          width: 32, height: 32, borderRadius: "50%",
          background: open ? "var(--ld-green)" : "var(--ld-green-tint)",
          color: open ? "#fff" : "var(--ld-green)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          transition: "all 180ms ease",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>
          <window.LDIcon.Plus size={14}/>
        </span>
      </button>
      {open && (
        <p style={{
          margin: 0, padding: "0 0 24px 0", paddingRight: 56,
          fontSize: 15, lineHeight: 1.65, color: "var(--ld-ink-mute)",
        }}>{a}</p>
      )}
    </div>
  );
}

window.LDFAQ = LDFAQ;