/* UPOLT site — homepage sections (hero, logos, modules grid, feature rows, customers, CTA). */

const { Badge } = window.UPOLTDesignSystem_55ccaf;

/* ---------------- HERO ---------------- */
/* Big centered hero with the live Orbit Field canvas behind the text. */
function Hero({ t = {} }) {
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    if (!canvasRef.current || !window.UpoltOrbitField) return;
    const field = new window.UpoltOrbitField(canvasRef.current, { dark: false });
    return () => field.destroy();
  }, []);
  return (
    <section style={{ position: "relative", overflow: "hidden", minHeight: "calc(100vh - 72px)", display: "flex", alignItems: "center", paddingTop: 120, paddingBottom: 120 }}>
      {/* Live orbit field — concentric orbits with drifting teal nodes */}
      <canvas ref={canvasRef} aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }} />
      {/* faint dotted grid wash, layered over the canvas at the top edge */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(var(--graphite-200) 1px, transparent 1px)", backgroundSize: "26px 26px", opacity: 0.35, maskImage: "radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 70%)", WebkitMaskImage: "radial-gradient(120% 70% at 50% 0%, #000 20%, transparent 70%)" }} />
      <Container style={{ position: "relative" }}>
        <div style={{ maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
          <Reveal>
            <Overline style={{ marginBottom: 24 }}>The operating platform for business</Overline>
          </Reveal>
          <Reveal delay={60}>
            <h1 style={{ fontFamily: "var(--font-sans)", fontSize: "clamp(56px, 8.5vw, 104px)", lineHeight: 1.0, fontWeight: 700, letterSpacing: "-0.035em", color: "var(--text-primary)", margin: 0, textWrap: "balance" }}>
              Move Your Business Forward.
            </h1>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ fontSize: 22, lineHeight: 1.5, color: "var(--text-secondary)", margin: "28px auto 0", maxWidth: 640 }}>
              Modern software, automation, and AI on one connected platform, so you can see your whole operation, remove busywork, and make better decisions faster.
            </p>
          </Reveal>
          <Reveal delay={180}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 36, justifyContent: "center" }}>
              <Btn href="contact.html" variant="primary" iconRight={<Ico n="arrow-right" s={18} />}>Contact us</Btn>
              <Btn href="platform.html" variant="secondary">Explore solutions</Btn>
            </div>
          </Reveal>
          <Reveal delay={230}>
            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 18, marginTop: 28, color: "var(--text-tertiary)", fontSize: 13.5, justifyContent: "center" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Ico n="check" s={15} c="var(--text-accent)" /> Tailored to your operation</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Ico n="check" s={15} c="var(--text-accent)" /> Live in days, not quarters</span>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

/* ---------------- LOGO STRIP ---------------- */
function LogoStrip() {
  const names = ["Northwind", "Globex", "Contoso", "Initech", "Umbrella", "Hooli"];
  return (
    <section style={{ padding: "0 0 16px" }}>
      <Container>
        <Reveal>
          <div style={{ textAlign: "center", fontSize: 13.5, fontWeight: 600, letterSpacing: "0.04em", color: "var(--text-muted)", textTransform: "uppercase", marginBottom: 28 }}>
            Trusted by operating teams at fast-moving companies
          </div>
        </Reveal>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center", gap: "20px 56px", opacity: 0.85 }}>
          {names.map((n, i) => (
            <Reveal key={n} delay={180 + i * 110} y={22}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 9, color: "var(--graphite-500)", fontWeight: 700, fontSize: 21, letterSpacing: "-0.02em" }}>
                <Ico n="hexagon" s={20} /> {n}
              </span>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------------- MODULES GRID (the screenshot's product cards) ---------------- */
const MODULES = [
  { icon: "boxes", name: "Connect", tag: "Up Connect", desc: "Unify your data, tools, and teams into one source of truth, so there is no more switching between disconnected systems.", points: ["Sync systems & spreadsheets", "Shared, live records"] },
  { icon: "workflow", name: "Automate", tag: "Up Flow", desc: "Turn repetitive, manual steps into reliable workflows that run themselves: approvals, hand-offs, and follow-ups.", points: ["Visual workflow builder", "Triggers & approvals"] },
  { icon: "activity", name: "Operate", tag: "Up Ops", desc: "Run the day-to-day in real time. See status, assign work, and keep every team moving in the same direction.", points: ["Live operational view", "Tasks & ownership"] },
  { icon: "line-chart", name: "Analyze", tag: "Up Insight", desc: "Turn activity into clear, trustworthy numbers. Track what matters and spot issues before they grow.", points: ["Real-time dashboards", "Custom reports"] },
  { icon: "sparkles", name: "Assist", tag: "Up AI", desc: "Operator-grade AI that drafts, summarizes, and surfaces next steps, grounded in your own data.", points: ["Ask across your data", "Suggested next steps"] },
  { icon: "shield-check", name: "Govern", tag: "Up Admin", desc: "Keep control as you scale with roles, permissions, and a complete, auditable record of every change.", points: ["Roles & permissions", "Full audit trail"] },
];

function ModuleCard({ m, i }) {
  const [h, setH] = React.useState(false);
  const num = String(i + 1).padStart(2, "0");
  return (
    <Reveal delay={(i % 3) * 70}>
      <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ height: "100%", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: 16, padding: 24, boxShadow: h ? "var(--shadow-md)" : "var(--shadow-sm)", transform: h ? "translateY(-3px)" : "none", transition: "box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard)", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 44, height: 44, borderRadius: 12, background: "var(--surface-accent-soft)", color: "var(--teal-600)" }}><Ico n={m.icon} s={22} /></span>
          <span style={{ marginLeft: "auto", fontSize: 13, fontWeight: 700, letterSpacing: "0.04em", color: "var(--graphite-300)", fontVariantNumeric: "tabular-nums" }}>{num}</span>
        </div>
        <span style={{ display: "inline-block", fontSize: 12, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--teal-600)", background: "var(--surface-accent-soft)", borderRadius: 999, padding: "4px 10px", margin: "16px 0 0", alignSelf: "flex-start" }}>{m.tag}</span>
        <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--text-primary)", margin: "10px 0 0" }}>{m.name}</h3>
        <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--text-secondary)", margin: "8px 0 0", flex: 1 }}>{m.desc}</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, margin: "18px 0 0" }}>
          {m.points.map(p => (
            <span key={p} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 14, color: "var(--text-secondary)" }}>
              <Ico n="check" s={16} c="var(--text-accent)" /> {p}
            </span>
          ))}
        </div>
        <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--border-subtle)" }}>
          <TextLink href="platform.html">Learn more</TextLink>
        </div>
      </div>
    </Reveal>
  );
}

function Modules() {
  return (
    <section id="platform" style={{ padding: "120px 0 64px" }}>
      <Container>
        <Reveal>
          <div style={{ maxWidth: 720 }}>
            <Overline>One platform</Overline>
            <h2 style={{ fontSize: 46, fontWeight: 700, letterSpacing: "-0.03em", color: "var(--text-primary)", margin: "14px 0 0", lineHeight: 1.08 }}>Everything your operation runs on, connected.</h2>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--text-secondary)", margin: "16px 0 0" }}>Start with what you need today and add modules as you grow. They share one data model, so your whole business stays in sync.</p>
          </div>
        </Reveal>
        <div className="upolt-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 48 }}>
          {MODULES.map((m, i) => <ModuleCard key={m.name} m={m} i={i} />)}
        </div>
      </Container>
    </section>
  );
}

/* ---------------- FEATURE ROWS ---------------- */
function FeatureRow({ overline, title, body, points, reverse, visual }) {
  return (
    <Reveal>
      <div className="upolt-feature-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div style={{ order: reverse ? 2 : 1 }}>
          <Overline>{overline}</Overline>
          <h2 style={{ fontSize: 38, fontWeight: 700, letterSpacing: "-0.03em", color: "var(--text-primary)", margin: "14px 0 0", lineHeight: 1.12 }}>{title}</h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--text-secondary)", margin: "16px 0 0" }}>{body}</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, margin: "24px 0 0" }}>
            {points.map(p => (
              <div key={p.t} style={{ display: "flex", gap: 13 }}>
                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: 8, background: "var(--surface-accent-soft)", color: "var(--teal-600)", flex: "none", marginTop: 1 }}><Ico n={p.icon} s={16} /></span>
                <span>
                  <span style={{ display: "block", fontSize: 15.5, fontWeight: 600, color: "var(--text-primary)" }}>{p.t}</span>
                  <span style={{ display: "block", fontSize: 14.5, lineHeight: 1.5, color: "var(--text-tertiary)", marginTop: 2 }}>{p.d}</span>
                </span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28 }}><Btn href="platform.html" variant="secondary" size="md" iconRight={<Ico n="arrow-right" s={16} />}>Explore</Btn></div>
        </div>
        <div style={{ order: reverse ? 1 : 2 }}>{visual}</div>
      </div>
    </Reveal>
  );
}

/* visual: workflow automation board */
function AutomateVisual() {
  const steps = [
    { icon: "file-plus-2", label: "Order received", tone: "var(--teal-600)" },
    { icon: "user-check", label: "Auto-assign owner", tone: "var(--graphite-700)" },
    { icon: "badge-check", label: "Approval routed", tone: "var(--graphite-700)" },
    { icon: "send", label: "Customer notified", tone: "var(--text-accent)" },
  ];
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: 18, boxShadow: "var(--shadow-md)", padding: 24 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
        <Ico n="workflow" s={17} c="var(--teal-600)" />
        <span style={{ fontSize: 14, fontWeight: 600, color: "var(--text-primary)" }}>Order intake → fulfillment</span>
        <span style={{ marginLeft: "auto" }}><Badge tone="success" dot>Active</Badge></span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
        {steps.map((s, i) => (
          <div key={s.label}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 12px", border: "1px solid var(--border-default)", borderRadius: 11, background: "var(--surface-page)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: 8, background: "var(--surface-card)", border: "1px solid var(--border-default)", color: s.tone }}><Ico n={s.icon} s={16} /></span>
              <span style={{ fontSize: 14, fontWeight: 500, color: "var(--text-primary)" }}>{s.label}</span>
              <Ico n="check" s={15} c="var(--text-accent)" style={{ marginLeft: "auto" }} />
            </div>
            {i < steps.length - 1 && <div style={{ width: 2, height: 14, background: "var(--border-default)", margin: "0 0 0 27px" }} />}
          </div>
        ))}
      </div>
    </div>
  );
}

/* visual: AI assist panel */
function AssistVisual() {
  return (
    <div style={{ background: "var(--graphite-900)", borderRadius: 18, boxShadow: "var(--shadow-lg)", padding: 24, color: "#fff" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: 9, background: "rgba(20,184,166,0.18)", color: "var(--teal-400)" }}><Ico n="sparkles" s={17} /></span>
        <span style={{ fontSize: 14.5, fontWeight: 600 }}>Up AI</span>
      </div>
      <div style={{ background: "rgba(255,255,255,0.06)", border: "1px solid var(--border-inverse)", borderRadius: 12, padding: "11px 13px", fontSize: 14, color: "var(--graphite-300)", marginBottom: 12 }}>
        Which accounts are at risk of slipping this month?
      </div>
      <div style={{ background: "rgba(20,184,166,0.10)", border: "1px solid rgba(20,184,166,0.28)", borderRadius: 12, padding: 14 }}>
        <div style={{ fontSize: 14, lineHeight: 1.55, color: "#fff" }}>3 accounts are trending behind. <span style={{ color: "var(--teal-400)", fontWeight: 600 }}>Northwind</span> has 2 delayed orders and an open approval.</div>
        <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
          {["Open Northwind", "Notify owner", "Draft update"].map(a => (
            <span key={a} style={{ fontSize: 12.5, fontWeight: 600, color: "#fff", background: "rgba(255,255,255,0.08)", border: "1px solid var(--border-inverse)", borderRadius: 8, padding: "6px 10px" }}>{a}</span>
          ))}
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, fontSize: 12, color: "var(--graphite-500)" }}>
        <Ico n="shield-check" s={13} c="var(--graphite-400)" /> Grounded in your data · never trained on it
      </div>
    </div>
  );
}

function Features() {
  return (
    <section style={{ padding: "72px 0", display: "flex", flexDirection: "column", gap: 120 }}>
      <Container>
        <FeatureRow
          overline="Automate"
          title="Remove the busywork between teams."
          body="Build reliable workflows in minutes. The platform handles the hand-offs, approvals, and follow-ups so people can focus on the work that moves things forward."
          points={[
            { icon: "mouse-pointer-click", t: "Visual builder", d: "Compose triggers, conditions, and actions, no code required." },
            { icon: "git-branch", t: "Approvals & routing", d: "Send the right work to the right person, automatically." },
            { icon: "history", t: "Always auditable", d: "Every run is logged, so you can trust what happened." },
          ]}
          visual={<AutomateVisual />}
        />
      </Container>
      <Container>
        <FeatureRow
          reverse
          overline="Assist"
          title="AI that works like an operator."
          body="Ask questions in plain language and get answers grounded in your own data. Up AI drafts updates, summarizes activity, and suggests the next step."
          points={[
            { icon: "search", t: "Ask across your data", d: "One question, answered from every connected system." },
            { icon: "list-checks", t: "Suggested next steps", d: "Turn insight into action without leaving the flow." },
            { icon: "lock", t: "Private by default", d: "Your data is never used to train shared models." },
          ]}
          visual={<AssistVisual />}
        />
      </Container>
    </section>
  );
}

/* ---------------- STATS ---------------- */
function Stats() {
  const ref = React.useRef(null);
  const active = useInView(ref, { threshold: 0.4 });
  const items = [
    { v: 40, suf: "%", label: "less time on manual work" },
    { v: 3, suf: "×", label: "faster decision cycles" },
    { v: 99.9, suf: "%", label: "platform uptime", dec: 1 },
    { v: 12, suf: "k+", label: "workflows run daily" },
  ];
  return (
    <section ref={ref} style={{ padding: "40px 0" }}>
      <Container>
        <div className="upolt-grid-4" style={{ background: "var(--graphite-900)", borderRadius: 24, padding: "48px 40px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {items.map((it, i) => <StatItem key={i} {...it} active={active} />)}
        </div>
      </Container>
    </section>
  );
}
function StatItem({ v, suf, label, dec = 0, active }) {
  const val = useCountUp(v, active, { duration: 1300 });
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: 52, fontWeight: 700, letterSpacing: "-0.03em", color: "#fff", fontVariantNumeric: "tabular-nums" }}>{val.toFixed(dec)}{suf}</div>
      <div style={{ fontSize: 15, color: "var(--graphite-400)", marginTop: 6 }}>{label}</div>
    </div>
  );
}

/* ---------------- CUSTOMERS ---------------- */
function Customers() {
  const quotes = [
    { q: "We replaced four disconnected tools with one platform. For the first time, the whole team sees the same picture.", name: "Dana Reyes", role: "COO, Northwind Co.", mark: "hexagon" },
    { q: "Workflows that used to take days now run on their own. Our team spends time on decisions, not data entry.", name: "Marcus Lee", role: "Head of Operations, Globex", mark: "hexagon" },
    { q: "The clarity is the win. I can answer any question about the business in seconds instead of building a report.", name: "Priya Nair", role: "Finance Director, Contoso", mark: "hexagon" },
  ];
  return (
    <section id="customers" style={{ padding: "104px 0 64px" }}>
      <Container>
        <Reveal>
          <div style={{ maxWidth: 700 }}>
            <Overline>Customers</Overline>
            <h2 style={{ fontSize: 42, fontWeight: 700, letterSpacing: "-0.03em", color: "var(--text-primary)", margin: "14px 0 0", lineHeight: 1.1 }}>Operating teams move faster.</h2>
          </div>
        </Reveal>
        <div className="upolt-grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40 }}>
          {quotes.map((c, i) => (
            <Reveal key={i} delay={i * 70}>
              <figure style={{ height: "100%", background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: 16, padding: 24, boxShadow: "var(--shadow-sm)", margin: 0, display: "flex", flexDirection: "column" }}>
                <Ico n="quote" s={22} c="var(--teal-500)" />
                <blockquote style={{ margin: "14px 0 0", fontSize: 17, lineHeight: 1.5, color: "var(--text-primary)", letterSpacing: "-0.01em", flex: 1 }}>{c.q}</blockquote>
                <figcaption style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 22, paddingTop: 18, borderTop: "1px solid var(--border-subtle)" }}>
                  <span style={{ width: 38, height: 38, borderRadius: 999, background: "var(--graphite-900)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 600 }}>{c.name.split(" ").map(w => w[0]).join("")}</span>
                  <span>
                    <span style={{ display: "block", fontSize: 14.5, fontWeight: 600, color: "var(--text-primary)" }}>{c.name}</span>
                    <span style={{ display: "block", fontSize: 13, color: "var(--text-tertiary)" }}>{c.role}</span>
                  </span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------------- CTA ---------------- */
function CTA() {
  return (
    <section style={{ padding: "72px 0 120px" }}>
      <Container>
        <Reveal>
          <div style={{ position: "relative", overflow: "hidden", background: "var(--graphite-900)", borderRadius: 28, padding: "72px 48px", textAlign: "center" }}>
            <img src="assets/logos/upolt-mark-teal.png" alt="" aria-hidden="true" style={{ position: "absolute", right: -40, bottom: -40, width: 280, opacity: 0.08 }} />
            <div style={{ position: "relative" }}>
              <h2 style={{ fontSize: 48, fontWeight: 700, letterSpacing: "-0.03em", color: "#fff", margin: 0, lineHeight: 1.08, textWrap: "balance" }}>Ready to move forward?</h2>
              <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--graphite-300)", margin: "16px auto 0", maxWidth: 540 }}>See how we bring your operation into one connected platform. Tell us about your team and we will tailor the right next step.</p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "center", marginTop: 32 }}>
                <Btn href="contact.html" variant="inverse" iconRight={<Ico n="arrow-right" s={18} />}>Contact us</Btn>
                <Btn href="platform.html" variant="ghostInverse">Explore solutions</Btn>
              </div>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, LogoStrip, Modules, Features, Stats, Customers, CTA, AutomateVisual, AssistVisual });