/* global React, GlassCard, Btn */
const { useState, useEffect } = React;

// ============ Hero ============
function Hero({ onCta }) {
  return (
    <section style={{ position: 'relative', paddingTop: 128, paddingBottom: 80, padding: '128px 32px 80px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', gap: 64, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 340, zIndex: 10 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 999, background: 'rgba(255,81,250,0.12)', border: '1px solid rgba(255,81,250,0.3)', color: '#FF51FA', fontSize: 11, fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 24 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#FF51FA', boxShadow: '0 0 8px #FF51FA' }} />
            Available for Projects
          </span>
          <h1 style={{ fontSize: 'clamp(48px, 8vw, 96px)', fontWeight: 900, lineHeight: 0.9, letterSpacing: '-0.04em', margin: '0 0 32px', color: '#f1f3fc' }}>
            CLAWDWORKS:<br />
            <span style={{ background: 'linear-gradient(to right,#FF51FA,#00F0FF)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>AI DEVELOPMENT &amp; AUTOMATION</span>
          </h1>
          <p style={{ color: '#a8abb3', fontSize: 20, maxWidth: 560, marginBottom: 40, lineHeight: 1.6, fontFamily: 'Inter, sans-serif' }}>
            Full-stack web apps, AI integrations, and automation systems that work while you sleep. From concept to production in days, not months.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <Btn variant="primary" icon="bolt" onClick={() => onCta && onCta('project')}>Start a Project</Btn>
            <Btn variant="outline" onClick={() => onCta && onCta('work')}>See Our Work</Btn>
          </div>
        </div>
        <HeroMascot />
      </div>
    </section>
  );
}

function HeroMascot() {
  return (
    <div style={{ flex: 1, minWidth: 340, position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 520 }}>
      {/* ambient orbs */}
      <div style={{ position: 'absolute', top: 40, right: 40, width: 320, height: 320, background: 'rgba(255,81,250,0.28)', borderRadius: '50%', filter: 'blur(110px)' }} />
      <div style={{ position: 'absolute', bottom: 20, left: 20, width: 280, height: 280, background: 'rgba(0,240,255,0.18)', borderRadius: '50%', filter: 'blur(110px)' }} />
      {/* rotating ring */}
      <div style={{ position: 'absolute', width: 460, height: 460, border: '1px dashed rgba(255,81,250,0.25)', borderRadius: '50%', animation: 'cw-spin 40s linear infinite' }} />
      <div style={{ position: 'absolute', width: 360, height: 360, border: '1px dashed rgba(0,240,255,0.2)', borderRadius: '50%', animation: 'cw-spin-rev 50s linear infinite' }} />
      {/* mascot */}
      <img src="assets/mascot-clawdbot.jpg" alt="ClawdBot" style={{ position: 'relative', width: '100%', maxWidth: 420, height: 'auto', borderRadius: 24, boxShadow: '0 0 80px rgba(255,81,250,0.35), 0 0 40px rgba(0,240,255,0.2)', zIndex: 1 }} />
      {/* floating stat chip */}
      <div style={{ position: 'absolute', bottom: 40, left: 0, padding: '10px 14px', background: 'rgba(10,14,20,0.75)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,81,250,0.35)', borderRadius: 10, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 11, color: '#f1f3fc', boxShadow: '0 0 20px rgba(255,81,250,0.25)', zIndex: 2 }}>
        <div style={{ color: '#686880', fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 2 }}>Systems Online</div>
        <div><span style={{ color: '#FF51FA' }}>●</span> 22 tasks scheduled &nbsp; <span style={{ color: '#00F0FF' }}>●</span> 6 deploys today</div>
      </div>
    </div>
  );
}

// ============ Services ============
function Services() {
  const items = [
    { span: 8, icon: 'web', glow: 'magenta', title: 'AI-Powered Web Apps', desc: 'Full-stack applications with AI features built in. Recipe platforms, deal alert systems, SaaS tools. Next.js, React, TypeScript, Supabase, Stripe.', chips: ['NEXT.JS', 'REACT', 'AI'] },
    { span: 4, icon: 'smart_toy', glow: 'cyan', title: 'Automation & Bots', desc: 'AI phone receptionists, data scrapers, monitoring systems, Telegram/Discord bots. Set it and forget it.', bar: 0.75 },
    { span: 4, icon: 'phone_in_talk', glow: 'magenta', title: 'AI Phone Service', desc: '24/7 AI receptionist that answers calls, books appointments, and texts you summaries. Sounds like a real person.' },
    { span: 8, icon: null, glow: 'magenta', title: 'Landing Pages & Websites', desc: 'Beautiful, responsive sites delivered in 24-48 hours. From single landing pages to full business sites.', rightIcons: true }
  ];
  return (
    <section id="services" style={{ padding: '96px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 64 }}>
          <h2 style={{ fontSize: 40, fontWeight: 900, letterSpacing: '-0.03em', margin: '0 0 16px' }}>WHAT WE BUILD</h2>
          <div style={{ height: 4, width: 96, background: 'linear-gradient(to right,#FF51FA,transparent)' }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          {items.map((s, i) => (
            <GlassCard key={i} glow={s.glow} style={{ gridColumn: `span ${s.span}`, padding: 40, position: 'relative', overflow: 'hidden', cursor: 'pointer', display: s.rightIcons ? 'flex' : 'block', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ maxWidth: s.rightIcons ? 320 : 'none' }}>
                {s.icon && <span className="material-symbols-outlined" style={{ fontSize: 40, color: s.glow === 'magenta' ? '#FF51FA' : '#00F0FF', marginBottom: 24, display: 'block' }}>{s.icon}</span>}
                <h3 style={{ fontSize: s.span === 8 && !s.rightIcons ? 30 : 24, fontWeight: 700, margin: '0 0 16px', color: '#f1f3fc' }}>{s.title}</h3>
                <p style={{ color: '#a8abb3', fontSize: s.span === 8 && !s.rightIcons ? 16 : 14, margin: 0, marginBottom: s.chips || s.bar ? 24 : 0, maxWidth: 420, fontFamily: 'Inter, sans-serif', lineHeight: 1.6 }}>{s.desc}</p>
                {s.chips && (
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {s.chips.map(c => <span key={c} style={{ padding: '4px 12px', borderRadius: 6, background: '#1a1f28', fontSize: 11, fontFamily: 'ui-monospace, Menlo, monospace', color: '#686880', letterSpacing: '0.06em' }}>{c}</span>)}
                  </div>
                )}
                {s.bar != null && (
                  <div style={{ height: 8, width: '100%', background: '#1a1f28', borderRadius: 999, overflow: 'hidden' }}>
                    <div style={{ height: '100%', background: '#FF51FA', width: `${s.bar * 100}%`, boxShadow: '0 0 10px #FF51FA' }} />
                  </div>
                )}
              </div>
              {s.rightIcons && (
                <div style={{ display: 'flex', gap: -16 }}>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(0,240,255,0.2)', border: '2px solid rgba(0,240,255,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
                    <span className="material-symbols-outlined" style={{ color: '#00F0FF' }}>language</span>
                  </div>
                  <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(255,81,250,0.2)', border: '2px solid rgba(255,81,250,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: -16, backdropFilter: 'blur(4px)' }}>
                    <span className="material-symbols-outlined" style={{ color: '#FF51FA' }}>devices</span>
                  </div>
                </div>
              )}
            </GlassCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Portfolio ============
function Portfolio({ onContact }) {
  const items = [
    { emoji: '🍳', glow: 'magenta', title: 'ReelRecipes', label: 'AI Meal Prep Platform', desc: 'AI meal prep app. Import TikTok recipes, scan food for calories, scan fridge for recipe ideas. Live on iOS App Store.', chips: ['NEXT.JS', 'SUPABASE', 'AI VISION'] },
    { emoji: '🔥', glow: 'cyan', title: 'FireSnipe', label: 'Deal Alert Platform', desc: 'Real-time deal alert platform for resellers. TCG restocks, liquidation pallet monitoring, eBay arbitrage.', chips: ['REACT', 'SCRAPERS', 'ALERTS'], offset: true },
    { emoji: '📞', glow: 'magenta', title: 'AI Receptionist', label: 'AI Phone System', desc: '24/7 AI-powered business phone system. Natural conversation, appointment booking, emergency dispatch.', soon: true }
  ];
  return (
    <section id="portfolio" style={{ padding: '96px 32px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 560 }}>
            <h2 style={{ fontSize: 56, fontWeight: 900, letterSpacing: '-0.04em', margin: '0 0 16px' }}>OUR WORK</h2>
            <p style={{ color: '#a8abb3', fontSize: 18, fontFamily: 'Inter, sans-serif' }}>Real products, real users, running in production. Every project is a live system generating value.</p>
          </div>
          <a href="#contact" onClick={(e) => { e.preventDefault(); onContact && onContact(); }}
            style={{ color: '#FF51FA', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8, border: '1px solid #FF51FA', padding: '10px 22px', borderRadius: 999, textDecoration: 'none', boxShadow: '0 0 20px rgba(255,81,250,0.25)' }}>
            Start Your Project <span className="material-symbols-outlined">arrow_forward</span>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 32 }}>
          {items.map((p, i) => (
            <div key={i} style={{ marginTop: p.offset ? 48 : 0 }}>
              <GlassCard glow={p.glow} style={{ aspectRatio: '1', padding: 40, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', borderRadius: 20, textAlign: 'center' }}>
                <div style={{ position: 'absolute', inset: 0, background: p.glow === 'magenta' ? 'linear-gradient(to top right, rgba(255,81,250,0.2), transparent)' : 'linear-gradient(to top right, rgba(0,240,255,0.2), transparent)', opacity: 0.6 }} />
                <div style={{ position: 'relative', zIndex: 1 }}>
                  <div style={{ width: 80, height: 80, borderRadius: 20, background: p.glow === 'magenta' ? 'rgba(255,81,250,0.2)' : 'rgba(0,240,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 40, margin: '0 auto 16px' }}>{p.emoji}</div>
                  <h4 style={{ fontWeight: 700, fontSize: 24, margin: '0 0 12px' }}>{p.title}</h4>
                  <p style={{ color: '#a8abb3', fontSize: 13, lineHeight: 1.6, margin: '0 0 16px', fontFamily: 'Inter, sans-serif' }}>{p.desc}</p>
                  {p.soon ? (
                    <span style={{ padding: '4px 14px', borderRadius: 999, background: 'rgba(255,81,250,0.2)', color: '#FF51FA', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Coming Soon</span>
                  ) : (
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
                      {p.chips.map(c => <span key={c} style={{ padding: '3px 8px', borderRadius: 4, background: p.glow === 'magenta' ? 'rgba(255,81,250,0.1)' : 'rgba(0,240,255,0.1)', color: p.glow === 'magenta' ? '#FF51FA' : '#00F0FF', fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 10 }}>{c}</span>)}
                    </div>
                  )}
                </div>
              </GlassCard>
              <div style={{ marginTop: 24 }}>
                <h4 style={{ fontWeight: 700, fontSize: 20, margin: '0 0 4px', letterSpacing: '0.02em', textTransform: 'uppercase' }}>{p.title.toUpperCase()}</h4>
                <p style={{ fontSize: 11, color: '#686880', letterSpacing: '0.15em', textTransform: 'uppercase', margin: 0 }}>{p.label}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CTA block ============
function CTA({ onContact }) {
  return (
    <section style={{ padding: '128px 32px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)', width: 480, height: 480, background: 'rgba(255,81,250,0.18)', borderRadius: '50%', filter: 'blur(120px)' }} />
      <div style={{ maxWidth: 768, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <h2 style={{ fontSize: 'clamp(40px, 7vw, 72px)', fontWeight: 900, marginBottom: 40, letterSpacing: '-0.04em', color: '#f1f3fc' }}>LET'S BUILD SOMETHING</h2>
        <p style={{ color: '#a8abb3', fontSize: 20, marginBottom: 48, fontFamily: 'Inter, sans-serif' }}>The best time to automate was yesterday. The second best time is right now. Tell us about your project.</p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
          <Btn variant="primary" onClick={() => onContact && onContact()}>Start a Project</Btn>
          <Btn variant="outline">View Portfolio</Btn>
        </div>
      </div>
    </section>
  );
}

// ============ Contact ============
function Contact() {
  const [form, setForm] = useState({ name: '', email: '', project: '', message: '' });
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section id="contact" style={{ padding: '96px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ marginBottom: 64 }}>
          <h2 style={{ fontSize: 40, fontWeight: 900, letterSpacing: '-0.03em', margin: '0 0 16px' }}>GET IN TOUCH</h2>
          <div style={{ height: 4, width: 96, background: 'linear-gradient(to right,#FF51FA,#00F0FF,transparent)' }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
          <div>
            <h3 style={{ fontSize: 24, fontWeight: 700, marginBottom: 16 }}>Let's build something great.</h3>
            <p style={{ color: '#a8abb3', marginBottom: 32, lineHeight: 1.6, fontFamily: 'Inter, sans-serif' }}>Whether you need a quick automation or a full AI-powered application, we'd love to hear about your project. Drop us a message and we'll respond within 24 hours.</p>
            {[
              { icon: 'mail', label: 'Email', val: 'kevdogg102396@gmail.com', glow: 'magenta' },
              { icon: 'code', label: 'GitHub', val: 'github.com/kevdogg102396-afk', glow: 'magenta' },
              { icon: 'rocket_launch', label: 'Live Product', val: 'reelrecipes.recipes', glow: 'cyan' }
            ].map(c => (
              <GlassCard key={c.label} glow={c.glow} style={{ padding: 16, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 16, borderRadius: 12 }}>
                <span className="material-symbols-outlined" style={{ color: c.glow === 'cyan' ? '#00F0FF' : '#FF51FA', fontSize: 24 }}>{c.icon}</span>
                <div>
                  <div style={{ fontSize: 11, color: '#686880', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{c.label}</div>
                  <div style={{ color: '#f1f3fc' }}>{c.val}</div>
                </div>
              </GlassCard>
            ))}
          </div>
          <GlassCard style={{ padding: 32, borderRadius: 12 }} hover={false}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '40px 0' }}>
                <span className="material-symbols-outlined" style={{ fontSize: 56, color: '#FF51FA' }}>check_circle</span>
                <h3 style={{ color: '#FF51FA', marginTop: 16 }}>Message sent!</h3>
                <p style={{ color: '#a8abb3', fontFamily: 'Inter, sans-serif' }}>We'll get back to you within 24 hours.</p>
                <button onClick={() => { setSent(false); setForm({ name: '', email: '', project: '', message: '' }); }}
                  style={{ marginTop: 16, background: 'none', border: '1px solid #44484f', color: '#f1f3fc', padding: '10px 20px', borderRadius: 999, cursor: 'pointer' }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={onSubmit}>
                {[['name', 'Name', 'Your name', 'input'], ['email', 'Email', 'you@company.com', 'input']].map(([k, lbl, ph]) => (
                  <Field key={k} label={lbl} value={form[k]} onChange={v => setForm(f => ({ ...f, [k]: v }))} placeholder={ph} />
                ))}
                <div style={{ marginBottom: 20 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 8, color: '#a8abb3' }}>Project Type</label>
                  <select value={form.project} onChange={e => setForm(f => ({ ...f, project: e.target.value }))}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '12px 16px', background: 'rgba(10,14,20,0.8)', border: '1px solid rgba(68,72,79,0.3)', borderRadius: 8, color: '#f1f3fc', fontFamily: 'inherit', fontSize: 15 }}>
                    <option value="">Select a category...</option>
                    <option value="ai-web-app">AI-Powered Web App</option>
                    <option value="automation">Automation & Bots</option>
                    <option value="ai-phone">AI Phone Service</option>
                    <option value="landing-page">Landing Page / Website</option>
                    <option value="other">Something Else</option>
                  </select>
                </div>
                <div style={{ marginBottom: 20 }}>
                  <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 8, color: '#a8abb3' }}>Tell us about your project</label>
                  <textarea value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))}
                    placeholder="What problem are you trying to solve?" rows={4}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '12px 16px', background: 'rgba(10,14,20,0.8)', border: '1px solid rgba(68,72,79,0.3)', borderRadius: 8, color: '#f1f3fc', fontFamily: 'Inter, sans-serif', fontSize: 15, resize: 'vertical' }} />
                </div>
                <button type="submit" style={{ width: '100%', padding: '16px', background: 'linear-gradient(to right,#FF51FA,#00F0FF)', color: '#0a0e14', border: 'none', borderRadius: 999, fontWeight: 700, fontSize: 17, cursor: 'pointer', transition: 'box-shadow 300ms' }}
                  onMouseOver={e => e.currentTarget.style.boxShadow = '0 0 30px rgba(255,81,250,0.5)'}
                  onMouseOut={e => e.currentTarget.style.boxShadow = 'none'}>
                  Send Message
                </button>
              </form>
            )}
          </GlassCard>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder }) {
  const [f, setF] = useState(false);
  return (
    <div style={{ marginBottom: 20 }}>
      <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 8, color: '#a8abb3' }}>{label}</label>
      <input value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
        onFocus={() => setF(true)} onBlur={() => setF(false)}
        style={{ width: '100%', boxSizing: 'border-box', padding: '12px 16px', background: 'rgba(10,14,20,0.8)', border: `1px solid ${f ? '#FF51FA' : 'rgba(68,72,79,0.3)'}`, borderRadius: 8, color: '#f1f3fc', fontFamily: 'Inter, sans-serif', fontSize: 15, outline: 'none', boxShadow: f ? '0 0 0 3px rgba(255,81,250,0.18)' : 'none', transition: 'all 200ms' }} />
    </div>
  );
}

// ============ Footer ============
function Footer() {
  return (
    <footer style={{ background: 'rgba(15,20,26,0.9)', backdropFilter: 'blur(12px)', borderTop: '1px solid rgba(255,255,255,0.05)', position: 'relative', zIndex: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '64px 48px', maxWidth: 1280, margin: '0 auto', flexWrap: 'wrap', gap: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="assets/logo-raccoon.jpg" alt="ClawdWorks" style={{ width: 36, height: 36, borderRadius: 8, objectFit: 'cover' }} />
          <div>
            <div style={{ fontSize: 18, fontWeight: 800, color: '#FF51FA', letterSpacing: '-0.04em' }}>CLAWDWORKS</div>
            <p style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: '#a8abb3', margin: '4px 0 0' }}>© 2026 · AI Development & Automation</p>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 32, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
          {['Portfolio', 'Services', 'Contact', 'GitHub'].map(x => <a key={x} style={{ color: '#a8abb3', textDecoration: 'none' }}>{x}</a>)}
        </div>
        <div style={{ display: 'flex', gap: 16 }}>
          <span className="material-symbols-outlined" style={{ color: '#686880', cursor: 'pointer' }}>code</span>
          <span className="material-symbols-outlined" style={{ color: '#686880', cursor: 'pointer' }}>mail</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Services, Portfolio, CTA, Contact, Footer });