/* 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" }}>// 3,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 }}>
                  Book a demo <span className="arrow">→</span>
                </a>
                <a href="https://book.lynkeduppro.com/" className="btn btn-orange" style={{ height: 60, padding: "0 36px", fontSize: 16 }}>
                  Claim Founders Lifetime Deal
                </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">
                <div className="price-anchor">
                  <span className="price-was">$25,000</span>
                  <span className="price-save">Save $23,000 · 92% off</span>
                </div>
                <h2>$2000</h2>
                <span>PER LICENSE • 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">
              <div className="deal-terms-legal" style={{ fontSize: 12, lineHeight: 1.65, color: "#444" }}>
                <p>All claims, results, performance statements, platform capabilities, and customer references are provided for informational and promotional purposes only. Claims may be based on a combination of internal testing, platform development data, field-tested data, and feedback from founding users. Individual results may vary based on company size, user adoption, data quality, market conditions, workflow setup, and other business-specific factors.</p>
                <p>Some user names, company names, examples, or identifying details may have been changed, modified, or withheld to protect user privacy, confidential business information, proprietary workflows, and trade secrets.</p>
                <p>The Lifetime Founders License applies to one user license and one individual user account unless otherwise stated in writing. The Founders License includes access to core CRM features and the platform features made available under the applicable license terms. The Lifetime Founders License does not guarantee access to every future product, premium module, third-party integration, usage-based service, or separately priced feature.</p>
                <p>SMS usage, data usage, storage, GPU processing, AI compute, automation volume, messaging volume, third-party API costs, and other usage-based services may incur additional monthly charges. These charges may be billed separately based on actual usage, service level, selected features, or third-party provider costs.</p>
                <p>Advanced or specialized features, including but not limited to Campaign-X, LiDAR scans, digital twin technology, AI-generated content, 3D property scans, mapping tools, premium automation, and other enhanced modules, may require additional fees, setup costs, subscriptions, or usage-based billing.</p>
                <p style={{ marginBottom: 0 }}>Features, pricing, availability, and platform capabilities are subject to change. No statement shall be interpreted as a guarantee of revenue, cost savings, insurance savings, operational results, business growth, or specific customer outcomes. Use of the platform is subject to the final written agreement, subscription terms, billing terms, and applicable service terms provided by Lynked Up Technologies.</p>
              </div>
            </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">Book a demo</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 .price-anchor{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
        .roofing-offer-section .price-was{position:relative;color:#c98f6a;font-size:22px;font-weight:700;text-decoration:line-through;text-decoration-color:rgba(255,147,33,.75);text-decoration-thickness:2px;}
        .roofing-offer-section .price-save{display:inline-block;padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,#ff9321,#4dc5ff);color:#0d0d0f;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap;}
        .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 });