/* global React, Reveal, GlowCard, Icon, Sparkline, DonutChart, BlueprintHouse, Counter */
// Analytics, Field Intelligence, Testimonials, CTA, Footer

const { useEffect, useRef, useState } = React;

// ----------- Animated bar chart ------------
function BarChart({ data, max, color = "var(--cyan)", height = 180 }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height, padding: "12px 0" }}>
      {data.map((d, i) => {
        const h = (d.v / max) * (height - 30);
        return (
          <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <div style={{
              width: "100%",
              height: h,
              background: d.highlight
                ? `linear-gradient(180deg, var(--orange) 0%, rgba(255,138,30,0.3) 100%)`
                : `linear-gradient(180deg, ${color} 0%, ${color}33 100%)`,
              borderRadius: "6px 6px 2px 2px",
              boxShadow: d.highlight ? "0 0 18px rgba(255,138,30,0.7)" : `0 0 14px ${color}55`,
              animation: `growBar 1s ease-out ${i * 0.06}s both`,
              transformOrigin: "bottom",
            }}/>
            <span style={{ fontSize: 10, color: "var(--muted)" }} className="mono">{d.l}</span>
          </div>
        );
      })}
    </div>
  );
}

// ----------- HUD ring widget --------------
function HudRing({ value, label, color = "var(--cyan)", size = 140 }) {
  const r = (size - 18) / 2;
  const c = 2 * Math.PI * r;
  const dash = (value / 100) * c;
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="6"/>
        <circle cx={size/2} cy={size/2} r={r} fill="none"
          stroke={color}
          strokeWidth="6"
          strokeDasharray={`${dash} ${c}`}
          strokeLinecap="round"
          style={{ filter: `drop-shadow(0 0 8px ${color})`, transition: "stroke-dasharray 1s" }}
        />
        {/* tick marks */}
        {Array.from({ length: 60 }, (_, i) => {
          const angle = (i / 60) * 2 * Math.PI;
          const inner = r + 4, outer = r + 10;
          const x1 = size/2 + inner * Math.cos(angle);
          const y1 = size/2 + inner * Math.sin(angle);
          const x2 = size/2 + outer * Math.cos(angle);
          const y2 = size/2 + outer * Math.sin(angle);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(0,209,255,0.18)" strokeWidth={i%5===0?"1.2":"0.5"}/>;
        })}
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
      }}>
        <span className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, color, lineHeight: 1, textShadow: `0 0 14px ${color}88` }}>
          <Counter to={value} suffix="%"/>
        </span>
        <span className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.18em", marginTop: 4 }}>{label}</span>
      </div>
    </div>
  );
}

// ----------- Analytics Section ------------
function Analytics() {
  const bars = [
    { l: "MON", v: 32 }, { l: "TUE", v: 48 }, { l: "WED", v: 38 },
    { l: "THU", v: 62 }, { l: "FRI", v: 88, highlight: true },
    { l: "SAT", v: 54 }, { l: "SUN", v: 42 },
  ];
  return (
    <section className="section" id="analytics">
      <div className="beam top"/>
      <div className="shell">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
            <div>
              <span className="section-number">
                <span className="num">§08</span>
                <span>ANALYTICS & CONTROL CENTER</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                Measure once.<br/>
                <span className="accent">Use everywhere.</span>
              </h2>
              <p className="sub" style={{ marginTop: 18 }}>
                A cinematic, HUD-style enterprise dashboard built from your live
                operational data — calibrated for executive decisions and field reality.
              </p>
            </div>
            <div className="row gap-12">
              <span className="dim-tag">// LIVE STREAM</span>
              <span className="dim-tag" style={{ color: "var(--green)", borderColor: "rgba(43,212,156,0.4)" }}>● 142 MS</span>
            </div>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <GlowCard style={{ padding: 0, overflow: "hidden" }}>
            <div style={{
              padding: "20px 26px",
              borderBottom: "1px solid var(--border)",
              display: "flex", justifyContent: "space-between", alignItems: "center",
              background: "rgba(0,209,255,0.04)",
            }}>
              <div className="row gap-16">
                <span className="mono" style={{ fontSize: 11, color: "var(--cyan-2)", letterSpacing: "0.22em" }}>OWNERS BOX · ANALYTICS</span>
                <span className="chip green"><span className="live-dot"/> LIVE STREAM</span>
              </div>
              <div className="row gap-12" style={{ fontSize: 11, color: "var(--muted)" }} >
                <span>Last sync: 142 ms ago</span>
                <span>·</span>
                <span className="mono" style={{ color: "var(--cyan)" }}>Q2 · 2026</span>
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 0 }}>
              {/* Left main panel */}
              <div style={{ padding: 28, borderRight: "1px solid var(--border)" }}>
                <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
                  <div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.18em" }}>WEEKLY REVENUE</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 600, color: "var(--cyan)", textShadow: "0 0 20px rgba(0,209,255,0.5)" }}>
                      $<Counter to={487520} duration={2200}/>
                    </div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
                    <span className="chip orange" style={{ fontSize: 10 }}>▲ +28.4% wow</span>
                    <span style={{ fontSize: 11, color: "var(--muted)", marginTop: 6 }}>vs. $379,830 last week</span>
                  </div>
                </div>

                <BarChart data={bars} max={100} height={220}/>

                <div className="row" style={{ gap: 14, marginTop: 14 }}>
                  {[
                    { label: "GROSS MARGIN", v: 42, color: "var(--cyan)" },
                    { label: "CYCLE TIME", v: 73, color: "var(--orange)" },
                    { label: "CREW UTIL.", v: 87, color: "var(--green)" },
                    { label: "PIPELINE HEALTH", v: 94, color: "var(--violet)" },
                  ].map(s => (
                    <div key={s.label} style={{ flex: 1 }}>
                      <div className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: "0.14em" }}>{s.label}</div>
                      <div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, color: s.color, lineHeight: 1.1 }}>
                        <Counter to={s.v} suffix="%"/>
                      </div>
                      <div style={{ height: 3, background: "rgba(255,255,255,0.06)", borderRadius: 2, marginTop: 6, overflow: "hidden" }}>
                        <div style={{
                          width: `${s.v}%`, height: "100%",
                          background: s.color,
                          boxShadow: `0 0 8px ${s.color}`,
                          animation: "growW 1.2s ease-out",
                        }}/>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Right HUD column */}
              <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 24 }}>
                <div className="row" style={{ justifyContent: "space-around" }}>
                  <HudRing value={92} label="OPS HEALTH" color="var(--cyan)" size={130}/>
                  <HudRing value={78} label="FORECAST" color="var(--orange)" size={130}/>
                </div>

                {/* Forecast list */}
                <div style={{ padding: 16, border: "1px solid var(--border)", borderRadius: 12, background: "rgba(0,209,255,0.03)" }}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.16em" }}>AI FORECAST · NEXT 14 DAYS</span>
                    <Icon name="spark" size={14} stroke="var(--cyan)"/>
                  </div>
                  {[
                    { l: "Estimated revenue", v: "$612K", c: "var(--cyan)" },
                    { l: "Crews needed", v: "14", c: "var(--orange)" },
                    { l: "Weather risk", v: "Low", c: "var(--green)" },
                    { l: "Material orders", v: "23", c: "var(--violet)" },
                  ].map((f, i) => (
                    <div key={i} className="row" style={{ justifyContent: "space-between", padding: "8px 0", borderTop: i ? "1px solid rgba(255,255,255,0.05)" : "none" }}>
                      <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{f.l}</span>
                      <span className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600, color: f.c }}>{f.v}</span>
                    </div>
                  ))}
                </div>

                {/* Mini activity */}
                <div style={{ padding: 16, border: "1px solid var(--border)", borderRadius: 12, background: "rgba(0,209,255,0.03)" }}>
                  <span className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: "0.16em", display: "block", marginBottom: 10 }}>LIVE FEED</span>
                  {[
                    { c: "var(--green)", t: "Payment received", s: "$8,250 · Maple Project" },
                    { c: "var(--cyan)",  t: "Estimate accepted", s: "Pine Rd · $14,800" },
                    { c: "var(--orange)", t: "Crew dispatched",   s: "Crew B → 456 Oak" },
                  ].map((a, i) => (
                    <div key={i} className="row gap-12" style={{ padding: "6px 0" }}>
                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: a.c, boxShadow: `0 0 8px ${a.c}` }}/>
                      <div style={{ flex: 1, fontSize: 12 }}>
                        <span style={{ fontWeight: 600 }}>{a.t}</span>{" "}
                        <span style={{ color: "var(--muted)" }}>· {a.s}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </GlowCard>
        </Reveal>
      </div>
    </section>
  );
}

// ----------- Field Intelligence Section ----------
function FieldIntelligence() {
  return (
    <section className="section" id="intelligence">
      <div className="beam top"/>
      <div className="shell">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
            <div>
              <span className="section-number">
                <span className="num">§09</span>
                <span>FIELD INTELLIGENCE</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22, maxWidth: 880 }}>
                Field intelligence.<br/>
                <span className="accent">Not just CRM.</span>
              </h2>
              <p className="sub" style={{ marginTop: 18 }}>
                AI-powered measurements, photo evidence, claim-ready reports,
                and on-site decisions in minutes — not days.
              </p>
            </div>
            <div className="row gap-12">
              <span className="dim-tag">// AI &amp; LIDAR</span>
              <span className="dim-tag" style={{ color: "var(--orange-2)", borderColor: "rgba(255,138,30,0.4)" }}>// PRECISION MODE</span>
            </div>
          </div>
        </Reveal>

        {/* Big wireframe stage */}
        <Reveal delay={1}>
          <div style={{
            position: "relative",
            height: 620,
            background: `
              radial-gradient(900px 500px at 50% 50%, rgba(0,209,255,0.18), transparent 70%),
              linear-gradient(180deg, rgba(2,6,14,0.4), rgba(2,6,14,0.2))
            `,
            border: "1px solid var(--border)",
            borderRadius: 24,
            overflow: "hidden",
          }}>
            {/* Stage floor grid */}
            <div style={{
              position: "absolute", inset: 0,
              backgroundImage: `
                linear-gradient(rgba(0,209,255,0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,209,255,0.08) 1px, transparent 1px)
              `,
              backgroundSize: "40px 40px",
              maskImage: "radial-gradient(ellipse 80% 60% at 50% 60%, #000 30%, transparent 80%)",
            }}/>

            {/* Huge centered wireframe house */}
            <div style={{
              position: "absolute",
              left: "50%", top: "55%",
              transform: "translate(-50%, -50%)",
            }}>
              <BlueprintHouse size={780} withMeasurements={true} withScan={true}/>
            </div>

            {/* Floating hex logo above */}
            <div style={{
              position: "absolute",
              left: "50%", top: "30%",
              transform: "translate(-50%, -50%)",
              animation: "floatY 4s ease-in-out infinite",
            }}>
              <svg width="140" height="140" viewBox="0 0 48 48" style={{ filter: "drop-shadow(0 0 28px rgba(0,209,255,0.9))" }}>
                <defs>
                  <linearGradient id="logo-big-g" x1="0" x2="1" y1="0" y2="1">
                    <stop offset="0" stopColor="#1a4a78"/>
                    <stop offset="0.55" stopColor="#00d1ff"/>
                    <stop offset="1" stopColor="#003a55"/>
                  </linearGradient>
                </defs>
                <polygon points="24,3 43,13.5 43,34.5 24,45 5,34.5 5,13.5"
                  fill="url(#logo-big-g)" stroke="#7be8ff" strokeWidth="1.2"/>
                <path d="M16 18 Q24 12 32 18 Q26 22 24 24 Q22 26 16 30 Q24 36 32 30"
                  fill="none" stroke="#bff3ff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>

            {/* Side data overlays */}
            <div style={{
              position: "absolute", top: 40, left: 40,
              padding: 16, width: 240,
              background: "rgba(0,209,255,0.07)",
              border: "1px solid rgba(0,209,255,0.4)",
              borderRadius: 12,
              backdropFilter: "blur(10px)",
              boxShadow: "0 0 30px -10px rgba(0,209,255,0.6)",
            }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--cyan-2)", letterSpacing: "0.18em", marginBottom: 8 }}>AI MEASUREMENT</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, color: "var(--cyan)", lineHeight: 1, textShadow: "0 0 14px rgba(0,209,255,0.6)" }}>
                <Counter to={2347.18} decimals={2}/> <span style={{ fontSize: 12 }}>SQ FT</span>
              </div>
              <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>Roof area · 14 planes detected</div>
              <div style={{ marginTop: 10, padding: "8px 10px", background: "rgba(0,209,255,0.07)", borderRadius: 6, fontSize: 11, color: "var(--cyan-2)" }} className="mono">
                ● SCAN COMPLETE · 24 PHOTOS
              </div>
            </div>

            <div style={{
              position: "absolute", top: 40, right: 40,
              padding: 16, width: 220,
              background: "rgba(255,138,30,0.07)",
              border: "1px solid rgba(255,138,30,0.45)",
              borderRadius: 12,
              backdropFilter: "blur(10px)",
              boxShadow: "0 0 30px -10px rgba(255,138,30,0.5)",
            }}>
              <div className="row gap-8" style={{ marginBottom: 8 }}>
                <Icon name="brain" size={14} stroke="var(--orange)"/>
                <span className="mono" style={{ fontSize: 10, color: "var(--orange-2)", letterSpacing: "0.18em" }}>AI-POWERED</span>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17 }}>Precision Mode</div>
              <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 4 }}>AI &amp; LiDAR active</div>
              <div style={{ marginTop: 10, display: "flex", justifyContent: "space-between", fontSize: 11 }}>
                <span style={{ color: "var(--muted)" }}>Confidence</span>
                <span style={{ color: "var(--orange)", fontWeight: 600 }} className="tabular">99.7%</span>
              </div>
            </div>

            <div style={{
              position: "absolute", bottom: 40, left: 40,
              padding: 14, width: 260,
              background: "rgba(43,212,156,0.07)",
              border: "1px solid rgba(43,212,156,0.4)",
              borderRadius: 12,
              backdropFilter: "blur(10px)",
            }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--green)", letterSpacing: "0.16em", marginBottom: 6 }}>CLAIM READY</div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Xactimate®-style report</div>
              <div style={{ fontSize: 11, color: "var(--muted)" }}>Photo evidence attached · Generated in 42s</div>
            </div>

            <div style={{
              position: "absolute", bottom: 40, right: 40,
              padding: 14, width: 220,
              background: "rgba(138,107,255,0.07)",
              border: "1px solid rgba(138,107,255,0.4)",
              borderRadius: 12,
              backdropFilter: "blur(10px)",
            }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--violet)", letterSpacing: "0.16em", marginBottom: 6 }}>PLANES DETECTED</div>
              <div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 600, color: "var(--violet)" }}>
                <Counter to={14}/>
              </div>
              <div style={{ fontSize: 11, color: "var(--muted)" }}>Largest: 425.32 sq ft</div>
            </div>
          </div>
        </Reveal>

        {/* Intelligence sub-cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 32 }}>
          {[
            { v: "10×", label: "FASTER", desc: "Measure in minutes, not hours.", color: "var(--cyan)", icon: "clock" },
            { v: "100%", label: "ACCURATE", desc: "AI & LiDAR precision you can rely on.", color: "var(--orange)", icon: "target" },
            { v: "42s", label: "CLAIM READY", desc: "Evidence-backed reports that get paid.", color: "var(--green)", icon: "shield" },
            { v: "∞", label: "CLOUD SYNC", desc: "Real-time access across your team.", color: "var(--violet)", icon: "sync" },
          ].map((c, i) => (
            <Reveal key={c.label} delay={i + 1}>
              <GlowCard>
                <div className="pad">
                  <Icon name={c.icon} size={22} stroke={c.color}/>
                  <div className="tabular" style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 600, color: c.color, lineHeight: 1, marginTop: 16, textShadow: `0 0 14px ${c.color}55` }}>{c.v}</div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.2em", marginTop: 6 }}>{c.label}</div>
                  <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 6 }}>{c.desc}</div>
                </div>
              </GlowCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----------- Testimonials -----------
const TESTIMONIALS = [
  {
    quote: "LynkedUp Pro turned our chaos into a clear, connected operation. We close jobs faster and our margins are visible for the first time.",
    name: "Maya Patel",
    title: "COO, Apex Roofing Group",
    init: "MP",
    color: "var(--cyan)",
    metric: "+42% revenue",
  },
  {
    quote: "It's the closest thing to having an extra ops director in the field. The AI Copilot has saved us from at least a dozen costly mistakes.",
    name: "Daniel Cruz",
    title: "Founder, Cruz Built",
    init: "DC",
    color: "var(--orange)",
    metric: "−68% admin time",
  },
  {
    quote: "Field teams adopted it in a week. Reports that took our office two days now take 42 seconds. It is genuinely transformational software.",
    name: "Ashley Reed",
    title: "VP Operations, NorthStar Infra",
    init: "AR",
    color: "var(--green)",
    metric: "10K+ jobs synced",
  },
];

function Testimonials() {
  return (
    <section className="section" id="customers">
      <div className="beam top"/>
      <div className="shell">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
            <div>
              <span className="section-number">
                <span className="num">§10</span>
                <span>CUSTOMER VOICES</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                Operators are betting on <span className="accent">LynkedUp Pro</span>.
              </h2>
            </div>
            <span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>// 10,000+ TEAMS</span>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }}>
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={t.name} delay={i + 1}>
              <GlowCard style={{ height: "100%" }}>
                <div className="pad" style={{ display: "flex", flexDirection: "column", height: "100%", gap: 20 }}>
                  <div style={{ fontSize: 36, fontFamily: "var(--font-display)", color: t.color, lineHeight: 0.5, opacity: 0.7 }}>“</div>
                  <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink)", margin: 0, flex: 1 }}>{t.quote}</p>
                  <div className="row gap-12" style={{ justifyContent: "space-between" }}>
                    <div className="row gap-12">
                      <div style={{
                        width: 40, height: 40, borderRadius: "50%",
                        background: `linear-gradient(135deg, ${t.color}, rgba(255,255,255,0.05))`,
                        border: `1px solid ${t.color}99`,
                        display: "grid", placeItems: "center",
                        fontFamily: "var(--font-display)",
                        fontWeight: 600, fontSize: 13,
                        color: "white",
                        boxShadow: `0 0 18px -6px ${t.color}`,
                      }}>{t.init}</div>
                      <div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600 }}>{t.name}</div>
                        <div style={{ fontSize: 11, color: "var(--muted)" }}>{t.title}</div>
                      </div>
                    </div>
                    <span className="chip" style={{ borderColor: `${t.color}55`, color: t.color, background: `${t.color}11` }}>{t.metric}</span>
                  </div>
                </div>
              </GlowCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----------- Final CTA -------------
function FinalCTA() {
  return (
    <section className="section" id="demo" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="beam top"/>
      <div className="shell">
        <Reveal>
          <div style={{
            position: "relative",
            padding: "100px 60px",
            borderRadius: 32,
            border: "1px solid var(--border-strong)",
            background: `
              radial-gradient(700px 400px at 20% 0%, rgba(0,209,255,0.25), transparent 60%),
              radial-gradient(700px 400px at 80% 100%, rgba(255,138,30,0.18), transparent 65%),
              linear-gradient(180deg, rgba(4,12,28,0.9), rgba(2,6,14,0.95))
            `,
            overflow: "hidden",
            boxShadow: "0 60px 120px -40px rgba(0,209,255,0.55)",
          }}>
            {/* Floor grid */}
            <div style={{
              position: "absolute", inset: 0,
              backgroundImage: `linear-gradient(rgba(0,209,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,209,255,0.07) 1px, transparent 1px)`,
              backgroundSize: "44px 44px",
              maskImage: "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%)",
            }}/>

            {/* Floating light beams */}
            <div style={{
              position: "absolute", left: "10%", top: 0, bottom: 0, width: 2,
              background: "linear-gradient(180deg, transparent, var(--cyan), transparent)",
              filter: "blur(2px)", opacity: 0.5, animation: "floatY 3s ease-in-out infinite",
            }}/>
            <div style={{
              position: "absolute", right: "12%", top: 0, bottom: 0, width: 2,
              background: "linear-gradient(180deg, transparent, var(--orange), transparent)",
              filter: "blur(2px)", opacity: 0.4, animation: "floatY 4s ease-in-out infinite", animationDelay: "1s",
            }}/>

            <div style={{ position: "relative", zIndex: 2, textAlign: "center", maxWidth: 880, margin: "0 auto" }}>
              <span className="eyebrow"><span className="dot"/> READY WHEN YOU ARE</span>
              <h2 className="h-display" style={{ marginTop: 26, fontSize: "clamp(54px, 7.5vw, 104px)" }}>
                <span className="grad">Run construction</span><br/>
                <span className="underline">without chaos.</span>
              </h2>
              <p className="sub" style={{ margin: "26px auto 40px" }}>
                Join the operators replacing five tools, four spreadsheets, and a
                whiteboard with one AI-powered command center built for the
                modern construction enterprise.
              </p>
              <div className="row gap-16" style={{ justifyContent: "center" }}>
                <a href="#start" className="btn btn-primary" style={{ height: 60, padding: "0 36px", fontSize: 16 }}>
                  Start Free Demo <span className="arrow">→</span>
                </a>
                <a href="#sales" className="btn btn-orange" style={{ height: 60, padding: "0 36px", fontSize: 16 }}>
                  Talk To Sales
                </a>
              </div>

              <div className="row gap-24" style={{ justifyContent: "center", marginTop: 40, color: "var(--muted)", fontSize: 12 }}>
                <span className="row gap-8"><span className="live-dot"/> No credit card</span>
                <span>·</span>
                <span>SOC 2 Type II</span>
                <span>·</span>
                <span>White-glove onboarding</span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ----------- Footer ---------------
function Footer() {
  const cols = [
    { h: "Product", items: ["Platform overview", "AI Copilot", "Mobile app", "Pricing", "Changelog"] },
    { h: "Solutions", items: ["Roofing", "General contractors", "Infrastructure", "Enterprise", "Field teams"] },
    { h: "Integrations", items: ["QuickBooks", "Stripe", "Calendly", "iOS / Google", "Zapier"] },
    { h: "Resources", items: ["Documentation", "Customer stories", "Security", "Status", "API"] },
    { h: "Contact", items: ["Talk to sales", "Support", "Careers", "Partner program", "Press"] },
  ];
  return (
    <footer style={{
      position: "relative",
      padding: "80px 0 40px",
      borderTop: "1px solid var(--border)",
      background: "linear-gradient(180deg, rgba(0,209,255,0.04), transparent)",
    }}>
      <div className="shell">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(5, 1fr)", gap: 40, marginBottom: 56 }}>
          <div>
            <Logo size={36}/>
            <p style={{ marginTop: 16, fontSize: 14, color: "var(--muted)", maxWidth: 280, lineHeight: 1.55 }}>
              AI construction operating system built for field teams, modern
              contractors and infrastructure companies. Built for roofing.
              Driven by innovation.
            </p>
            <div className="row gap-12" style={{ marginTop: 22 }}>
              {["X","in","gh","yt"].map(s => (
                <a key={s} href="#" style={{
                  width: 36, height: 36, borderRadius: 8,
                  border: "1px solid var(--border)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-mono)", fontSize: 11,
                  color: "var(--ink-2)", textDecoration: "none",
                  background: "rgba(0,209,255,0.04)",
                  transition: "all 0.2s",
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--cyan)"; e.currentTarget.style.color = "var(--cyan)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.color = "var(--ink-2)"; }}
                >{s}</a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div className="mono" style={{ fontSize: 11, color: "var(--cyan-2)", letterSpacing: "0.2em", marginBottom: 16 }}>{c.h.toUpperCase()}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.items.map(it => (
                  <li key={it}><a href="#" style={{ fontSize: 13, color: "var(--ink-2)", textDecoration: "none", transition: "color 0.2s" }}
                    onMouseEnter={e => e.currentTarget.style.color = "var(--cyan)"}
                    onMouseLeave={e => e.currentTarget.style.color = "var(--ink-2)"}
                  >{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ height: 1, background: "linear-gradient(90deg, transparent, var(--border-strong), transparent)" }}/>

        <div className="row" style={{ justifyContent: "space-between", marginTop: 24, fontSize: 12, color: "var(--muted)" }}>
          <span>© 2026 LynkedUp Pro · Built for roofing. Built for you.</span>
          <div className="row gap-24">
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
            <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Security</a>
            <span className="row gap-8"><span className="live-dot"/> All systems normal</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Analytics, FieldIntelligence, Testimonials, FinalCTA, Footer });