/* Fish-Eye.net Landing Page — main app component */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#0ea5e9",
  "darkMode": false,
  "density": "comfortable"
}/*EDITMODE-END*/;

const FishEyeLanding = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const dark = tweaks.darkMode;
  const accent = tweaks.accentColor;
  const compact = tweaks.density === 'compact';

  const t = {
    bg: dark ? '#0b1120' : '#f8fafc',
    bg2: dark ? '#0f1729' : '#ffffff',
    bg3: dark ? '#141d2f' : '#f1f5f9',
    text: dark ? '#e2e8f0' : '#1e293b',
    muted: dark ? '#64748b' : '#64748b',
    border: dark ? 'rgba(148,163,184,0.12)' : 'rgba(148,163,184,0.25)',
    accent,
    accentSoft: `${accent}15`,
    accentMed: `${accent}30`,
    mono: { fontFamily: "'JetBrains Mono', monospace" },
    pad: compact ? '48px' : '64px',
    sectionGap: compact ? '64px' : '96px',
  };

  return (
    <div style={{ background: t.bg, color: t.text, fontFamily: "'Inter', system-ui, -apple-system, sans-serif", minHeight: '100vh', transition: 'background 0.3s, color 0.3s' }}>
      {/* Nav */}
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `16px ${t.pad}`, borderBottom: `1px solid ${t.border}`, background: dark ? 'rgba(11,17,32,0.8)' : 'rgba(255,255,255,0.8)', backdropFilter: 'blur(16px)', position: 'sticky', top: 0, zIndex: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: `linear-gradient(135deg, ${accent}, ${accent}cc)`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 16px ${accent}30` }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8" strokeDasharray="4 3"/></svg>
          </div>
          <span style={{ fontWeight: 700, fontSize: 17, letterSpacing: '-0.02em' }}>Fish-Eye</span>
          <span style={{ ...t.mono, fontSize: 10, background: t.accentSoft, color: accent, padding: '2px 8px', borderRadius: 4, fontWeight: 600 }}>BETA</span>
        </div>
        <div style={{ display: 'flex', gap: 28, fontSize: 13, color: t.muted }}>
          <a href="#features" style={{ color: 'inherit', textDecoration: 'none' }}>Features</a>
          <a href="#downloads" style={{ color: 'inherit', textDecoration: 'none' }}>Downloads</a>
          <a href="#changelog" style={{ color: 'inherit', textDecoration: 'none' }}>Changelog</a>
        </div>
      </nav>

      {/* Hero */}
      <section style={{ padding: `${compact ? '80px' : '120px'} ${t.pad} ${compact ? '48px' : '72px'}`, textAlign: 'center', maxWidth: 800, margin: '0 auto', position: 'relative' }}>
        <div style={{ ...t.mono, fontSize: 12, color: accent, marginBottom: 20, letterSpacing: '0.04em' }}>v1.0 Beta — Now Available for Ubuntu</div>
        <h1 style={{ fontSize: compact ? 52 : 64, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.035em', margin: '0 0 20px' }}>
          Network Monitoring{' '}
          <span style={{ background: `linear-gradient(135deg, ${accent}, ${accent}99)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>Made Simple</span>
        </h1>
        <p style={{ fontSize: compact ? 17 : 19, color: t.muted, lineHeight: 1.65, maxWidth: 560, margin: '0 auto 40px' }}>
          Local-first network telemetry with deep visibility into latency, jitter, packet loss, and throughput. Like ThousandEyes, but it runs on your infrastructure.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="#downloads" style={{ textDecoration: 'none', background: accent, color: '#fff', border: 'none', padding: '13px 28px', borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, boxShadow: `0 0 24px ${accent}30`, transition: 'transform 0.15s', }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 3v13m0 0l-4-4m4 4l4-4"/><path d="M4 19h16"/></svg>
            Download for Ubuntu
          </a>
          <span style={{ ...t.mono, fontSize: 12, color: t.muted }}>v1.0-beta · .deb</span>
        </div>
      </section>

      {/* Faux Dashboard Screenshot */}
      <section style={{ padding: `0 ${t.pad} ${t.sectionGap}`, maxWidth: 1100, margin: '0 auto' }}>
        <FauxDashboard />
      </section>

      {/* Features */}
      <section id="features" style={{ padding: `0 ${t.pad} ${t.sectionGap}`, maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: compact ? 40 : 56 }}>
          <div style={{ ...t.mono, fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>Capabilities</div>
          <h2 style={{ fontSize: compact ? 32 : 40, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>Everything you need to see your network</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: compact ? 12 : 16 }}>
          {[
            { title: 'Multi-Node Monitoring', desc: 'Deploy probe agents on remote machines for distributed monitoring. Each node fetches targets and reports back to the master, giving you visibility from multiple vantage points.', tag: 'Distributed' },
            { title: 'Path Visualization', desc: 'Visual hop-by-hop network topology showing exactly where latency spikes and packet loss occur between your nodes and targets.', tag: 'Visual' },
            { title: 'Custom Dashboards', desc: 'Build personalized views with the widgets that matter to you. Arrange latency charts, heatmaps, and status overviews your way.', tag: 'Flexible' },
            { title: 'Alerting', desc: 'Threshold-based alerting when network conditions degrade. Get notified before your users notice problems.', tag: 'Proactive' },
            { title: 'Dark & Light Mode', desc: 'Full theme support with a polished dark mode for NOC environments and a clean light mode for daytime use.', tag: 'Comfort' },
            { title: 'DNS Deep Dive', desc: 'Dedicated DNS analysis tools and external outage tracking to pinpoint resolution failures across your infrastructure.', tag: 'Diagnostic' },
          ].map((f, i) => (
            <div key={i} style={{ background: t.bg2, border: `1px solid ${t.border}`, borderRadius: 12, padding: compact ? 24 : 32, transition: 'border-color 0.2s, box-shadow 0.2s' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                <span style={{ ...t.mono, fontSize: 9, color: accent, background: t.accentSoft, padding: '3px 8px', borderRadius: 4, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{f.tag}</span>
              </div>
              <h3 style={{ fontSize: compact ? 17 : 19, fontWeight: 600, margin: '0 0 8px', letterSpacing: '-0.01em' }}>{f.title}</h3>
              <p style={{ fontSize: 14, color: t.muted, margin: 0, lineHeight: 1.65 }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Path Viz showcase */}
      <section style={{ padding: `0 ${t.pad} ${t.sectionGap}`, maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: compact ? 24 : 32 }}>
          <div style={{ ...t.mono, fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Path Visualization</div>
          <h3 style={{ fontSize: compact ? 24 : 28, fontWeight: 700, margin: 0, letterSpacing: '-0.02em' }}>See every hop between your nodes</h3>
        </div>
        <FauxPathViz />
      </section>

      {/* Downloads */}
      <section id="downloads" style={{ padding: `0 ${t.pad} ${t.sectionGap}`, maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: compact ? 32 : 48 }}>
          <div style={{ ...t.mono, fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>Downloads</div>
          <h2 style={{ fontSize: compact ? 32 : 40, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>Get Fish-Eye</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, maxWidth: 700, margin: '0 auto' }}>
          {[
            { os: 'Ubuntu 22.04 LTS', codename: 'Jammy Jellyfish', file: 'fish-eye_1.0-beta_amd64.deb', size: '24.3 MB' },
            { os: 'Ubuntu 24.04 LTS', codename: 'Noble Numbat', file: 'fish-eye_1.0-beta_amd64.deb', size: '24.1 MB' },
          ].map((d, i) => (
            <div key={i} style={{ background: t.bg2, border: `1px solid ${t.border}`, borderRadius: 12, padding: compact ? 24 : 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 000 20 14.5 14.5 0 000-20M2 12h20"/></svg>
                  <span style={{ fontWeight: 600, fontSize: 16 }}>{d.os}</span>
                </div>
                <div style={{ fontSize: 12, color: t.muted, marginBottom: 4 }}>{d.codename}</div>
                <div style={{ ...t.mono, fontSize: 11, color: t.muted }}>{d.file} · {d.size}</div>
              </div>
              <a href="https://github.com/TheProdigalAidan/FishEye/releases" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)', color: t.text, border: `1px solid ${t.border}`, padding: '10px 0', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, transition: 'background 0.15s' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3v13m0 0l-4-4m4 4l4-4"/><path d="M4 19h16"/></svg>
                Download .deb
              </a>
            </div>
          ))}
        </div>
      </section>

      {/* Beta Notice */}
      <section style={{ padding: `0 ${t.pad} ${t.sectionGap}`, maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ background: dark ? '#1a1207' : '#fffbeb', border: `1px solid ${dark ? '#92400e40' : '#fbbf2440'}`, borderRadius: 12, padding: compact ? '32px 36px' : '40px 48px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <span style={{ ...t.mono, fontSize: 10, fontWeight: 600, color: '#f59e0b', background: dark ? '#f59e0b18' : '#fef3c720', padding: '3px 10px', borderRadius: 4, border: `1px solid ${dark ? '#92400e40' : '#fbbf2440'}` }}>BETA</span>
            <h3 style={{ fontSize: compact ? 18 : 20, fontWeight: 600, margin: 0 }}>This is beta software</h3>
          </div>
          <p style={{ fontSize: 14, color: t.muted, lineHeight: 1.75, margin: 0, maxWidth: 640 }}>
            Fish-Eye v1.0 Beta is under active development. You may encounter bugs, incomplete features, or breaking changes between updates. We welcome feedback — please report issues via the issue tracker. Not yet recommended for production-critical monitoring.
          </p>
        </div>
      </section>

      {/* Changelog */}
      <section id="changelog" style={{ padding: `0 ${t.pad} ${t.sectionGap}`, maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: compact ? 32 : 48 }}>
          <div style={{ ...t.mono, fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12 }}>Changelog</div>
          <h2 style={{ fontSize: compact ? 32 : 40, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>What's new</h2>
        </div>
        <div style={{ background: t.bg2, border: `1px solid ${t.border}`, borderRadius: 12, padding: compact ? 28 : 36, maxWidth: 700, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <span style={{ ...t.mono, fontSize: 15, fontWeight: 700 }}>v1.0-beta</span>
              <span style={{ ...t.mono, fontSize: 10, color: '#22c55e', background: dark ? '#22c55e15' : '#f0fdf4', padding: '2px 8px', borderRadius: 4 }}>INITIAL RELEASE</span>
            </div>
            <span style={{ fontSize: 13, color: t.muted }}>May 2026</span>
          </div>
          <ul style={{ fontSize: 14, color: t.muted, lineHeight: 2, margin: 0, paddingLeft: 18 }}>
            <li>Real-time interface monitoring with multi-node distributed probing</li>
            <li>Path visualization with hop-by-hop topology mapping</li>
            <li>Custom dashboards with configurable widgets</li>
            <li>Threshold-based alerting with degraded/down detection</li>
            <li>DNS deep dive and external outage tracking</li>
            <li>Ubuntu 22.04 LTS and 24.04 LTS support</li>
          </ul>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ padding: `28px ${t.pad}`, borderTop: `1px solid ${t.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: t.muted }}>
        <span>© 2026 Fish-Eye.net — Beta software. Use at your own risk.</span>
        <div style={{ display: 'flex', gap: 20, ...t.mono, fontSize: 11 }}>
          <a href="https://github.com/TheProdigalAidan/FishEye" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>GitHub</a>
          <a href="https://github.com/TheProdigalAidan/FishEye/issues" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Issues</a>
          <a href="https://github.com/TheProdigalAidan/FishEye#readme" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Docs</a>
        </div>
      </footer>

      {/* Tweaks Panel */}
      <TweaksPanel title="Fish-Eye Tweaks">
        <TweakSection label="Appearance">
          <TweakToggle label="Dark Mode" value={tweaks.darkMode} onChange={v => setTweak('darkMode', v)} />
          <TweakColor label="Accent Color" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
          <TweakRadio label="Density" options={['compact', 'comfortable']} value={tweaks.density} onChange={v => setTweak('density', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

window.FishEyeLanding = FishEyeLanding;