/* global React, SiteIcon, Sparkle, Reveal, Stagger, CountUp, useInView */

const { useState: useStateS, useEffect: useEffectS } = React;

/* ---------- Trusted-by marquee ---------- */
function Marquee() {
  const brands = ["Lumen", "Northwind", "Aurora Goods", "Fabric", "Vela", "Cedar & Co", "Mökk", "Stride", "Halcyon", "Pebble"];
  const row = [...brands, ...brands];
  return (
    <div className="marquee-wrap">
      <div className="container">
        <div className="marquee-label">Trusted by margin minded merchants</div>
      </div>
      <div className="marquee-mask">
        <div className="marquee">
          {row.map((b, i) => (<span className="brand" key={i}>{b}</span>))}
        </div>
      </div>
    </div>
  );
}

/* ---------- Problem ---------- */
function Problem() {
  return (
    <section id="problem" className="problem wrap">
      <div className="container">
        <Reveal><div className="eyebrow">The problem with public discounts</div></Reveal>
        <Reveal delay={60}><h2 className="quote">Discounts are static. <span className="agent">Shoppers are dynamic.</span></h2></Reveal>
        <Reveal delay={120}>
          <p className="lead">
            Most stores rely on generic coupons, public markdowns, and abandoned cart blasts.
            They train customers to wait, leak margin to the wrong buyers, and erode brand pricing.
            DealAgent creates a smarter, private offer based on margin, inventory, customer intent, and cart value.
          </p>
        </Reveal>
        <div className="problem-stats">
          <Reveal delay={40}><div className="problem-stat"><div className="v"><CountUp value={3.4} decimals={1} suffix="×"/></div><div className="l">More margin captured per accepted offer vs. public discount codes</div></div></Reveal>
          <Reveal delay={120}><div className="problem-stat"><div className="v"><CountUp value={68} suffix="%"/></div><div className="l">Average offer acceptance rate across pilot brands</div></div></Reveal>
          <Reveal delay={200}><div className="problem-stat"><div className="v">0</div><div className="l">Public discount codes leaked to coupon sites</div></div></Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- How it works, connected pipeline ---------- */
function HowItWorks() {
  const [ref, inView] = useInView({ threshold: 0.4 });
  return (
    <section id="how" className="how wrap">
      <div className="container">
        <div className="how-head">
          <Reveal><div className="eyebrow" style={{ justifyContent: "center" }}>How DealAgent works</div></Reveal>
          <Reveal delay={60}><h2 className="h2">Margin rules in. <span className="agent">Profitable offers out.</span></h2></Reveal>
          <Reveal delay={120}><p className="lead">One engine connects your guardrails to every offer surface, humans and AI agents alike.</p></Reveal>
          <Reveal delay={180}><a className="btn btn-secondary" href="how-it-works.html" style={{ marginTop: 20 }}>See the full walkthrough →</a></Reveal>
        </div>

        <div className={`pipeline ${inView ? "in" : ""}`} ref={ref}>
          <div className="pipeline-track"><div className="fill"></div></div>
          <div className="pipeline-token"></div>

          <div className="how-grid">
            <Reveal delay={0}>
              <div className="step">
                <div className="ill">
                  <div className="step-badge"><SiteIcon name="scroll" size={14}/></div>
                  <svg className="node" width="80" height="80" viewBox="0 0 80 80" fill="none">
                    <rect x="10" y="14" width="60" height="52" rx="10" fill="#EAF2FF" stroke="#BBD5FF"/>
                    <rect x="18" y="24" width="44" height="6" rx="3" fill="#116DFF"/>
                    <rect x="18" y="36" width="32" height="4" rx="2" fill="#BBD5FF"/>
                    <rect x="18" y="44" width="38" height="4" rx="2" fill="#BBD5FF"/>
                    <rect x="18" y="52" width="28" height="4" rx="2" fill="#BBD5FF"/>
                  </svg>
                </div>
                <div className="n">01</div>
                <h3>Set your guardrails</h3>
                <p>Define margin floors, inventory rules, product carve outs, and brand policies. DealAgent will never approve an offer outside them.</p>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="step">
                <div className="ill">
                  <div className="step-badge"><SiteIcon name="handshake" size={14}/></div>
                  <svg className="node" width="100" height="80" viewBox="0 0 100 80" fill="none">
                    <circle cx="25" cy="40" r="20" fill="#EAF2FF" stroke="#BBD5FF"/>
                    <circle cx="75" cy="40" r="20" fill="#070B1F"/>
                    <path d="M45 40 H55" stroke="#116DFF" strokeWidth="3" strokeLinecap="round"/>
                    <path d="M48 36 L52 40 L48 44" stroke="#116DFF" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                    <path d="M12 3l1 2.8L16 7l-3 1.2L12 11l-1-2.8L8 7l3-1.2z" fill="#116DFF" transform="translate(80,12)"/>
                  </svg>
                </div>
                <div className="n">02</div>
                <h3>Let DealAgent negotiate</h3>
                <p>Human shoppers click “Check Private Offer” in the cart. AI shopping agents call the Agentic Offer API. Same engine.</p>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div className="step">
                <div className="ill">
                  <div className="step-badge"><SiteIcon name="shield" size={14}/></div>
                  <svg className="node" width="100" height="80" viewBox="0 0 100 80" fill="none">
                    <rect x="14" y="46" width="14" height="24" rx="2" fill="#BBD5FF"/>
                    <rect x="32" y="36" width="14" height="34" rx="2" fill="#5FA0FF"/>
                    <rect x="50" y="22" width="14" height="48" rx="2" fill="#116DFF"/>
                    <rect x="68" y="10" width="14" height="60" rx="2" fill="#005BFF"/>
                  </svg>
                </div>
                <div className="n">03</div>
                <h3>Convert safely</h3>
                <p>Every offer is approved, countered, or declined against your margin rules, with a clear, auditable reason.</p>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Guardrails, live offer check ---------- */
function Guardrails() {
  const [ref, inView] = useInView({ threshold: 0.45 });
  const [step, setStep] = useStateS(window.REDUCED ? 5 : 0);
  const checks = [
    "Contribution margin ≥ 40% floor",
    "Not a protected launch product",
    "Inventory age qualifies for bundle lever",
    "Within auto negotiate autonomy band",
  ];
  useEffectS(() => {
    if (!inView || window.REDUCED) return;
    const timers = [];
    [700, 1250, 1800, 2350, 3000].forEach((ms, i) => {
      timers.push(setTimeout(() => setStep(i + 1), ms));
    });
    return () => timers.forEach(clearTimeout);
  }, [inView]);
  const mark = (window.__resources && window.__resources.logoMarkDark) || "assets/logo-mark-dark.png";

  return (
    <section className="guardrails wrap">
      <div className="container">
        <div className="grid">
          <div>
            <Reveal><div className="eyebrow">Merchant guardrails</div></Reveal>
            <Reveal delay={60}><h2 className="h2">Every offer is reviewable. <span className="agent">Every margin risk is visible.</span></h2></Reveal>
            <div className="guard-list">
              {[
                { ic: "shield", h: "Margin floors", p: "Set a minimum contribution margin per category, product, or campaign. Offers below the floor are auto declined." },
                { ic: "lock", h: "Brand protection", p: "Protect limited editions, hero products, and current launches from any discount, for both humans and AI agents." },
                { ic: "scroll", h: "Auditable decisions", p: "Every offer comes with a structured reason: cart context, inventory age, margin impact, and chosen lever." },
                { ic: "zap", h: "Autonomy you control", p: "Choose auto negotiate, medium, or manual approval per policy. Pause anything at any time." },
              ].map((g, i) => (
                <Reveal delay={i * 70} key={g.h}>
                  <div className="guard-item">
                    <div className="ic"><SiteIcon name={g.ic}/></div>
                    <div><h4>{g.h}</h4><p>{g.p}</p></div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>

          <Reveal delay={100}>
            <div className="guard-vis" ref={ref}>
              <img className="gv-mark" src={mark} alt=""/>
              <div className="gv-head"><Sparkle size={12} color="#7AB0FF"/>DealAgent · checking offer</div>
              <div className="gv-cart">
                <div className="row"><span>Cart #C41207</span><span className="v">$248.00</span></div>
                <div className="row"><span>Requested discount</span><span className="v">12%</span></div>
                <div className="row"><span>Contribution margin</span><span className="v">42%</span></div>
              </div>
              <div className="gv-checks">
                {checks.map((c, i) => (
                  <div className={`gv-check ${step > i ? "on pass" : ""} ${step === i ? "on" : ""}`} key={c}>
                    <span className="dot">
                      <SiteIcon name="check" size={11} stroke={3}/>
                    </span>
                    {c}
                  </div>
                ))}
              </div>
              <div className={`gv-verdict ${step >= 5 ? "on" : ""}`}>
                <div className="ico"><SiteIcon name="check" size={18} stroke={3}/></div>
                <div>
                  <div className="t">Approved · Margin safe</div>
                  <div className="s">12% bundle + free shipping · protects 42% margin</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Use cases ---------- */
function UseCases() {
  const cases = [
    { tag: "Cart recovery", title: "Recover abandoned carts without public codes", body: "Trigger a private, margin safe offer the second a shopper leaves, no coupon site contamination." },
    { tag: "Inventory aging", title: "Move slow inventory at a profitable price", body: "Inventory older than 90 days unlocks a tighter discount band, DealAgent picks the lever that holds margin." },
    { tag: "High value carts", title: "Lift AOV with bundles, not discounts", body: "For carts over $150, DealAgent prefers a bundle or free shipping before touching unit price." },
    { tag: "Agentic API", title: "Serve AI shopping agents directly", body: "Approve, counter, or decline AI agent requests in real time, same engine, programmatic interface." },
    { tag: "Returns & winback", title: "Re engage past buyers with private terms", body: "Tier offers by customer segment, VIPs, lapsed buyers, first timers, all with margin guardrails on." },
    { tag: "Launch protection", title: "Lock down new launches", body: "Block any discount on limited editions while still letting DealAgent counter with bundles." },
  ];
  return (
    <section className="use wrap">
      <div className="container">
        <Reveal><div className="eyebrow">Use cases</div></Reveal>
        <Reveal delay={60}><h2 className="h2">One engine. <span className="agent">Every offer surface.</span></h2></Reveal>
        <div className="use-grid">
          {cases.map((c, i) => (
            <Reveal delay={(i % 3) * 80} key={c.title}>
              <div className="use-card">
                <span className="tag">{c.tag}</span>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Marquee = Marquee;
window.Problem = Problem;
window.HowItWorks = HowItWorks;
window.Guardrails = Guardrails;
window.UseCases = UseCases;