const MARQUEE = [
  'Custom Design','Mobile Apps','Headless CMS','Multilingual',
  'RTL Support','Shopify','Next.js','iOS & Android',
  'SEO','Figma to Code','WordPress','E-Commerce',
];

const SERVICES_BRIEF = [
  { icon: '◇', title: 'Restaurant & Hospitality', color: 'var(--accent)' },
  { icon: '◈', title: 'Retail & E-Commerce',      color: 'var(--mint)'   },
  { icon: '△', title: 'Professional Services',    color: 'var(--gold)'   },
  { icon: '▣', title: 'Institutions & Education', color: 'var(--accent)' },
  { icon: '◎', title: 'SaaS & Startups',          color: 'var(--mint)'   },
  { icon: '✦', title: 'Custom Platforms',         color: 'var(--gold)'   },
];

const HomePage = ({ navigate }) => (
  <>
    {/* ── HERO ── */}
    <section style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center',
      position: 'relative', overflow: 'hidden', paddingBottom: 60,
    }}>
      {/* Grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(rgba(123,104,238,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(123,104,238,0.045) 1px,transparent 1px)',
        backgroundSize: '64px 64px',
        animation: 'gridPulse 12s ease-in-out infinite',
      }} />
      {/* Orbs */}
      <div style={{
        position: 'absolute', width: 700, height: 700, borderRadius: '50%',
        background: 'radial-gradient(circle,rgba(123,104,238,0.1) 0%,transparent 70%)',
        top: -220, right: -150, filter: 'blur(50px)',
        animation: 'orbFloat 16s ease-in-out infinite',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle,rgba(0,205,160,0.07) 0%,transparent 70%)',
        bottom: -100, left: -80, filter: 'blur(70px)',
        animation: 'orbFloat 20s ease-in-out infinite reverse',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        {/* Badge */}
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 16px', background: 'var(--card)',
          border: '1px solid var(--border)', borderRadius: 100,
          fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--mint)',
          marginBottom: 40, animation: 'fadeUp 0.7s ease 0.1s both',
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: 'var(--mint)', animation: 'blink 2s ease infinite',
          }} />
          Based in Dubai · Serving the world
        </div>

        {/* Headline */}
        <h1 className="display-xl" style={{ marginBottom: 28, animation: 'fadeUp 0.7s ease 0.25s both' }}>
          We build websites<br />
          and apps that<br />
          <em className="grad" style={{ fontStyle: 'italic' }}>move the world.</em>
        </h1>

        <p className="body-lg" style={{
          maxWidth: 480, marginBottom: 44,
          animation: 'fadeUp 0.7s ease 0.4s both',
        }}>
          From Dubai to every corner of the globe — VELA crafts websites and
          mobile apps that turn visitors into customers, wherever your business lives.
        </p>

        <div style={{
          display: 'flex', gap: 14, flexWrap: 'wrap',
          animation: 'fadeUp 0.7s ease 0.52s both',
        }}>
          <button className="btn btn-primary btn-lg" onClick={() => navigate('contact')}>
            Start a Project →
          </button>
          <button className="btn btn-ghost btn-lg" onClick={() => navigate('process')}>
            See How We Work
          </button>
        </div>

        {/* Stats */}
        <div style={{
          display: 'flex', gap: 48, marginTop: 72,
          paddingTop: 40, borderTop: '1px solid var(--border)',
          flexWrap: 'wrap', animation: 'fadeUp 0.7s ease 0.65s both',
        }}>
          {[
            { h: 'New Studio.',        s: 'Fresh perspective, zero legacy baggage' },
            { h: 'World-Class Craft.', s: 'Senior engineers, not juniors learning on your dime' },
            { h: 'Dubai HQ.',          s: 'Global timezone coverage, competitive rates' },
          ].map(({ h, s }) => (
            <div key={h}>
              <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 500, marginBottom: 5 }}>{h}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)' }}>{s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ── MARQUEE ── */}
    <div className="marquee-wrap">
      <div className="marquee-track">
        {[...MARQUEE, ...MARQUEE].map((item, i) => (
          <div key={i} className="marquee-item">
            <span className="marquee-dot" />{item}
          </div>
        ))}
      </div>
    </div>

    {/* ── SERVICES SNAPSHOT ── */}
    <section className="section">
      <div className="container">
        <div className="reveal">
          <span className="label">What We Do</span>
          <h2 className="display-lg" style={{ marginBottom: 16 }}>
            One studio.<br />Every kind of digital presence.
          </h2>
          <p className="body-lg" style={{ maxWidth: 480, marginBottom: 48 }}>
            Custom-built from scratch for any industry. No templates, no shortcuts.
          </p>
        </div>

        <div className="reveal d1" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16,
        }}>
          {SERVICES_BRIEF.map(({ icon, title, color }) => (
            <div key={title} className="card"
              style={{ padding: '28px 26px', cursor: 'pointer' }}
              onClick={() => navigate('services')}>
              <div style={{ fontSize: 22, color, marginBottom: 14 }}>{icon}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 21, fontWeight: 500 }}>{title}</div>
            </div>
          ))}
        </div>

        <div className="reveal d2" style={{ marginTop: 28 }}>
          <button className="btn btn-ghost" onClick={() => navigate('services')}>
            View All Services →
          </button>
        </div>
      </div>
    </section>

    {/* ── GLOBE ── */}
    <section className="section" style={{ background: 'var(--surface)', textAlign: 'center' }}>
      <div className="container">
        <div className="reveal">
          <span className="label">Global Reach</span>
          <h2 className="display-lg" style={{ marginBottom: 16 }}>
            Every timezone.<br /><em style={{ fontStyle: 'italic' }}>Every language.</em>
          </h2>
          <p className="body-lg" style={{ maxWidth: 500, margin: '0 auto 52px' }}>
            Dubai sits at the crossroads of Europe, Asia, and Africa.
            We understand global markets natively.
          </p>
        </div>
        <div className="reveal d1" style={{ display: 'flex', justifyContent: 'center' }}>
          <window.Globe size={460} />
        </div>
        <p className="reveal d2" style={{
          marginTop: 36, fontSize: 14, color: 'var(--muted)',
          maxWidth: 460, margin: '36px auto 0', lineHeight: 1.8,
        }}>
          The purple dot is us. The rest are your future customers.
        </p>
      </div>
    </section>

    {/* ── WHY ── */}
    <section className="section">
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="label">Why Vela</span>
          <h2 className="display-lg">New studio. Senior craft.</h2>
        </div>
        <div className="reveal d1" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 20,
        }}>
          {[
            { icon: '⚡', title: 'Founder-Level Attention', body: 'The people who pitch it are the ones who build it. No handoffs to juniors.' },
            { icon: '⊘', title: 'No Templates. Ever.', body: 'Every site designed from scratch. Your business isn\'t generic — your site shouldn\'t be.' },
            { icon: '⊕', title: 'You Own Everything', body: 'Your code, your design, your domain. No lock-in, no hostage fees. Walk away anytime.' },
          ].map(({ icon, title, body }) => (
            <div key={title} className="card" style={{ padding: '36px 28px', textAlign: 'center' }}>
              <div style={{ fontSize: 26, marginBottom: 16, color: 'var(--accent)' }}>{icon}</div>
              <h4 style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 500, marginBottom: 10 }}>{title}</h4>
              <p className="body-md">{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ── FOUNDING CTA ── */}
    <section className="section-sm">
      <div className="container">
        <div className="reveal" style={{
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 24,
          padding: '80px 60px',
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(135deg,rgba(123,104,238,0.07),rgba(0,205,160,0.03))',
          }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <span className="label">Limited Availability</span>
            <h2 className="display-lg" style={{ marginBottom: 16 }}>
              Taking on <em className="grad" style={{ fontStyle: 'italic' }}>3 founding clients</em><br />this quarter.
            </h2>
            <p className="body-lg" style={{ maxWidth: 440, margin: '0 auto 36px' }}>
              Founder-level attention, launch pricing, priority timeline. Be one of them.
            </p>
            <button className="btn btn-primary btn-lg" onClick={() => navigate('contact')}>
              Start Your Project →
            </button>
          </div>
        </div>
      </div>
    </section>
  </>
);

window.HomePage = HomePage;