/* ============================================================
   End sections: Integrations, Testimonials, FAQ, CTA, Footer.
   Composes Card, Badge, Avatar, Button, Input, Logo.
   ============================================================ */
const DS = window.AlfiaDesignSystem_8207ac;
const CAL = "https://calendly.com/amit-alfia/intro";

const INTEGRATIONS = [
"Manhattan", "Körber", "HighJump", "3PL Central", "NetSuite", "ShipHero",
"Infoplus", "Outlook", "Gmail", "EDI / X12", "Excel", "REST API"];


function Integrations() {
  const { Card } = DS;
  return (
    <section className="section section--sunken" id="integrations">
      <div className="wrap">
        <SectionHead
          narrow
          eyebrow="Integrations"
          title="Works with the tools and workflows you already run."
          sub="Native connectors for the major warehouse and order systems, plus an API for anything in-house." />
        
        <div className="int-grid reveal">
          {INTEGRATIONS.map((name) =>
          <Card key={name} variant="default" interactive padding="none" className="int">
              <span className="int-name">{name}</span>
            </Card>
          )}
        </div>
        <p className="int-note reveal">
          Don't see your system? Alfia connects to anything with API or file access.{" "}
          <a href="#demo" className="arrow-link">Ask us <Icon name="arrowRight" size={15} /></a>
        </p>
      </div>
    </section>);

}

const TCARDS = [
{ stat: "92%", unit: " of orders", role: "Director of Operations", org: "Regional 3PL",
  q: "Roughly nine in ten orders now post to our WMS untouched. My team finally has time for the exceptions that actually matter." },
{ stat: "3 days", unit: " to live", role: "COO", org: "High-volume 3PL",
  q: "We pointed Alfia at our orders inbox on a Monday and it was entering live orders by Thursday. No migration, no IT project." },
{ stat: "6→1", unit: " coordinators", role: "General Manager", org: "Enterprise 3PL",
  q: "Peak season used to mean six temps just on data entry. This year we ran it with one person reviewing exceptions." }];


function Testimonials() {
  const { Card, Avatar } = DS;
  return (
    <section className="section section--sunken" id="customers">
      <div className="wrap">
        <div className="quote-wrap reveal">
          <div className="mk">&ldquo;</div>
          <blockquote>
            Our coordinators used to spend every morning copy-pasting orders out of their inbox. Now Alfia has the
            queue cleared before they sit down. <em>That's 3 hours saved every day.</em>
          </blockquote>
          <div className="byline">
            <Avatar agent name="Jordan L." size="lg" />
            <div className="who">
              <div className="n">Jordan L., VP of Operations

              </div>
              <div className="r">Regional 3PL</div>
            </div>
          </div>
        </div>
      </div>
    </section>);}

const FAQS = [
{ q: "Do we have to change our WMS?",
  a: "No. Alfia layers on top of your existing WMS and inboxes. We connect through your system's API or supported integrations and write orders the same way your team does today, so there's nothing to migrate." },
{ q: "What order formats can Alfia read?",
  a: "PDFs, Excel and CSV sheets, scanned documents, EDI, and plain email bodies. Each customer tends to send orders differently, and Alfia learns each one's quirks, from odd SKU codes to abbreviations and layouts." },
{ q: "How long does onboarding take?",
  a: "Most 3PLs are processing live orders within a couple of weeks. We start with one customer or order type, tune accuracy with your team, then expand account by account at your pace." },
{ q: "What happens when Alfia isn't sure?",
  a: "Every field carries a confidence score. Anything below your threshold routes to a review queue with the source document attached, so a coordinator can confirm or correct in seconds. Nothing posts to the WMS without clearing your rules." },
{ q: "How is Alfia priced?",
  a: "Pricing scales with order volume, so it tracks the work Alfia takes off your team. Request a demo and we'll size it to your operation and share a clear estimate." }];


function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section section--sunken" id="faq">
      <div className="wrap faq-wrap">
        <div className="reveal faq-intro">
          <Eyebrow>FAQ</Eyebrow>
          <h2>Questions, answered.</h2>
          <p>
            Can't find what you need?{" "}
            <a href="#demo" className="arrow-link">Talk to our team <Icon name="arrowRight" size={15} /></a>
          </p>
        </div>
        <div className="faq-list reveal">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className={"faq-item" + (isOpen ? " open" : "")} key={i}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  {f.q}
                  <span className="pm"><Icon name="plus" size={13} stroke={2.4} /></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? "260px" : "0px" }}>
                  <p>{f.a}</p>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

const SUPA_URL = "https://sqhphqyboakwoqoyxblq.supabase.co";
const SUPA_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InNxaHBocXlib2Frd29xb3l4YmxxIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzYzODM4NDcsImV4cCI6MjA5MTk1OTg0N30.M2TgKU6UA6A9rDekqhEieVPuUKS3fKIzZtHlNQ0O7xY";

function CTA() {
  const { Button, Input } = DS;
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | loading | done

  const go = async (e) => {
    e.preventDefault();
    if (!email) return;
    setStatus("loading");
    if (window.alfiaTrack) window.alfiaTrack("demo_requested", { trigger: "cta_form" });
    try {
      await fetch(`${SUPA_URL}/rest/v1/demo_signups`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "apikey": SUPA_KEY,
          "Authorization": `Bearer ${SUPA_KEY}`,
          "Prefer": "return=minimal",
        },
        body: JSON.stringify({ email }),
      });
    } catch (_) {}
    setStatus("done");
    window.open(CAL, "_blank", "noopener");
  };

  return (
    <section className="section cta-section" id="demo">
      <div className="wrap">
        <div className="cta reveal">
          <h2>Your team should be running your 3PL, not chasing spreadsheets.</h2>
          <p>See Alfia run your own workflows in a 30-minute demo.</p>
          <form className="cta-form" onSubmit={go}>
            <div className="cta-field">
              <Input type="email" name="email" required placeholder="you@company.com"
              aria-label="Work email" leadingIcon={<Icon name="mail" size={16} />}
              value={email} onChange={e => setEmail(e.target.value)} />
            </div>
            <Button type="submit" variant="accent" size="lg" disabled={status === "loading"}
            trailingIcon={status === "loading" ? null : <Icon name="arrowRight" size={17} />}>
              {status === "loading" ? "Sending…" : "Request demo"}
            </Button>
          </form>
          <span className="cta-fine">No migration. Live in your stack in weeks.</span>
        </div>
      </div>
    </section>);

}

function Footer() {
  const { Logo, Button } = DS;
  return (
    <footer className="footer footer--lean">
      <div className="wrap">
        <div className="foot-lean">
          <div className="foot-brand">
            <a className="brand" href="#top"><Logo src="assets/alfia-lockup.png" height={30} /></a>
            <p>AI agents that perform in 3PL complexity.</p>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Alfia, Inc.</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Integrations, Testimonials, FAQ, CTA, Footer });