/* 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={200000} 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. $155,763 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: "$430K", 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: "Diego's crew → 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",
            }}>
              <img src="/uploads/lynkedup-logo.png" alt="LynkedUp Pro"
                width="140" height="140"
                style={{ width: 140, height: 140, objectFit: "contain", filter: "drop-shadow(0 0 28px rgba(0,209,255,0.9))" }}/>
            </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 6m 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: "98.6%", label: "ACCURATE", desc: "AI & LiDAR precision you can rely on.", color: "var(--orange)", icon: "target" },
            { v: "6m 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: "Operations Manager · Plano, TX",
    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 · Houston, TX",
    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 4-5 minutes. It is genuinely transformational software.",
    name: "Ashley Reed",
    title: "Operations Manager · Shreveport, LA",
    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="https://book.lynkeduppro.com/" className="btn btn-primary" style={{ height: 60, padding: "0 36px", fontSize: 16 }}>
                  Start Free Demo <span className="arrow">→</span>
                </a>
                <a href="https://www.lynkeduppro.com/contact" 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="https://book.lynkeduppro.com/" 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="https://book.lynkeduppro.com/" 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="https://book.lynkeduppro.com/" style={{ color: "inherit", textDecoration: "none" }}>Privacy</a>
            <a href="https://book.lynkeduppro.com/" style={{ color: "inherit", textDecoration: "none" }}>Terms</a>
            <a href="https://book.lynkeduppro.com/" style={{ color: "inherit", textDecoration: "none" }}>Security</a>
            <span className="row gap-8"><span className="live-dot"/> All systems normal</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ----------- Pricing / Lifetime Offer ------------
function Pricing() {
  return (
    <section className="roofing-offer-section" id="pricing">
      <div className="container">

        <div className="text-center roofing-heading mb-5">
          <span className="offer-badge">🔥 Limited Founder Offer</span>
          <h2>Own Your Roofing CRM. Pay Once.</h2>
          <p>Stop paying monthly for multiple disconnected tools. Get founders lifetime access
            to LynkedUpPro and scale your roofing business with one intelligent platform.</p>
        </div>

        <div className="row g-4 align-items-stretch">

          <div className="col-lg-6">
            <div className="lifetime-card h-100">
              <div className="popular-tag">MOST POPULAR</div>
              <h3>Founders Lifetime Access</h3>
              <p className="small-text">One payment. Unlimited operational control.</p>
              <div className="price-box">
                <h2>$2000</h2>
                <span>PAY ONCE • USE FOREVER</span>
              </div>
              <ul className="feature-list">
                <li>Complete Roofing CRM</li>
                <li>Lead Management System</li>
                <li>Canvassing &amp; Field Tracking</li>
                <li>Insurance Workflow</li>
                <li>Proposal &amp; Inspection Tools</li>
                <li>Team Management Dashboard</li>
                <li>Unlimited Projects</li>
                <li>Future Feature Updates</li>
                <li>Priority Support</li>
              </ul>
              <a href="https://book.lynkeduppro.com/" className="deal-btn">Claim Founders Lifetime Deal</a>
            </div>
          </div>

          <div className="col-lg-6">
            <div className="roofing-info-card h-100">
              <span className="mini-badge">Why Roofers Choose LynkedUpPro</span>
              <h3>Replace 5 Different Tools With One Roofing OS</h3>
              <p className="info-para">Most roofing companies spend thousands yearly on disconnected
                CRMs, canvassing apps, spreadsheets, proposal software, and field coordination tools.</p>
              <div className="info-box">
                <h5>More Revenue Visibility</h5>
                <p>Track leads, conversions, and team performance from one dashboard.</p>
              </div>
              <div className="info-box">
                <h5>Less Operational Chaos</h5>
                <p>Eliminate scattered communication and disconnected workflows.</p>
              </div>
              <div className="info-box">
                <h5>Built for Roofing Teams</h5>
                <p>Purpose-built for storm restoration, canvassing, insurance, and roofing operations.</p>
              </div>
            </div>
          </div>

        </div>

        <div className="terms-wrapper mt-4">
          <details className="custom-accordion-item">
            <summary className="accordion-button">Deal Terms &amp; Conditions</summary>
            <div className="accordion-body">
              <ul className="deal-terms-list">
                <li>✔️ Founders lifetime access to LynkedUpPro Roofing CRM Platform.</li>
                <li>✔️ Includes all future platform updates and feature enhancements available under your purchased plan.</li>
                <li>✔️ If plan names or package structures change, your subscription will automatically be mapped to the updated plan.</li>
                <li>✔️ No complicated contracts or hidden fees, just choose the plan that fits your roofing operations.</li>
                <li>✔️ License must be activated within 60 days of purchase.</li>
                <li>ℹ️ Founders Lifetime Access is a limited, non-transferable license for one business account. Founders allocation is limited and availability may change without notice. Covers platform access only; optional third-party messaging and data usage charges are billed separately.</li>
                <li>✔️ Flexibility to upgrade plans and feature limits while the offer remains active.</li>
                <li>✔️ Existing customers can upgrade anytime to unlock additional features and operational limits.</li>
                <li>✔️ Early customers will continue receiving future feature improvements and enhancements.</li>
              </ul>
            </div>
          </details>
        </div>

        <div className="roofing-cta-box mt-5 text-center">
          <h2>Roofing Moves Fast. Your CRM Should Too.</h2>
          <p>Join the next generation of roofing companies scaling with automation,
            field intelligence, and operational visibility.</p>
          <div className="cta-btn-group">
            <a href="https://book.lynkeduppro.com/" className="start-btn">Start Founders Lifetime Access</a>
            <a href="https://book.lynkeduppro.com/" className="sales-btn">Talk to Sales</a>
          </div>
        </div>

      </div>

      <style>{`
        .roofing-offer-section{
          padding:64px 0;
          background:
            radial-gradient(circle at top left, #8c4a13 0%, transparent 35%),
            radial-gradient(circle at bottom right, #1597e5 0%, transparent 35%),
            #1a120d;
          overflow:hidden; position:relative;
        }
        .roofing-offer-section .container{max-width:1120px;margin:0 auto;padding:0 20px;}
        .roofing-offer-section .row{display:flex;flex-wrap:wrap;margin:0 -12px;}
        .roofing-offer-section .row.g-4{margin:-12px;}
        .roofing-offer-section .row.g-4 > [class*="col-"]{padding:12px;}
        .roofing-offer-section .col-lg-6{flex:0 0 50%;max-width:50%;padding:0 12px;}
        .roofing-offer-section .align-items-stretch{align-items:stretch;}
        .roofing-offer-section .h-100{height:100%;}
        .roofing-offer-section .text-center{text-align:center;}
        .roofing-offer-section .mb-5{margin-bottom:36px;}
        .roofing-offer-section .mt-4{margin-top:20px;}
        .roofing-offer-section .mt-5{margin-top:36px;}
        .roofing-offer-section .roofing-heading h2{font-size:38px;font-weight:800;line-height:1.15;color:#fff;margin-top:14px;}
        .roofing-offer-section .roofing-heading p{color:#d7d7d7;max-width:620px;margin:12px auto 0;font-size:15px;line-height:1.55;}
        .roofing-offer-section .offer-badge{display:inline-block;padding:6px 14px;border-radius:40px;background:rgba(255,255,255,0.08);color:#fff;font-size:12px;font-weight:600;}
        .roofing-offer-section .lifetime-card{position:relative;background:linear-gradient(180deg,#12121b,#0d0d14);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,0.08);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
        .roofing-offer-section .popular-tag{position:absolute;top:16px;right:-45px;background:linear-gradient(90deg,#ff8b1e,#53c7ff);color:#fff;font-size:10px;font-weight:700;padding:6px 50px;transform:rotate(40deg);}
        .roofing-offer-section .lifetime-card h3{color:#fff;font-size:22px;font-weight:700;margin:0;}
        .roofing-offer-section .small-text{color:#b7b7b7;font-size:13.5px;margin:4px 0 18px;}
        .roofing-offer-section .price-box h2{color:#fff;font-size:48px;font-weight:800;line-height:1;margin-bottom:4px;}
        .roofing-offer-section .price-box span{color:#8d8d8d;font-size:12px;letter-spacing:1px;}
        .roofing-offer-section .feature-list{padding:0;margin:24px 0;list-style:none;}
        .roofing-offer-section .feature-list li{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:11px;padding:10px 14px;margin-bottom:9px;color:#fff;font-size:13.5px;position:relative;padding-left:42px;}
        .roofing-offer-section .feature-list li::before{content:"✓";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:11px;}
        .roofing-offer-section .deal-btn{display:inline-block;padding:12px 24px;border-radius:12px;text-decoration:none;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(90deg,#ff9321,#4dc5ff);box-shadow:0 10px 25px rgba(0,0,0,0.3);}
        .roofing-offer-section .roofing-info-card{border-radius:20px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03)),linear-gradient(180deg,#d6892d,#0d99f1);backdrop-filter:blur(10px);color:#fff;}
        .roofing-offer-section .mini-badge{display:inline-block;background:rgba(255,255,255,0.2);padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;margin-bottom:16px;}
        .roofing-offer-section .roofing-info-card h3{font-size:26px;font-weight:800;line-height:1.2;margin-bottom:16px;}
        .roofing-offer-section .info-para{color:rgba(255,255,255,0.85);font-size:14px;line-height:1.55;margin-bottom:20px;}
        .roofing-offer-section .info-box{background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;margin-bottom:12px;backdrop-filter:blur(8px);}
        .roofing-offer-section .info-box h5{font-size:16px;font-weight:700;margin:0 0 5px;}
        .roofing-offer-section .info-box p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.9);}
        .roofing-offer-section .terms-wrapper .custom-accordion-item{background:#fff;border-radius:14px;overflow:hidden;border:none;}
        .roofing-offer-section summary.accordion-button{list-style:none;cursor:pointer;background:#fff;padding:16px 20px;font-size:15px;font-weight:700;color:#111;display:flex;justify-content:space-between;align-items:center;}
        .roofing-offer-section summary.accordion-button::-webkit-details-marker{display:none;}
        .roofing-offer-section .accordion-body{background:#fff;padding:8px 20px 20px;}
        .roofing-offer-section .accordion-body ul{margin:0;padding-left:20px;}
        .roofing-offer-section .accordion-body li{margin-bottom:10px;color:#444;font-size:13.5px;}
        .roofing-offer-section .deal-terms-list{list-style:none;padding-left:0;margin:0;}
        .roofing-offer-section .deal-terms-list li{margin-bottom:10px;color:#444;font-size:13.5px;line-height:1.5;}
        .roofing-offer-section .roofing-cta-box{padding:44px 32px;border-radius:22px;background:linear-gradient(90deg,rgba(255,140,0,0.25),rgba(20,150,255,0.22));backdrop-filter:blur(10px);}
        .roofing-offer-section .roofing-cta-box h2{color:#fff;font-size:32px;font-weight:800;line-height:1.2;margin-bottom:12px;}
        .roofing-offer-section .roofing-cta-box p{color:#d7d7d7;max-width:620px;margin:auto;font-size:15px;line-height:1.55;}
        .roofing-offer-section .cta-btn-group{margin-top:26px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
        .roofing-offer-section .start-btn,.roofing-offer-section .sales-btn{padding:12px 24px;border-radius:12px;text-decoration:none;font-size:14px;font-weight:700;transition:0.3s;}
        .roofing-offer-section .start-btn{background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#fff;}
        .roofing-offer-section .sales-btn{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);}
        .roofing-offer-section .start-btn:hover,.roofing-offer-section .sales-btn:hover{transform:translateY(-3px);}
        @media (max-width:991px){
          .roofing-offer-section .col-lg-6{flex:0 0 100%;max-width:100%;}
          .roofing-offer-section .roofing-heading h2{font-size:32px;}
          .roofing-offer-section .roofing-cta-box h2{font-size:28px;}
          .roofing-offer-section .price-box h2{font-size:44px;}
        }
        @media (max-width:767px){
          .roofing-offer-section{padding:48px 0;}
          .roofing-offer-section .roofing-heading h2{font-size:27px;}
          .roofing-offer-section .roofing-info-card h3{font-size:23px;}
          .roofing-offer-section .roofing-cta-box h2{font-size:24px;}
          .roofing-offer-section .lifetime-card,
          .roofing-offer-section .roofing-info-card,
          .roofing-offer-section .roofing-cta-box{padding:22px;}
          .roofing-offer-section .price-box h2{font-size:40px;}
        }
      `}</style>
    </section>
  );
}

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