/* global React, Reveal, GlowCard, Icon, Sparkline, DonutChart, BlueprintHouse, Counter */
// Features, Connected Operations, Mobile

const FEATURES = [
  { code: "M.01", name: "AI Copilot", icon: "ai", color: "var(--cyan)",
    desc: "An intelligent operator that thinks ahead — rerouting crews, flagging risk, and surfacing next best actions in real time.",
    tag: "ALWAYS ON" },
  { code: "M.02", name: "Smart Scheduling", icon: "calendar", color: "var(--orange)",
    desc: "Auto-organizes routes, weather, conflicts and dependencies. Suggests the perfect time, every time.",
    tag: "ADAPTIVE" },
  { code: "M.03", name: "Crew Automation", icon: "crew", color: "var(--green)",
    desc: "Dispatch, check-ins, and timecards run themselves. Field teams stay aligned without the chatter.",
    tag: "HANDS-FREE" },
  { code: "M.04", name: "GPS Fleet Tracking", icon: "fleet", color: "var(--violet)",
    desc: "Live vehicle telemetry, geofenced job zones, ETA forecasting, and route optimization at a glance.",
    tag: "REAL-TIME" },
  { code: "M.05", name: "Budget Intelligence", icon: "budget", color: "var(--cyan)",
    desc: "Predictive margins, automated cost capture, and instant variance alerts before they bite.",
    tag: "PREDICTIVE" },
  { code: "M.06", name: "Real-time Reporting", icon: "report", color: "var(--orange)",
    desc: "Production, profit, and performance — generated continuously from connected operations data.",
    tag: "LIVE" },
  { code: "M.07", name: "Client Communication", icon: "chat", color: "var(--green)",
    desc: "Branded portal, automated touchpoints, and a single thread per project. Nothing falls through.",
    tag: "BRANDED" },
  { code: "M.08", name: "Field Intelligence", icon: "field", color: "var(--violet)",
    desc: "AI-powered measurements, photo evidence, claim-ready reports and on-site decisions in minutes.",
    tag: "AI VISION" },
];

// ============ SPEC SHEET — six-system architecture =============
function SpecSheet() {
  const systems = [
    { code: "S.01", name: "CRM",         icon: "lead",     color: "var(--cyan)",   desc: "Pipeline, leads & relationships" },
    { code: "S.02", name: "Canvas",      icon: "doc",      color: "var(--orange)", desc: "Project plans & blueprints" },
    { code: "S.03", name: "Measurements",icon: "target",   color: "var(--green)",  desc: "AI roof & site dimensions" },
    { code: "S.04", name: "Client",      icon: "chat",     color: "var(--violet)", desc: "Branded portals & comms" },
    { code: "S.05", name: "Billing",     icon: "money",    color: "var(--cyan)",   desc: "Invoicing, payments, AR" },
    { code: "S.06", name: "Estimating",  icon: "report",   color: "var(--orange)", desc: "Proposals that close" },
  ];
  return (
    <section className="section tight" id="systems">
      <div className="beam top"/>
      <div className="shell">
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
            <div>
              <span className="section-number">
                <span className="num">§04</span>
                <span>SPEC SHEET · CORE STACK</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                Six systems.<br/>
                <span className="accent">One intelligent CRM/ERP.</span>
              </h2>
            </div>
            <div className="row gap-12">
              <span className="dim-tag">// ALL CONNECTED</span>
              <span className="dim-tag">// ALL AUTOMATED</span>
              <span className="dim-tag" style={{ color: "var(--orange-2)", borderColor: "rgba(255,138,30,0.4)" }}>// BUILT TO PERFORM</span>
            </div>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <div style={{
            position: "relative",
            padding: "44px 36px 32px",
            border: "1px solid var(--border)",
            borderRadius: 20,
            background: `
              repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,209,255,0.04) 26px 27px),
              radial-gradient(700px 280px at 50% 0%, rgba(0,209,255,0.12), transparent 70%),
              rgba(2,6,14,0.55)
            `,
          }}>
            <DimCorner pos="tl"/>
            <DimCorner pos="tr"/>
            <DimCorner pos="bl"/>
            <DimCorner pos="br"/>

            {/* Spec header bar */}
            <div className="row" style={{
              justifyContent: "space-between",
              paddingBottom: 18,
              borderBottom: "1px dashed var(--border)",
              marginBottom: 28,
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.2em",
              color: "var(--muted)",
            }}>
              <span>LYNKEDUP PRO · TECHNICAL SPECIFICATION</span>
              <span style={{ color: "var(--cyan-2)" }}>SHEET 04 / 10</span>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 18 }}>
              {systems.map((s, i) => (
                <Reveal key={s.code} delay={(i % 6) + 1}>
                  <div style={{
                    padding: 20,
                    border: `1px solid ${s.color}55`,
                    borderRadius: 12,
                    background: `linear-gradient(180deg, ${s.color}10, transparent)`,
                    position: "relative",
                    transition: "transform 0.3s, box-shadow 0.3s",
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.transform = "translateY(-4px)";
                    e.currentTarget.style.boxShadow = `0 18px 40px -16px ${s.color}99`;
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.transform = "none";
                    e.currentTarget.style.boxShadow = "none";
                  }}
                  >
                    <div style={{
                      width: 44, height: 44, borderRadius: 10,
                      border: `1px solid ${s.color}99`,
                      background: `${s.color}18`,
                      display: "grid", placeItems: "center",
                      marginBottom: 18,
                      boxShadow: `inset 0 0 18px -4px ${s.color}77`,
                    }}>
                      <Icon name={s.icon} size={22} stroke={s.color}/>
                    </div>
                    <div className="mono" style={{ fontSize: 10, color: s.color, letterSpacing: "0.18em", marginBottom: 6 }}>{s.code} /</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 600, marginBottom: 6 }}>{s.name}</div>
                    <div style={{ fontSize: 11, color: "var(--muted)", lineHeight: 1.45 }}>{s.desc}</div>
                  </div>
                </Reveal>
              ))}
            </div>

            {/* spec footer */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 0,
              marginTop: 32,
              borderTop: "1px dashed var(--border)",
              paddingTop: 22,
            }}>
              {[
                { l: "SEAMLESS COLLABORATION", d: "Crews & subs aligned", c: "var(--cyan)" },
                { l: "SMARTER DECISIONS", d: "AI insights you can act on", c: "var(--orange)" },
                { l: "PROFITABLE GROWTH", d: "Close more, margin up", c: "var(--green)" },
                { l: "ZERO HANDOFF LOSS", d: "Same data layer end-to-end", c: "var(--violet)" },
              ].map(f => (
                <div key={f.l} style={{ paddingRight: 18, borderRight: "1px solid var(--border)" }}>
                  <div className="mono" style={{ fontSize: 10, color: f.c, letterSpacing: "0.16em", marginBottom: 8 }}>● {f.l}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-2)" }}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CoreFeatures() {
  return (
    <section className="section" id="features">
      <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">§05</span>
                <span>PLATFORM CAPABILITIES</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22, maxWidth: 700 }}>
                Eight modules.<br/>
                <span className="accent">One operating brain.</span>
              </h2>
              <p className="sub" style={{ marginTop: 18 }}>
                Every module shares the same connected data layer —
                so insight in one corner of the business becomes action everywhere else.
              </p>
            </div>
            <span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>// MODULES 01–08</span>
          </div>
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {FEATURES.map((f, i) => (
            <Reveal key={f.name} delay={(i % 4) + 1}>
              <GlowCard className="feature-card" style={{ minHeight: 280, padding: 0, display: "flex", flexDirection: "column" }}>
                <div style={{ padding: 26, flex: 1, display: "flex", flexDirection: "column" }}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 22 }}>
                    <div style={{
                      width: 54, height: 54, borderRadius: 14,
                      border: `1px solid ${f.color}55`,
                      background: `linear-gradient(180deg, ${f.color}22, transparent)`,
                      display: "grid", placeItems: "center",
                      boxShadow: `0 0 24px -6px ${f.color}88, inset 0 0 24px -6px ${f.color}55`,
                    }}>
                      <Icon name={f.icon} size={26} stroke={f.color}/>
                    </div>
                    <span className="mono" style={{ fontSize: 10, color: f.color, letterSpacing: "0.2em" }}>{f.code} /</span>
                  </div>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 10 }}>
                    <h3 className="h-card">{f.name}</h3>
                    <span className="mono" style={{ fontSize: 9, color: f.color, letterSpacing: "0.18em", opacity: 0.8 }}>{f.tag}</span>
                  </div>
                  <p style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5, margin: 0 }}>{f.desc}</p>
                  <div style={{ flex: 1 }}/>
                  <div style={{
                    marginTop: 18,
                    display: "flex", alignItems: "center",
                    fontSize: 11,
                    color: f.color,
                    letterSpacing: "0.14em",
                    textTransform: "uppercase",
                  }} className="mono">
                    Explore module <span style={{ marginLeft: 8 }}>→</span>
                  </div>
                </div>
                <div style={{
                  height: 2,
                  background: `linear-gradient(90deg, transparent, ${f.color}, transparent)`,
                  opacity: 0.6,
                }}/>
              </GlowCard>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Connected Operations -----------------
function ConnectedOps() {
  // workflow nodes positioned around central blueprint
  const nodes = [
    { x: 12, y: 14, label: "Leads",      icon: "lead",   sub: "Auto-qualified" },
    { x: 12, y: 38, label: "Schedule",   icon: "calendar", sub: "Adapts in real time" },
    { x: 12, y: 62, label: "Inspections",icon: "doc",     sub: "Field-captured" },
    { x: 88, y: 14, label: "Estimates",  icon: "money",   sub: "Create faster" },
    { x: 88, y: 38, label: "Jobs",       icon: "hammer",  sub: "Every step tracked" },
    { x: 88, y: 62, label: "Invoices",   icon: "report",  sub: "Paid faster" },
  ];
  return (
    <section className="section" id="platform">
      <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">§06</span>
                <span>CONNECTED OPERATIONS</span>
              </span>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                All your work.<br/>
                Connected. <span className="accent">All in one place.</span>
              </h2>
              <p className="sub" style={{ marginTop: 18 }}>
                From leads to final invoice, every operational detail flows
                through the same nervous system. Nothing slips through the cracks.
              </p>
            </div>
            <span className="dim-tag" style={{ height: 30, padding: "4px 12px" }}>// ONE SOURCE OF TRUTH</span>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <GlowCard style={{ padding: 0, overflow: "hidden" }}>
            <div style={{
              position: "relative",
              height: 720,
              background: `
                radial-gradient(800px 400px at 50% 50%, rgba(0,209,255,0.12), transparent 70%),
                linear-gradient(180deg, rgba(4,10,22,0.4), rgba(2,6,14,0.6))
              `,
            }}>
              {/* SVG connection lines */}
              <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}>
                <defs>
                  <linearGradient id="line-g" x1="0" x2="1">
                    <stop offset="0" stopColor="#00d1ff" stopOpacity="0"/>
                    <stop offset="0.5" stopColor="#00d1ff" stopOpacity="0.7"/>
                    <stop offset="1" stopColor="#00d1ff" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {nodes.map((n, i) => {
                  const cx = 50, cy = 50;
                  return (
                    <g key={i}>
                      <path
                        d={`M${n.x} ${n.y} C ${(n.x+cx)/2} ${n.y}, ${(n.x+cx)/2} ${cy}, ${cx} ${cy}`}
                        fill="none"
                        stroke="rgba(0,209,255,0.32)"
                        strokeWidth="0.15"
                        strokeDasharray="0.6 0.6"
                        vectorEffect="non-scaling-stroke"
                      />
                      <circle r="0.5" fill="#7be8ff">
                        <animateMotion
                          dur={`${3 + i * 0.3}s`}
                          repeatCount="indefinite"
                          path={`M${n.x} ${n.y} C ${(n.x+cx)/2} ${n.y}, ${(n.x+cx)/2} ${cy}, ${cx} ${cy}`}
                        />
                      </circle>
                    </g>
                  );
                })}
              </svg>

              {/* Central wireframe house */}
              <div style={{
                position: "absolute",
                left: "50%", top: "50%",
                transform: "translate(-50%, -50%)",
                opacity: 0.9,
              }}>
                <BlueprintHouse size={520} animate={false} withScan={true}/>
              </div>

              {/* Central hex logo overlay */}
              <div style={{
                position: "absolute",
                left: "50%", top: "50%",
                transform: "translate(-50%, -50%)",
                width: 110, height: 110,
                display: "grid", placeItems: "center",
                background: "radial-gradient(circle, rgba(0,209,255,0.3), transparent 60%)",
                zIndex: 2,
              }}>
                <svg width="100" height="100" viewBox="0 0 48 48" style={{ filter: "drop-shadow(0 0 20px rgba(0,209,255,0.9))" }}>
                  <polygon points="24,3 43,13.5 43,34.5 24,45 5,34.5 5,13.5"
                    fill="rgba(0, 30, 60, 0.85)"
                    stroke="#00d1ff" strokeWidth="1.4"/>
                  <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.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>

              {/* Workflow nodes */}
              {nodes.map((n, i) => (
                <div key={n.label} style={{
                  position: "absolute",
                  left: `${n.x}%`, top: `${n.y}%`,
                  transform: `translate(${n.x < 50 ? "-10%" : "-90%"}, -50%)`,
                  zIndex: 3,
                }}>
                  <div style={{
                    width: 200,
                    padding: 14,
                    background: "linear-gradient(180deg, rgba(8,18,36,0.92), rgba(4,10,22,0.88))",
                    border: "1px solid rgba(0,209,255,0.35)",
                    borderRadius: 12,
                    backdropFilter: "blur(14px)",
                    boxShadow: "0 8px 24px -10px rgba(0,209,255,0.45)",
                    animation: `floatY ${5 + i * 0.4}s ease-in-out infinite`,
                    animationDelay: `${i * 0.3}s`,
                  }}>
                    <div className="row gap-12" style={{ marginBottom: 6 }}>
                      <Icon name={n.icon} size={18} stroke="var(--cyan)"/>
                      <span style={{ fontFamily: "var(--font-display)", fontSize: 15, fontWeight: 600 }}>{n.label}</span>
                    </div>
                    <div style={{ fontSize: 11, color: "var(--muted)" }}>{n.sub}</div>
                  </div>
                </div>
              ))}

              {/* Footer ribbon */}
              <div style={{
                position: "absolute",
                left: 24, right: 24, bottom: 22,
                display: "flex", justifyContent: "space-between", alignItems: "center",
                padding: "14px 22px",
                background: "rgba(0,209,255,0.06)",
                border: "1px solid var(--border)",
                borderRadius: 12,
                backdropFilter: "blur(10px)",
              }}>
                <div className="row gap-16">
                  <span className="live-dot"/>
                  <span className="mono" style={{ fontSize: 12, color: "var(--cyan-2)", letterSpacing: "0.18em" }}>
                    ONE SYSTEM · ONE SOURCE OF TRUTH
                  </span>
                </div>
                <div className="row gap-24" style={{ fontSize: 11, color: "var(--muted)" }} >
                  <span><Counter to={2847} /> events / hr</span>
                  <span>·</span>
                  <span><Counter to={147} suffix=" ms"/> sync</span>
                  <span>·</span>
                  <span className="mono" style={{ color: "var(--green)" }}>● HEALTHY</span>
                </div>
              </div>
            </div>
          </GlowCard>
        </Reveal>

        {/* Outcome bar */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 32 }}>
          {[
            { icon: "clock", color: "var(--cyan)", title: "Save time", desc: "Automate the busy work and focus on what matters." },
            { icon: "target", color: "var(--orange)", title: "Reduce errors", desc: "Connected data means fewer mistakes." },
            { icon: "growth", color: "var(--green)", title: "Grow faster", desc: "Better systems. Better decisions. Bigger results." },
          ].map((o, i) => (
            <Reveal key={o.title} delay={i + 1}>
              <div style={{
                padding: 22, display: "flex", gap: 16, alignItems: "flex-start",
                border: "1px solid var(--border)", borderRadius: 16,
                background: "rgba(0,209,255,0.03)",
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10,
                  border: `1px solid ${o.color}55`,
                  display: "grid", placeItems: "center",
                  background: `${o.color}15`,
                }}>
                  <Icon name={o.icon} size={22} stroke={o.color}/>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600, marginBottom: 4 }}>{o.title}</div>
                  <div style={{ fontSize: 13, color: "var(--muted)" }}>{o.desc}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// --------------- Mobile Experience ----------------
function MobilePhone() {
  return (
    <div style={{ position: "relative", width: 320, height: 660 }}>
      {/* Phone frame */}
      <div style={{
        width: "100%", height: "100%",
        background: "linear-gradient(160deg, #1a2540, #07101e)",
        borderRadius: 42,
        padding: 8,
        boxShadow: "0 60px 80px -30px rgba(0,209,255,0.45), 0 0 0 1px rgba(0,209,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.05)",
        position: "relative",
      }}>
        <div style={{
          width: "100%", height: "100%",
          background: "linear-gradient(180deg, #050c18, #02060e)",
          borderRadius: 34,
          overflow: "hidden",
          position: "relative",
        }}>
          {/* Notch */}
          <div style={{
            position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)",
            width: 110, height: 26, background: "#000", borderRadius: 13, zIndex: 5,
          }}/>
          {/* Status bar */}
          <div style={{
            display: "flex", justifyContent: "space-between",
            padding: "16px 24px 0",
            fontSize: 12, fontFamily: "var(--font-display)", fontWeight: 600,
            color: "#fff",
          }}>
            <span>9:41</span>
            <span style={{ opacity: 0 }}>.</span>
            <span className="mono">●●●● <span style={{ marginLeft: 4 }}>5G</span></span>
          </div>

          {/* App content */}
          <div style={{ padding: "40px 18px 18px", display: "flex", flexDirection: "column", gap: 10 }}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16 }}>June 23, 2026</span>
              <Icon name="bell" size={18} stroke="var(--cyan)"/>
            </div>
            <div className="mono" style={{ fontSize: 11, color: "var(--cyan-2)", letterSpacing: "0.16em" }}>TODAY · 3 SCHEDULED</div>

            {/* Schedule cards */}
            {[
              { t: "10:00 AM", title: "Roof Inspection", sub: "123 Maple St", active: true },
              { t: "1:30 PM", title: "Estimate Review", sub: "456 Oak Ave" },
              { t: "9:00 AM", title: "Material Order", sub: "789 Pine Rd" },
            ].map((s, i) => (
              <div key={i} style={{
                padding: 14,
                borderRadius: 14,
                background: s.active ? "linear-gradient(180deg, #ff8a1e, #d96100)" : "rgba(0,209,255,0.07)",
                border: s.active ? "1px solid #ffb24d" : "1px solid var(--border)",
                color: s.active ? "#1a0800" : "var(--ink)",
                boxShadow: s.active ? "0 12px 24px -8px rgba(255,138,30,0.6)" : "none",
              }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 13 }}>{s.t}</div>
                <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2 }}>{s.title}</div>
                <div style={{ fontSize: 11, opacity: 0.75 }}>{s.sub}</div>
              </div>
            ))}

            {/* Bottom tabs */}
            <div className="row" style={{ justifyContent: "space-around", marginTop: 16, padding: "10px 0", borderTop: "1px solid rgba(0,209,255,0.15)" }}>
              {["calendar","sync","bell","pin"].map((ic, i) => (
                <div key={i} style={{ width: 32, height: 32, borderRadius: 8, display: "grid", placeItems: "center",
                    background: i === 0 ? "rgba(0,209,255,0.18)" : "transparent" }}>
                  <Icon name={ic} size={16} stroke={i === 0 ? "var(--cyan)" : "var(--muted)"}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Side notification glows */}
      <div style={{ position: "absolute", top: 80, right: -180, animation: "floatY 5s ease-in-out infinite" }}>
        <div style={{
          width: 220, padding: 14,
          background: "rgba(0,209,255,0.08)",
          border: "1px solid rgba(0,209,255,0.4)",
          borderRadius: 12,
          backdropFilter: "blur(14px)",
          boxShadow: "0 12px 30px -10px rgba(0,209,255,0.5)",
        }}>
          <div className="row gap-8" style={{ marginBottom: 6 }}>
            <span className="live-dot"/>
            <span className="mono" style={{ fontSize: 10, color: "var(--cyan-2)", letterSpacing: "0.16em" }}>NEW ALERT</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Crew B clocked in</div>
          <div style={{ fontSize: 11, color: "var(--muted)" }}>456 Oak Ave · 3 min ago</div>
        </div>
      </div>

      <div style={{ position: "absolute", bottom: 80, left: -200, animation: "floatY 6s ease-in-out infinite", animationDelay: "1s" }}>
        <div style={{
          width: 240, padding: 14,
          background: "rgba(255,138,30,0.07)",
          border: "1px solid rgba(255,138,30,0.4)",
          borderRadius: 12,
          backdropFilter: "blur(14px)",
          boxShadow: "0 12px 30px -10px rgba(255,138,30,0.45)",
        }}>
          <div className="row gap-8" style={{ marginBottom: 6 }}>
            <Icon name="spark" size={12} stroke="var(--orange)"/>
            <span className="mono" style={{ fontSize: 10, color: "var(--orange-2)", letterSpacing: "0.16em" }}>AI REMINDER</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Leave by 9:42 AM</div>
          <div style={{ fontSize: 11, color: "var(--muted)" }}>Traffic on Maple St — moderate</div>
        </div>
      </div>

      <div style={{ position: "absolute", top: 350, right: -160, animation: "floatY 5.5s ease-in-out infinite", animationDelay: "2s" }}>
        <div style={{
          width: 180, padding: 12,
          background: "rgba(43,212,156,0.07)",
          border: "1px solid rgba(43,212,156,0.4)",
          borderRadius: 12,
          backdropFilter: "blur(14px)",
          boxShadow: "0 12px 30px -10px rgba(43,212,156,0.4)",
        }}>
          <div className="row gap-8" style={{ marginBottom: 4 }}>
            <Icon name="report" size={12} stroke="var(--green)"/>
            <span className="mono" style={{ fontSize: 10, color: "var(--green)", letterSpacing: "0.16em" }}>DAILY REPORT</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>3 jobs · $12.4K</div>
          <div style={{ fontSize: 11, color: "var(--muted)" }}>Generated · 4:55 PM</div>
        </div>
      </div>

      {/* Ambient glow behind phone */}
      <div className="ring-glow" style={{
        width: 500, height: 500, top: 50, left: -100,
        background: "radial-gradient(circle, rgba(0,209,255,0.4), transparent 60%)", zIndex: -1,
      }}/>
    </div>
  );
}

function MobileSection() {
  return (
    <section className="section" id="mobile">
      <div className="beam top"/>
      <div className="shell split">
        <div>
          <Reveal>
            <span className="section-number">
              <span className="num">§07</span>
              <span>FIELD MOBILE</span>
            </span>
          </Reveal>
          <Reveal delay={1}>
            <h2 className="h-section" style={{ marginTop: 22 }}>
              Never miss what matters.<br/>
              <span className="accent">Stay ahead every day.</span>
            </h2>
          </Reveal>
          <Reveal delay={2}>
            <p className="sub" style={{ marginTop: 24 }}>
              The LynkedUp Pro mobile companion turns your phone into a field
              command center. Smart scheduling, real-time alerts, and AI reminders
              keep your day on track — and your business moving forward.
            </p>
          </Reveal>
          <Reveal delay={3}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 36 }}>
              {[
                { icon: "calendar", title: "Smart scheduling", sub: "Automatically organize and adapt.", color: "var(--cyan)" },
                { icon: "bell", title: "Real-time alerts", sub: "Know what's next. Always.", color: "var(--orange)" },
                { icon: "pin", title: "Location ready", sub: "Get directions and job details in one tap.", color: "var(--green)" },
                { icon: "sync", title: "Sync everywhere", sub: "Stay aligned across your entire team.", color: "var(--violet)" },
              ].map(m => (
                <div key={m.title} className="row gap-16" style={{
                  padding: "14px 16px",
                  border: "1px solid var(--border)",
                  borderRadius: 12,
                  background: "rgba(0,209,255,0.03)",
                  transition: "border-color 0.25s, transform 0.25s",
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.borderColor = "var(--border-strong)";
                  e.currentTarget.style.transform = "translateX(6px)";
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.borderColor = "var(--border)";
                  e.currentTarget.style.transform = "none";
                }}
                >
                  <div style={{
                    width: 42, height: 42, borderRadius: 10,
                    border: `1px solid ${m.color}55`,
                    background: `${m.color}15`,
                    display: "grid", placeItems: "center",
                  }}>
                    <Icon name={m.icon} size={20} stroke={m.color}/>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, letterSpacing: "0.04em", textTransform: "uppercase" }}>{m.title}</div>
                    <div style={{ fontSize: 13, color: "var(--muted)" }}>{m.sub}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <Reveal delay={2}>
            <MobilePhone/>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CoreFeatures, ConnectedOps, MobileSection, SpecSheet });