// ScrollJob — recreated screens for the design canvas
// All visuals lifted from jobhub/jobs/templates/jobs/*.html
// Colors: primary blue #2563eb, hero gradient #667eea→#764ba2, neutrals #f9fafb/#e5e7eb/#6b7280/#111827.

const SJ = {
  blue: '#2563eb',
  blueDark: '#1d4ed8',
  blueSoft: '#eff6ff',
  blueRing: '#dbeafe',
  ink: '#111827',
  ink2: '#1a1a1a',
  text: '#374151',
  muted: '#6b7280',
  faint: '#9ca3af',
  line: '#e5e7eb',
  bg: '#ffffff',
  page: '#f9fafb',
  green: '#166534',
  greenBg: '#dcfce7',
  yellow: '#854d0e',
  yellowBg: '#fef9c3',
  purple: '#7c3aed',
  purpleBg: '#ede9fe',
  red: '#dc2626',
  redBg: '#fef2f2',
  redLine: '#fecaca',
  heroFrom: '#667eea',
  heroTo: '#764ba2',
  font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
};

// ─────────────────────────────────────────────────────────────────────────
// Reused chrome
// ─────────────────────────────────────────────────────────────────────────
function Header({ active }) {
  const links = ['Browse Jobs', 'Swipe', 'Blog', 'Resume Builder', 'Pricing'];
  return (
    <header style={{
      background: '#fff',
      borderBottom: `1px solid ${SJ.line}`,
      padding: '18px 0',
      position: 'sticky',
      top: 0,
      zIndex: 100,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24 }}>
        <a style={{
          fontSize: 26, fontWeight: 700, color: SJ.blue, textDecoration: 'none',
          letterSpacing: '-0.5px', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <img src="assets/logo.jpg" alt="ScrollJob" style={{ height: 36, width: 36, borderRadius: 8, objectFit: 'cover' }} />
          ScrollJob
        </a>
        <nav style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          {links.map((l) => (
            <a key={l} style={{
              color: l === active ? SJ.blue : '#4b5563',
              textDecoration: 'none', fontWeight: 500, fontSize: 15,
            }}>{l}</a>
          ))}
          <a style={{ color: '#4b5563', textDecoration: 'none', fontWeight: 500, fontSize: 15 }}>Sign in</a>
          <a style={{
            padding: '12px 22px', background: SJ.blue, color: '#fff',
            borderRadius: 10, fontSize: 14, fontWeight: 600, textDecoration: 'none',
          }}>Post a Job</a>
        </nav>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer style={{
      background: SJ.page,
      borderTop: `1px solid ${SJ.line}`,
      padding: '32px 0',
      marginTop: 60,
      textAlign: 'center',
      color: SJ.muted,
    }}>
      <p style={{ margin: 0, fontSize: 14 }}>© 2026 ScrollJob. Scroll. Swipe. Get hired.</p>
      <div style={{ marginTop: 10, display: 'inline-flex', gap: 18, fontSize: 14 }}>
        <a style={{ color: SJ.blue, textDecoration: 'none' }}>Resume Builder</a>
        <a style={{ color: SJ.blue, textDecoration: 'none' }}>API Documentation</a>
        <a style={{ color: SJ.blue, textDecoration: 'none' }}>Contact Us</a>
        <a style={{ color: SJ.blue, textDecoration: 'none' }}>For Advertisers</a>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────────────────
function HomeScreen() {
  return (
    <div style={{ background: '#fff', fontFamily: SJ.font, color: SJ.ink2, minHeight: '100%' }}>
      <Header active="" />

      <main style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 28px 0' }}>
        {/* Hero */}
        <section style={{
          background: `linear-gradient(135deg, ${SJ.heroFrom} 0%, ${SJ.heroTo} 100%)`,
          padding: '80px 28px 100px',
          textAlign: 'center',
          borderRadius: 28,
          color: '#fff',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* decorative scroll-arrow motif from the logo */}
          <svg width="220" height="220" viewBox="0 0 100 100" style={{ position: 'absolute', top: -30, right: -30, opacity: 0.08 }}>
            <path d="M30 20 Q60 20 60 40 Q60 55 40 55 Q60 55 60 70 L60 85" fill="none" stroke="#fff" strokeWidth="4" strokeLinecap="round"/>
            <path d="M55 78 L60 88 L65 78" fill="none" stroke="#fff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <h1 style={{ fontSize: 52, fontWeight: 800, marginBottom: 16, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
            Scroll. Swipe. Get hired.
          </h1>
          <p style={{ fontSize: 20, opacity: 0.95, marginBottom: 40, fontWeight: 400 }}>
            Thousands of opportunities from top companies in the UK
          </p>

          {/* Search */}
          <div style={{
            maxWidth: 820, margin: '0 auto', background: '#fff',
            borderRadius: 16, padding: 12,
            boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
            display: 'flex', gap: 12, alignItems: 'center',
          }}>
            <div style={{ flex: '1 1 250px', position: 'relative' }}>
              <span style={{ position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)', color: SJ.faint }}>🔍</span>
              <input type="text" placeholder="Job title, keywords, or company"
                defaultValue="Senior Python Developer"
                style={{
                  width: '100%', padding: '16px 20px 16px 44px', border: 'none',
                  borderRadius: 10, fontSize: 16, outline: 'none', background: '#f8f9fa', color: SJ.ink,
                  fontFamily: SJ.font,
                }} />
            </div>
            <div style={{ flex: '1 1 220px', position: 'relative' }}>
              <span style={{ position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)', color: SJ.faint }}>📍</span>
              <input type="text" placeholder="Location" defaultValue="London"
                style={{
                  width: '100%', padding: '16px 20px 16px 44px', border: 'none',
                  borderRadius: 10, fontSize: 16, outline: 'none', background: '#f8f9fa', color: SJ.ink,
                  fontFamily: SJ.font,
                }} />
            </div>
            <button style={{
              padding: '16px 38px', background: SJ.blue, color: '#fff',
              border: 'none', borderRadius: 10, fontSize: 16, fontWeight: 600,
              cursor: 'pointer', whiteSpace: 'nowrap', fontFamily: SJ.font,
            }}>Search Jobs</button>
          </div>

          <div style={{ marginTop: 22, display: 'flex', justifyContent: 'center', gap: 10, flexWrap: 'wrap', opacity: 0.95 }}>
            <span style={{ fontSize: 13, opacity: 0.8, marginRight: 6, alignSelf: 'center' }}>Trending:</span>
            {['React Engineer', 'DevOps', 'Data Scientist', 'Remote only'].map((t) => (
              <span key={t} style={{
                padding: '6px 12px', background: 'rgba(255,255,255,0.18)',
                border: '1px solid rgba(255,255,255,0.3)',
                borderRadius: 999, fontSize: 13, fontWeight: 500,
              }}>{t}</span>
            ))}
          </div>
        </section>

        {/* Job alerts + Resume promo, side by side */}
        <section style={{
          marginTop: 36,
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 24,
        }}>
          {/* Alerts card */}
          <div style={{
            background: '#fff', border: `1px solid ${SJ.blueRing}`,
            borderRadius: 24, padding: 32,
            boxShadow: '0 18px 40px rgba(37,99,235,0.10)',
            display: 'grid', gridTemplateColumns: '1.4fr 0.9fr', gap: 24, alignItems: 'start',
          }}>
            <div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px', borderRadius: 999, background: SJ.blueSoft,
                color: SJ.blueDark, fontSize: 12, fontWeight: 700, marginBottom: 16,
                letterSpacing: '0.04em', textTransform: 'uppercase',
              }}>📬 Job alerts by email</span>
              <h2 style={{ fontSize: 28, lineHeight: 1.2, marginBottom: 12, color: SJ.ink, fontWeight: 700 }}>
                Keep fresh jobs coming to your inbox
              </h2>
              <p style={{ fontSize: 15, color: '#4b5563', marginBottom: 18, lineHeight: 1.55 }}>
                We send personalized recommendation emails based on your activity and preferences.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {[
                  'Daily alerts are the default for new accounts.',
                  'Switch to weekly or turn alerts off anytime.',
                  'Your email history is saved inside your account.',
                ].map((t) => (
                  <li key={t} style={{ position: 'relative', paddingLeft: 18, marginBottom: 9, color: SJ.text, fontSize: 14.5 }}>
                    <span style={{ position: 'absolute', top: 9, left: 0, width: 6, height: 6, borderRadius: 999, background: SJ.blue, display: 'block' }} />
                    {t}
                  </li>
                ))}
              </ul>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 22 }}>
                <a style={{
                  padding: '13px 22px', borderRadius: 12, background: SJ.blue,
                  color: '#fff', fontSize: 14.5, fontWeight: 700, textDecoration: 'none',
                  boxShadow: '0 10px 20px rgba(37,99,235,0.2)',
                }}>Turn on job alerts</a>
                <a style={{
                  padding: '13px 22px', borderRadius: 12, background: SJ.blueSoft,
                  color: SJ.blueDark, border: `1px solid ${SJ.blueRing}`,
                  fontSize: 14.5, fontWeight: 700, textDecoration: 'none',
                }}>View email history</a>
              </div>
            </div>
            <div style={{
              background: 'linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%)',
              border: `1px solid ${SJ.blueRing}`, borderRadius: 20, padding: 22,
            }}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: SJ.blueDark, marginBottom: 14 }}>
                What you'll get
              </div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '8px 12px', borderRadius: 999,
                background: SJ.greenBg, color: SJ.green,
                fontSize: 13, fontWeight: 700, marginBottom: 16,
              }}>● Alerts on · Daily</span>
              <p style={{ color: '#4b5563', fontSize: 13.5, marginBottom: 10, lineHeight: 1.55 }}>
                Job alerts are currently active for <strong style={{ color: SJ.ink }}>you@example.com</strong>.
              </p>
              <p style={{ color: '#4b5563', fontSize: 13.5, marginBottom: 0, lineHeight: 1.55 }}>
                Last email sent <strong>3 hours ago</strong>. Next batch tomorrow at 09:00.
              </p>
            </div>
          </div>

          {/* Resume builder promo */}
          <div style={{
            background: 'linear-gradient(135deg, #f0f9ff 0%, #faf5ff 100%)',
            border: '1px solid #e0e7ff', borderRadius: 24, padding: 28,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <div>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '6px 12px', borderRadius: 999,
                background: SJ.purpleBg, color: '#6d28d9',
                fontSize: 12, fontWeight: 700, marginBottom: 14, letterSpacing: '0.04em', textTransform: 'uppercase',
              }}>✨ Hosted Resume Builder</span>
              <h2 style={{ fontSize: 22, lineHeight: 1.3, color: SJ.ink, marginBottom: 10, fontWeight: 700 }}>
                Create a hosted resume you can share with recruiters
              </h2>
              <p style={{ fontSize: 14, color: '#4b5563', lineHeight: 1.55, marginBottom: 0 }}>
                One clean link. Multiple versions. Mobile-friendly. Private until you publish.
              </p>
            </div>
            {/* Mock resume preview */}
            <div style={{
              marginTop: 18,
              background: '#fff', borderRadius: 14, padding: 16,
              boxShadow: '0 8px 24px rgba(124,58,237,0.10)',
              border: '1px solid #ede9fe',
            }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: '50%', background: `linear-gradient(135deg, ${SJ.purple}, ${SJ.blue})` }} />
                <div style={{ flex: 1 }}>
                  <div style={{ height: 8, width: '60%', background: SJ.line, borderRadius: 4, marginBottom: 5 }} />
                  <div style={{ height: 6, width: '40%', background: '#f3f4f6', borderRadius: 4 }} />
                </div>
              </div>
              {[100, 90, 75, 95, 60].map((w, i) => (
                <div key={i} style={{ height: 5, width: `${w}%`, background: i === 0 ? '#e0e7ff' : '#f3f4f6', borderRadius: 3, marginBottom: 7 }} />
              ))}
              <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
                <a style={{
                  flex: 1, textAlign: 'center', padding: '10px 14px', borderRadius: 10,
                  background: SJ.purple, color: '#fff', fontSize: 13, fontWeight: 700, textDecoration: 'none',
                }}>Create resume</a>
              </div>
            </div>
          </div>
        </section>

        {/* Stats */}
        <section style={{ display: 'flex', justifyContent: 'center', gap: 80, margin: '64px 0', flexWrap: 'wrap' }}>
          {[
            { n: '12,480+', l: 'Active Jobs' },
            { n: '780+', l: 'Companies' },
            { n: '100%', l: 'Remote Friendly' },
            { n: '12', l: 'Regions Worldwide' },
          ].map((s) => (
            <div key={s.l} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 44, fontWeight: 800, color: SJ.blue, marginBottom: 6, letterSpacing: '-0.02em' }}>{s.n}</div>
              <div style={{ color: SJ.muted, fontSize: 15 }}>{s.l}</div>
            </div>
          ))}
        </section>

        {/* Features */}
        <section style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, margin: '24px 0 64px' }}>
          {[
            { icon: '🚀', title: 'Latest Jobs', desc: 'Fresh opportunities from top companies, updated daily from official APIs.' },
            { icon: '🎯', title: 'Smart Filtering', desc: "Find exactly what you're looking for with city, keyword and remote filters." },
            { icon: '🌍', title: 'Remote & On-site', desc: 'Browse remote positions or find opportunities in your city.' },
          ].map((f) => (
            <div key={f.title} style={{
              textAlign: 'center', padding: 32, background: SJ.page,
              borderRadius: 16, border: `1px solid ${SJ.line}`,
            }}>
              <div style={{ fontSize: 44, marginBottom: 12 }}>{f.icon}</div>
              <h3 style={{ fontSize: 20, fontWeight: 700, marginBottom: 10, color: SJ.ink2 }}>{f.title}</h3>
              <p style={{ color: SJ.muted, fontSize: 14.5, lineHeight: 1.6, margin: 0 }}>{f.desc}</p>
            </div>
          ))}
        </section>

        {/* Popular searches */}
        <section style={{ margin: '40px 0', textAlign: 'center' }}>
          <h2 style={{ fontSize: 28, fontWeight: 700, marginBottom: 24, color: SJ.ink2 }}>Popular Searches</h2>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center', maxWidth: 900, margin: '0 auto' }}>
            {[
              'Python Developer', 'React Engineer', 'DevOps', 'Data Scientist',
              'Frontend', 'Backend', 'Remote Jobs', 'London Jobs',
              'Manchester Jobs', 'Edinburgh Jobs',
            ].map((t) => (
              <a key={t} style={{
                padding: '11px 22px', background: '#fff',
                border: `2px solid ${SJ.line}`, borderRadius: 10,
                color: SJ.text, textDecoration: 'none', fontWeight: 500, fontSize: 14,
              }}>{t}</a>
            ))}
          </div>
        </section>

        {/* World map section */}
        <section style={{ margin: '64px 0', textAlign: 'center' }}>
          <h2 style={{ fontSize: 28, fontWeight: 700, marginBottom: 8, color: SJ.ink2 }}>
            Find jobs across the world
          </h2>
          <p style={{ color: SJ.muted, marginBottom: 28, fontSize: 15 }}>
            ScrollJob runs in 12 regions. Click a country to browse local listings.
          </p>
          <WorldMap />
        </section>
      </main>

      <Footer />
    </div>
  );
}

function WorldMap() {
  const active = [
    { id: 'US', x: 180, y: 170 }, { id: 'UK', x: 490, y: 125 },
    { id: 'NL', x: 513, y: 123 }, { id: 'BE', x: 510, y: 145 },
    { id: 'DE', x: 535, y: 138 }, { id: 'FR', x: 500, y: 165 },
    { id: 'PL', x: 565, y: 135 }, { id: 'ES', x: 478, y: 180 },
    { id: 'IT', x: 530, y: 170 }, { id: 'BG', x: 580, y: 165 },
    { id: 'RS', x: 565, y: 160 }, { id: 'IN', x: 700, y: 220 },
  ];
  return (
    <div style={{ background: '#fff', borderRadius: 24, border: `1px solid ${SJ.line}`, padding: 24, overflow: 'hidden' }}>
      <svg viewBox="0 0 1000 520" style={{ width: '100%', height: 'auto', display: 'block' }} preserveAspectRatio="xMidYMid meet">
        <rect width="1000" height="520" fill="#f1f5f9" rx="14" />
        <g fill="#e2e8f0">
          <path d="M80 110 Q90 80 140 80 L280 82 Q320 82 322 120 L322 218 Q322 256 280 256 L210 268 Q140 270 110 240 Q80 200 80 110 Z" />
          <path d="M240 280 Q280 282 300 322 L320 422 Q282 460 244 442 L222 348 Q220 300 240 280 Z" />
          <path d="M448 96 Q500 90 560 102 Q584 130 562 168 L500 178 Q472 168 460 142 Q446 116 448 96 Z" />
          <path d="M478 200 Q540 198 588 214 Q608 254 588 312 L548 400 Q508 422 480 386 L468 304 Q466 242 478 200 Z" />
          <path d="M580 84 L860 84 Q890 118 880 196 L808 240 Q708 250 626 222 L584 184 Q566 130 580 84 Z" />
          <path d="M770 350 L860 354 Q888 380 876 412 L800 422 Q762 414 770 350 Z" />
          <path d="M656 220 L702 222 L696 286 L668 288 Z" />
        </g>
        <g fill="#cbd5e1">
          <circle cx="220" cy="140" r="5" /><circle cx="270" cy="350" r="5" />
          <circle cx="780" cy="120" r="5" /><circle cx="830" cy="170" r="5" />
          <circle cx="820" cy="385" r="5" /><circle cx="510" cy="380" r="5" />
        </g>
        {active.map((r) => (
          <g key={r.id}>
            <circle cx={r.x} cy={r.y} r="15" fill={SJ.blue} stroke="#fff" strokeWidth="2" />
            <text x={r.x} y={r.y + 4} textAnchor="middle" fontSize="10" fontWeight="800" fill="#fff" fontFamily={SJ.font}>
              {r.id}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

window.HomeScreen = HomeScreen;