// AI-ready commerce data layer homepage

const CAPABILITIES = [
  { value: "8+", label: "CAPI integrations" },
  { value: "40+", label: "enrichment fields" },
  { value: "Any stack", label: "website, funnel, or commerce platform" },
  { value: "AI-ready", label: "structured records for prediction models" },
];

const DATA_LAYER_CARDS = [
  {
    title: "Server-side event capture",
    body: "Track purchase, checkout, lead, add-to-cart, page view, and custom events directly from your stack instead of relying only on browser pixels.",
  },
  {
    title: "Clean event payloads",
    body: "Normalize event names, content IDs, landing page URLs, click IDs, customer identifiers, consent fields, and attribution parameters before they are sent downstream.",
  },
  {
    title: "AI-ready records",
    body: "Turn raw activity into structured customer and event records that can be analyzed, segmented, modeled, and activated.",
  },
  {
    title: "Destination routing",
    body: "Send the right version of each event to Meta, Google, TikTok, GA4, Klaviyo, BigQuery, webhooks, or custom API endpoints.",
  },
];

const INTEGRATIONS = [
  "Meta CAPI",
  "Google Ads server-side",
  "TikTok Events API",
  "GA4",
  "Klaviyo",
  "BigQuery",
  "Webhooks",
  "Custom APIs",
];

const PERFORMANCE_FEATURES = [
  {
    title: "Predictive Audiences",
    body: "Score visitors and customers by purchase intent, predicted value, and likely next action. Build audiences from real-time behavior and enriched customer records.",
  },
  {
    title: "Identity Match",
    body: "Standardize identifiers and improve event match quality before data is sent through CAPI destinations.",
  },
  {
    title: "Smart Segments",
    body: "Build practical audiences from behavior, product interest, traffic source, customer value, market, engagement, and enrichment fields.",
  },
  {
    title: "Traffic Quality",
    body: "Detect low-quality sessions before they distort attribution, reporting, audiences, and model inputs.",
  },
  {
    title: "Signal Boost",
    body: "Send buyer signals earlier and more consistently so ad platforms have cleaner feedback loops during learning and optimization.",
  },
  {
    title: "Data Enrichment",
    body: "Append customer and event fields so every record becomes more useful for analytics, prediction, segmentation, and activation.",
  },
  {
    title: "Guided Setup",
    body: "Connect your site, configure destinations, validate payloads, and start sending clean events without rebuilding your whole data stack.",
  },
  {
    title: "Warehouse Sync",
    body: "Send raw events, enriched records, prediction outputs, and platform sync logs to BigQuery or your preferred data destination.",
  },
];

const USE_CASES = [
  {
    title: "Paid media teams",
    body: "Feed platforms cleaner conversion signals, stronger identifiers, and richer customer context so optimization is based on better data.",
  },
  {
    title: "Ecommerce operators",
    body: "Understand which campaigns, products, audiences, and traffic sources create valuable customers, not just more orders.",
  },
  {
    title: "Agencies",
    body: "Deploy a repeatable server-side tracking, enrichment, and CAPI routing layer across client accounts without rebuilding from scratch.",
  },
  {
    title: "Data teams",
    body: "Pipe structured commerce events, enrichment fields, sync logs, and prediction outputs into BigQuery, dashboards, notebooks, and internal tools.",
  },
  {
    title: "AI teams",
    body: "Use enriched first-party event records to train models, score customers, build predictive audiences, and analyze customer behavior.",
  },
];

const FLOW_STEPS = [
  ["Capture", "Cartlytics captures commerce events server-side from your website, funnel, checkout, landing page, or custom stack."],
  ["Clean", "The event payload is normalized so names, URLs, content IDs, customer fields, click IDs, attribution parameters, and consent fields stay consistent."],
  ["Enrich", "Customer and event records can be enriched with additional fields that improve segmentation, analytics, identity quality, and prediction."],
  ["Score", "Cartlytics can generate predictive signals such as purchase intent, customer value, audience fit, source quality, or likely next action."],
  ["Route", "The final event, enriched profile, or predictive segment is sent to Meta, Google, TikTok, GA4, Klaviyo, BigQuery, webhooks, custom APIs, or AI workflows."],
  ["Analyze", "Teams can review sync status, match quality, enriched profiles, model outputs, and downstream performance to understand which signals create value."],
];

function Nav({ onGetAccess, ctaCopy }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className={"nav " + (scrolled ? "is-scrolled" : "")}>
      <div className="wrap nav-row">
        <a href="#top" className="nav-logo">
          <img src="/assets/logo-cropped.png" alt="Cartlytics" />
        </a>
        <div className="nav-links">
          <a href="#platform">Platform</a>
          <a href="#ai-signals">AI Signals</a>
          <a href="#integrations">Integrations</a>
          <a href="#enrichment">Enrichment</a>
          <a href="#use-cases">Use Cases</a>
        </div>
        <div className="nav-cta">
          <button className="btn btn-primary" onClick={onGetAccess}>{ctaCopy}<IconArrow size={16}/></button>
        </div>
      </div>
    </nav>
  );
}

function SectionHeader({ eyebrow, title, body, center }) {
  return (
    <div className={"ai-section-head " + (center ? "is-centered" : "")}>
      <span className="eyebrow"><span className="dot"></span>{eyebrow}</span>
      <h2>{title}</h2>
      {body && <p>{body}</p>}
    </div>
  );
}

function Hero({ headline, onGetAccess, ctaCopy }) {
  return (
    <section className="ai-hero" id="top">
      <div className="hero-bg-grid" />
      <div className="wrap ai-hero-grid">
        <div className="ai-hero-copy">
          <span className="eyebrow"><span className="dot"></span>AI-READY COMMERCE SIGNALS</span>
          <h1>{headline}</h1>
          <p className="hero-sub">
            Cartlytics captures server-side commerce events, enriches customer records, and syncs AI-ready conversion data through 8+ CAPI integrations so ad platforms, analytics teams, and prediction models can optimize from better signals.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary btn-lg" onClick={onGetAccess}>{ctaCopy}<IconArrow size={16}/></button>
            <a className="btn btn-ghost btn-lg" href="#flow">See how the data flows<IconArrow size={15}/></a>
          </div>
          <div className="ai-trust-line">
            Works with Shopify, WooCommerce, headless stores, landing pages, custom funnels, and warehouse-first data stacks.
          </div>
        </div>
        <HeroSignalVisual />
      </div>
    </section>
  );
}

function HeroSignalVisual() {
  const fields = [
    ["purchase_intent_score", "84"],
    ["predicted_ltv", "$2,495"],
    ["source_platform", "TikTok"],
    ["event_match_quality", "High"],
    ["enrichment_status", "Complete"],
    ["destinations_synced", "6 of 8"],
  ];
  return (
    <div className="ai-hero-visual" aria-label="Commerce event stream flowing through Cartlytics">
      <div className="flow-node source">Storefront</div>
      <div className="flow-line one"></div>
      <div className="floating-card event-card">
        <div className="card-top">
          <span>customer_event.profile</span>
          <span className="status-dot">live</span>
        </div>
        <div className="event-title">AI-ready purchase signal</div>
        <div className="field-list">
          {fields.map(([k, v]) => (
            <div className="field-row" key={k}>
              <span>{k}</span>
              <strong>{v}</strong>
            </div>
          ))}
        </div>
      </div>
      <div className="flow-line two"></div>
      <div className="destination-cluster">
        {["Meta", "Google", "TikTok", "BigQuery", "AI model"].map((d, i) => (
          <div className="dest-pill" key={d} style={{"--i": i}}>{d}<span>synced</span></div>
        ))}
      </div>
    </div>
  );
}

function CapabilityStrip() {
  return (
    <section className="section--tight">
      <div className="wrap">
        <div className="capability-strip">
          {CAPABILITIES.map((c) => (
            <div className="capability-cell" key={c.label}>
              <div className="capability-value">{c.value}</div>
              <div className="capability-label">{c.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DataLayer() {
  return (
    <section className="section" id="platform">
      <div className="wrap">
        <SectionHeader
          eyebrow="THE CARTLYTICS DATA LAYER"
          title="Capture the signal. Enrich the customer. Feed the algorithm."
          body="Cartlytics sits between your website and the systems that need high-quality commerce data. It captures server-side events, cleans the payload, enriches customer and event records, and routes structured signals to ad platforms, warehouses, analytics tools, and AI models."
        />
        <div className="data-layer-grid">
          <DataFlowVisual />
          <div className="data-card-grid">
            {DATA_LAYER_CARDS.map((card) => <InfoCard key={card.title} {...card} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

function DataFlowVisual() {
  return (
    <div className="diagram-card">
      <div className="diagram-col">
        <div className="diagram-label">Sources</div>
        {["Storefront", "Checkout", "Landing pages", "Lead forms"].map((x) => <div className="diagram-pill" key={x}>{x}</div>)}
      </div>
      <div className="diagram-core">
        <div className="diagram-label">Cartlytics</div>
        {["Capture", "Clean", "Enrich", "Score", "Route"].map((x) => <div className="core-step" key={x}>{x}</div>)}
      </div>
      <div className="diagram-col">
        <div className="diagram-label">Destinations</div>
        {["Meta CAPI", "Google Ads", "TikTok", "BigQuery", "AI models"].map((x) => <div className="diagram-pill" key={x}>{x}</div>)}
      </div>
    </div>
  );
}

function InfoCard({ title, body }) {
  return (
    <div className="ai-info-card">
      <div className="mini-icon"><IconCheck size={13}/></div>
      <h3>{title}</h3>
      <p>{body}</p>
    </div>
  );
}

function AISignals() {
  const bullets = [
    "Identify visitors likely to purchase in the next 7 days",
    "Segment customers by predicted intent, LTV, product interest, traffic source, and behavior",
    "Analyze which campaigns bring high-quality customers instead of just cheap conversions",
    "Send predictive segments to ad platforms, email platforms, warehouses, or dashboards",
    "Use Cartlytics prediction models or connect your own internal scoring logic",
  ];
  return (
    <section className="section ai-dark" id="ai-signals">
      <div className="wrap ai-split">
        <div>
          <SectionHeader
            eyebrow="AI SIGNALS"
            title="Give your models and ad platforms data they can actually use."
            body="Cartlytics turns commerce activity into structured, enriched, analysis-ready records. That data can power predictive audiences, LTV modeling, churn risk, next-best-offer logic, attribution analysis, and smarter campaign optimization."
          />
          <div className="predictive-box">
            <h3>Predictive Audiences</h3>
            <p>Score visitors and customers by purchase intent, predicted value, behavior, source, and likely next action.</p>
            <ul>
              {bullets.map((b) => <li key={b}>{b}</li>)}
            </ul>
          </div>
        </div>
        <PredictionCard />
      </div>
    </section>
  );
}

function PredictionCard() {
  const rows = [
    ["event", "purchase"],
    ["source", "TikTok"],
    ["customer_type", "repeat"],
    ["predicted_ltv", "$2,495"],
    ["intent_score", "79"],
    ["segment", "lapsed_30"],
    ["market", "UK"],
    ["sync_status", "sent_to_capi"],
  ];
  return (
    <div className="prediction-card">
      <div className="card-top">
        <span>prediction_output.json</span>
        <span className="status-dot">scored</span>
      </div>
      <div className="score-orb">
        <span>79</span>
        <small>intent score</small>
      </div>
      <div className="field-list">
        {rows.map(([k, v]) => (
          <div className="field-row" key={k}>
            <span>{k}</span>
            <strong>{v}</strong>
          </div>
        ))}
      </div>
    </div>
  );
}

function Integrations() {
  return (
    <section className="section" id="integrations">
      <div className="wrap">
        <SectionHeader
          eyebrow="CAPI INTEGRATIONS"
          title="Send better signals to every platform that drives revenue."
          body="Cartlytics routes clean, enriched conversion events through 8+ server-side destinations. Each platform receives the format it expects, with consistent event names, customer identifiers, content IDs, attribution parameters, consent fields, and event quality controls."
          center
        />
        <div className="integration-hub">
          <div className="hub-core">Cartlytics<span>capture once, route everywhere</span></div>
          {INTEGRATIONS.map((name, i) => (
            <div className="integration-node" key={name}>
              <strong>{name}</strong>
              <span>{i % 3 === 0 ? "enriched" : i % 3 === 1 ? "matched" : "synced"}</span>
            </div>
          ))}
        </div>
        <p className="supporting-copy">
          Instead of rebuilding tracking logic for every ad channel, Cartlytics gives your team one reliable data layer that can feed every platform. Capture the event once, clean it once, enrich it once, and route it wherever the business needs it.
        </p>
      </div>
    </section>
  );
}

function Enrichment() {
  return (
    <section className="section ai-soft" id="enrichment">
      <div className="wrap enrichment-grid">
        <div>
          <SectionHeader
            eyebrow="ENRICHMENT LAYER"
            title="Make every conversion more valuable than the event itself."
            body="A basic conversion event tells you that something happened. An enriched conversion event tells you who it came from, where it came from, what it is likely worth, how it should be segmented, and where it should be activated."
          />
          <ul className="check-list">
            {[
              "Append customer-level attributes to events",
              "Improve audience building and suppression logic",
              "Segment customers by value, behavior, market, source, and fit",
              "Route enriched records to BigQuery or an existing warehouse",
              "Keep raw events, enriched profiles, platform payloads, and model inputs aligned",
            ].map((b) => <li key={b}><IconCheck size={13}/>{b}</li>)}
          </ul>
          <div className="mini-callout">
            <h3>From event tracking to customer intelligence.</h3>
            <p>A purchase event is useful. A purchase event with source, segment, predicted value, customer context, match quality, and sync status is operational intelligence.</p>
          </div>
        </div>
        <BeforeAfterRecord />
      </div>
    </section>
  );
}

function BeforeAfterRecord() {
  return (
    <div className="before-after">
      <div className="record-card is-before">
        <div className="record-title">Raw event</div>
        {["event: purchase", "value: 142.00", "currency: USD", "product_id: SKU_4821"].map((r) => <div className="record-row" key={r}>{r}</div>)}
      </div>
      <div className="record-card is-after">
        <div className="record-title">Enriched intelligence record</div>
        {[
          "source: TikTok",
          "segment: high_intent_repeat",
          "predicted_ltv: $2,495",
          "match_quality: high",
          "sync_status: Meta + Google + BigQuery",
          "model_input: ready",
        ].map((r) => <div className="record-row" key={r}>{r}</div>)}
      </div>
    </div>
  );
}

function FeatureGrid() {
  return (
    <section className="section" id="features">
      <div className="wrap">
        <SectionHeader
          eyebrow="AI PERFORMANCE FEATURES"
          title="Turn clean event data into smarter growth signals."
          body="Cartlytics combines event capture, enrichment, identity quality, predictive modeling, and platform routing into one data layer. These features work together so your team can collect better data, understand customers faster, and activate stronger signals across every growth channel."
        />
        <div className="ai-feature-grid">
          {PERFORMANCE_FEATURES.map((feature, i) => (
            <div className="ai-feature-card" key={feature.title}>
              <span className="feature-index">0{(i % 9) + 1}</span>
              <h3>{feature.title}</h3>
              <p>{feature.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCases() {
  return (
    <section className="section ai-soft" id="use-cases">
      <div className="wrap">
        <SectionHeader
          eyebrow="BUILT FOR GROWTH TEAMS"
          title="One data layer for marketers, agencies, analysts, and AI builders."
          body="Cartlytics is designed for teams that need reliable commerce data across paid media, analytics, enrichment, and predictive workflows."
          center
        />
        <div className="use-case-grid">
          {USE_CASES.map((u) => (
            <div className="use-card" key={u.title}>
              <h3>{u.title}</h3>
              <p>{u.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TechnicalFlow() {
  return (
    <section className="section" id="flow">
      <div className="wrap">
        <SectionHeader
          eyebrow="HOW IT WORKS"
          title="From website event to AI-ready signal."
          body="The same event stream can feed platform optimization, enrichment, analytics, warehouse exports, and predictive workflows."
        />
        <div className="flow-steps">
          {FLOW_STEPS.map(([title, body], i) => (
            <div className="flow-step" key={title}>
              <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
              <h3>{title}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SignalQuality() {
  const oldWay = [
    "Browser-only tracking",
    "Partial conversion visibility",
    "Platform-specific setup work",
    "Limited customer context",
    "Hard-to-analyze event data",
    "Weak model inputs",
    "Inconsistent audience quality",
  ];
  const newWay = [
    "Server-side event capture",
    "Clean normalized payloads",
    "8+ CAPI and server-side destinations",
    "Enriched customer records",
    "AI-ready data structure",
    "Predictive audience scoring",
    "Warehouse-ready exports",
  ];
  return (
    <section className="section ai-contrast" id="signal-quality">
      <div className="wrap">
        <SectionHeader
          eyebrow="WHY SIGNAL QUALITY MATTERS"
          title="Ad platforms and AI models are only as good as the data they receive."
          body="Browser pixels, disconnected tools, inconsistent identifiers, and incomplete event payloads create weak feedback loops. Cartlytics gives teams a cleaner server-side data layer that captures events, enriches records, improves match quality, and sends structured signals to the systems making performance decisions."
        />
        <div className="compare">
          <div className="compare-col bad">
            <div className="compare-head"><span className="tag">OLD WAY</span></div>
            <h4>Disconnected signals</h4>
            <ul className="compare-list">{oldWay.map((x) => <li key={x}><span className="ico"><IconX size={11}/></span>{x}</li>)}</ul>
          </div>
          <div className="compare-col good">
            <div className="compare-head"><span className="tag">CARTLYTICS WAY</span></div>
            <h4>AI-ready commerce infrastructure</h4>
            <ul className="compare-list">{newWay.map((x) => <li key={x}><span className="ico"><IconCheck size={11}/></span>{x}</li>)}</ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onGetAccess }) {
  return (
    <section className="section" style={{paddingTop:60, paddingBottom:60}}>
      <div className="wrap">
        <div className="cta">
          <div className="cta-grid">
            <div>
              <span className="cta-eyebrow">GET EARLY ACCESS</span>
              <h2>Build your AI-ready commerce data layer.</h2>
              <p>Start with clean server-side event capture, then add enrichment, CAPI routing, predictive audiences, identity quality, warehouse sync, and AI-ready outputs as your team grows.</p>
              <div className="actions">
                <button className="btn btn-primary btn-lg" onClick={onGetAccess}>Get Early Access<IconArrow size={16}/></button>
                <a className="btn btn-lg" style={{color:"white", border:"1px solid rgba(255,255,255,.3)"}} href="mailto:hello@cartlytics.ai?subject=Cartlytics%20integration%20roadmap">Request integration roadmap<IconArrow size={15}/></a>
              </div>
            </div>
            <div className="email-card">
              <div className="label">Built for</div>
              <div className="val">brands, agencies, data teams, and AI-powered growth workflows</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-row">
        <div style={{display:"flex", alignItems:"center", gap:12}}>
          <img src="/assets/logo-cropped_footer.png" alt="Cartlytics" style={{height:92}}/>
          <span className="footer-meta">&copy; 2026 Cartanalytics. All rights reserved.</span>
        </div>
        <div className="footer-meta" style={{display:"flex", gap:24, flexWrap:"wrap"}}>
          <a href="/policies/">Policies</a>
          <a href="/policies/privacy.html">Privacy</a>
          <a href="/policies/terms.html">Terms</a>
          <a href="/policies/gdpr.html">GDPR</a>
          <a href="mailto:hello@cartlytics.ai">hello@cartlytics.ai</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav,
  Hero,
  CapabilityStrip,
  DataLayer,
  AISignals,
  Integrations,
  Enrichment,
  FeatureGrid,
  UseCases,
  TechnicalFlow,
  SignalQuality,
  FinalCTA,
  Footer,
});