// ─── MOBILE HOOK ─────────────────────────────────────────────────────────────
function useIsMobile(bp) {
  bp = bp || 768;
  const [mobile, setMobile] = React.useState(window.innerWidth <= bp);
  React.useEffect(function() {
    function fn() { setMobile(window.innerWidth <= bp); }
    window.addEventListener('resize', fn, { passive: true });
    return function() { window.removeEventListener('resize', fn); };
  }, []);
  return mobile;
}

// ─── SERVICES ────────────────────────────────────────────────────────────────
const SERVICES = [
  { icon: "✦", title: "Brand Identity",    desc: "Logos, color systems, and typography that make your brand unmistakable." },
  { icon: "◈", title: "Web Design",        desc: "Pixel-perfect, responsive interfaces crafted to convert visitors into clients." },
  { icon: "⬡", title: "Development",       desc: "Clean, performant code built on modern stacks — fast, scalable, secure." },
  { icon: "◎", title: "UI / UX Design",    desc: "User flows and interaction design rooted in research and tested in the real world." },
  { icon: "⬢", title: "E-Commerce",        desc: "End-to-end storefronts engineered to drive revenue and delight customers." },
  { icon: "◇", title: "SEO & Performance", desc: "We make sure the world can find you — and that they stay once they do." },
];

function ServiceCard({ service: s }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      className="service-card"
      style={{
        ...glassCardStyle,
        transition: 'transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease',
        transform: hov ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: hov
          ? '0 20px 48px rgba(198,167,94,0.14), 0 4px 16px rgba(0,0,0,0.4)'
          : '0 4px 24px rgba(0,0,0,0.3)',
        borderColor: hov ? 'rgba(198,167,94,0.35)' : 'rgba(255,255,255,0.06)',
      }}
    >
      <span style={{
        fontSize: '1.6rem', marginBottom: '1.25rem',
        display: 'inline-block', color: 'var(--purple)',
        transition: 'transform 0.35s ease',
        transform: hov ? 'scale(1.2) rotate(10deg)' : 'scale(1) rotate(0deg)',
        transformOrigin: 'left center',
      }}>{s.icon}</span>
      <h3 style={{ fontSize:'1.1rem', fontWeight:600, marginBottom:'0.5rem', color:'var(--text)', letterSpacing:'-0.01em' }}>{s.title}</h3>
      <p className="word-fade" style={{ color:'var(--muted)', fontSize:'0.9rem', lineHeight:1.72 }}>{s.desc}</p>
    </div>
  );
}

function ServicesSection({ layout }) {
  return (
    <section id="services" style={sectionStyle}>
      <SectionLabel>What We Do</SectionLabel>
      <h2 style={headingStyle}>Built for brands<br /><em style={{color:'var(--purple)'}}>that mean business.</em></h2>
      <p className="reveal-text" style={subStyle}>From strategy to launch, we handle every pixel and every line of code.</p>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(min(100%,280px),1fr))', gap:'1.5rem', marginTop:'3.5rem' }}>
        {SERVICES.map((s, i) => <ServiceCard key={i} service={s} />)}
      </div>
    </section>
  );
}

// ─── PORTFOLIO ────────────────────────────────────────────────────────────────
const PROJECTS = [
  { label:'E-Commerce',  title:'Velour Atelier',    tag:'Fashion',    aspect:'tall' },
  { label:'SaaS',        title:'Orbital Analytics', tag:'Tech',       aspect:'wide' },
  { label:'Hospitality', title:'Aurum Retreats',    tag:'Luxury',     aspect:'wide' },
  { label:'Finance',     title:'Meridian Wealth',   tag:'Fintech',    aspect:'tall' },
  { label:'Health',      title:'Lumis Wellness',    tag:'Healthcare', aspect:'tall' },
  { label:'Agency',      title:'Apex Creative Co.', tag:'B2B',        aspect:'wide' },
];
const PALETTE = ['#1a0e2e','#0e1a2e','#2e1a0e','#0e2e1a','#2e0e1a','#1a2e0e'];

function PortfolioCard({ p, i, layout, hovered, onEnter, onLeave, isMobile }) {
  const span = !isMobile && layout === 'masonry' && p.aspect === 'wide' ? { gridColumn:'span 2' } : {};
  const h    = isMobile ? '200px' : layout === 'masonry' ? (p.aspect === 'tall' ? '380px' : '240px') : '260px';
  const hov  = hovered === i;
  return (
    <div
      className="portfolio-card"
      style={{ ...span, height: h, background: PALETTE[i], borderRadius:'10px',
        position:'relative', overflow:'hidden', cursor:'pointer',
        transition:'transform 0.4s ease, box-shadow 0.4s ease',
        transform: hov ? 'scale(1.025)' : 'scale(1)',
        boxShadow: hov ? '0 24px 64px rgba(0,0,0,0.5)' : '0 4px 20px rgba(0,0,0,0.3)',
      }}
      onMouseEnter={() => onEnter(i)}
      onMouseLeave={() => onLeave()}
    >
      <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.07}} xmlns="http://www.w3.org/2000/svg">
        <defs><pattern id={`s${i}`} width="20" height="20" patternUnits="userSpaceOnUse">
          <line x1="0" y1="20" x2="20" y2="0" stroke="white" strokeWidth="1"/>
        </pattern></defs>
        <rect width="100%" height="100%" fill={`url(#s${i})`}/>
      </svg>
      <div style={{
        position:'absolute', inset:0,
        background: 'linear-gradient(135deg, rgba(198,167,94,0.12) 0%, rgba(0,0,0,0.65) 100%)',
        opacity: hov ? 1 : 0, transition:'opacity 0.4s ease',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <span style={{
          border:'1px solid rgba(198,167,94,0.7)', color:'var(--gold)',
          padding:'0.5rem 1.4rem', borderRadius:'100px',
          fontSize:'0.8rem', fontWeight:600, letterSpacing:'0.1em', textTransform:'uppercase',
          fontFamily:'var(--font-body)',
          transform: hov ? 'translateY(0)' : 'translateY(8px)',
          transition:'transform 0.4s ease', opacity: hov ? 1 : 0,
        }}>View Project →</span>
      </div>
      <div style={{
        position:'absolute', bottom:0, left:0, right:0, padding:'1.5rem',
        background:'linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%)',
      }}>
        <span style={{ fontSize:'0.72rem', letterSpacing:'0.12em', textTransform:'uppercase',
          color:'var(--gold)', fontFamily:'var(--font-body)', fontWeight:600 }}>{p.label}</span>
        <h3 style={{ fontSize:'1.2rem', fontFamily:'var(--font-display)', color:'#fff',
          marginTop:'0.25rem', fontWeight:600 }}>{p.title}</h3>
      </div>
      <span style={{ position:'absolute', top:'1rem', right:'1rem',
        background:'rgba(255,255,255,0.07)', backdropFilter:'blur(8px)',
        border:'1px solid rgba(255,255,255,0.12)', borderRadius:'100px',
        padding:'0.2rem 0.75rem', fontSize:'0.75rem', color:'rgba(255,255,255,0.7)',
        fontFamily:'var(--font-body)' }}>{p.tag}</span>
    </div>
  );
}

function PortfolioSection({ layout }) {
  const [hovered, setHovered] = React.useState(null);
  const isMobile = useIsMobile();
  const cols = isMobile ? '1fr'
    : layout === 'uniform' ? 'repeat(auto-fit,minmax(300px,1fr))'
    : 'repeat(3,1fr)';
  return (
    <section id="portfolio" style={{...sectionStyle, background:'var(--bg)'}}>
      <SectionLabel>Our Work</SectionLabel>
      <h2 style={headingStyle}>Projects that<br /><em style={{color:'var(--gold)'}}>set the standard.</em></h2>
      <p className="reveal-text" style={subStyle}>A curated selection of brands we've helped reach new heights.</p>
      <div style={{
        display:'grid',
        gridTemplateColumns: cols,
        gridAutoRows: layout === 'uniform' ? '260px' : 'auto',
        gap:'1.25rem', marginTop:'3.5rem',
      }}>
        {PROJECTS.map((p, i) => (
          <PortfolioCard key={i} p={p} i={i} layout={layout} isMobile={isMobile}
            hovered={hovered} onEnter={setHovered} onLeave={() => setHovered(null)} />
        ))}
      </div>
      <div style={{textAlign:'center', marginTop:'3rem'}}>
        <button style={outlineBtn}
          onMouseEnter={e => { e.target.style.background='var(--purple)'; e.target.style.color='#06060e'; }}
          onMouseLeave={e => { e.target.style.background='transparent'; e.target.style.color='var(--purple)'; }}>
          View All Projects →
        </button>
      </div>
    </section>
  );
}

// ─── PROCESS ─────────────────────────────────────────────────────────────────
const STEPS = [
  { n:'01', title:'Discovery',     body:'We immerse ourselves in your brand, audience, and goals. No assumptions — just deep listening and sharper questions.' },
  { n:'02', title:'Strategy',      body:'We map the path: user flows, content architecture, and a visual direction that sets you apart from the crowd.' },
  { n:'03', title:'Design & Build',body:'Our designers and developers work in lockstep, crafting every detail until the experience is exactly right.' },
  { n:'04', title:'Launch & Grow', body:'We deploy with precision, then stay by your side — optimizing, evolving, and scaling as your brand grows.' },
];

function ProcessStep({ s, i, isMobile }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        padding: isMobile ? '1.5rem 0' : '0 2rem 2rem',
        position:'relative',
        borderLeft: !isMobile && i > 0 ? '1px solid rgba(198,167,94,0.1)' : 'none',
        borderTop: isMobile && i > 0 ? '1px solid rgba(198,167,94,0.1)' : 'none',
      }}
    >
      <div style={{
        width:'3.5rem', height:'3.5rem', borderRadius:'50%',
        border:'1px solid var(--purple)',
        display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:'var(--font-display)', fontSize:'1.1rem', color:'var(--purple)',
        marginBottom:'1.5rem', background:'var(--surface)',
        boxShadow: hov ? '0 0 28px rgba(198,167,94,0.35)' : '0 0 20px rgba(198,167,94,0.12)',
        transition:'box-shadow 0.35s ease',
      }}>{s.n}</div>
      <h3 style={{ fontSize:'1.3rem', fontFamily:'var(--font-display)', fontWeight:600,
        color:'var(--text)', marginBottom:'0.75rem' }}>{s.title}</h3>
      <p className="word-fade" style={{ color:'var(--muted)', fontSize:'0.92rem', lineHeight:1.75 }}>{s.body}</p>
    </div>
  );
}

function ProcessSection() {
  const isMobile = useIsMobile();
  return (
    <section id="process" style={{...sectionStyle, background:'var(--surface)'}}>
      <SectionLabel>How We Work</SectionLabel>
      <h2 style={headingStyle}>A process built<br /><em style={{color:'var(--violet)'}}>for results.</em></h2>
      <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit,minmax(220px,1fr))',
        gap:'0', marginTop:'4rem', position:'relative' }}>
        {!isMobile && (
          <div style={{ position:'absolute', top:'2.8rem', left:'5%', right:'5%', height:'1px',
            background:'linear-gradient(90deg, transparent, var(--purple), var(--violet), transparent)',
            opacity:0.25, pointerEvents:'none' }} />
        )}
        {STEPS.map((s, i) => <ProcessStep key={i} s={s} i={i} isMobile={isMobile} />)}
      </div>
    </section>
  );
}

// ─── PRICING ─────────────────────────────────────────────────────────────────
const PLANS = [
  {
    name: 'Starter',
    price: '$500',
    tagline: 'Clean, fast, and ready to launch.',
    badge: null,
    features: [
      'Up to 6 pages',
      'Fully responsive design',
      'Scroll-reveal & fade animations',
      'Contact form with email routing',
      'SEO meta tags & sitemap',
      'Google Analytics setup',
      'Social media link integration',
      'Performance & accessibility audit',
      '2 rounds of revisions',
      '~2 week delivery',
    ],
    cta: 'Start a Project',
    ctaHref: '#contact',
    featured: false,
  },
  {
    name: 'Professional',
    price: '$900',
    tagline: 'Built to convert and built to scale.',
    badge: 'Most Popular',
    features: [
      'Everything in Starter',
      'Unlimited pages',
      'Advanced scroll & parallax animations',
      'In-site e-commerce storefront',
      'Stripe / PayPal payment integration',
      'Product catalog & shopping cart',
      'Blog or CMS-ready structure',
      'Portfolio with category filtering',
      'Email newsletter integration',
      '4 rounds of revisions',
      '~3 week delivery',
    ],
    cta: 'Start a Project',
    ctaHref: '#contact',
    featured: true,
  },
  {
    name: 'Platinum',
    price: 'From $1,200+',
    tagline: 'Enterprise-grade. No limits.',
    badge: 'Enterprise',
    features: [
      'Everything in Professional',
      '3D WebGL / Three.js effects',
      'Custom GLSL shaders & visual FX',
      'Scroll-scrubbed video hero',
      'Particle systems & immersive UI',
      'Custom web app features',
      'Headless CMS (Sanity / Contentful)',
      'Multi-language support',
      'Priority support & dedicated PM',
      'Unlimited revisions',
      'Custom timeline',
    ],
    cta: 'Contact for Pricing',
    ctaHref: '#contact',
    featured: false,
  },
];

function PricingCard({ plan, index, isMobile }) {
  const [hov, setHov] = React.useState(false);
  const isMiddle = plan.featured;

  const cardStyle = {
    ...glassCardStyle,
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    padding: '2.5rem 2rem',
    border: isMiddle
      ? '1px solid rgba(198,167,94,0.55)'
      : '1px solid rgba(255,255,255,0.07)',
    boxShadow: isMiddle
      ? '0 0 60px rgba(198,167,94,0.12), 0 8px 40px rgba(0,0,0,0.5)'
      : hov
        ? '0 12px 40px rgba(0,0,0,0.4)'
        : '0 4px 20px rgba(0,0,0,0.25)',
    transform: isMiddle && !isMobile
      ? 'translateY(-12px) scale(1.02)'
      : hov ? 'translateY(-4px)' : 'translateY(0)',
    transition: 'transform 0.35s ease, box-shadow 0.35s ease',
    zIndex: isMiddle ? 2 : 1,
  };

  return (
    <div style={cardStyle}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}>

      {plan.badge && (
        <div style={{
          position: 'absolute', top: '-14px', left: '50%',
          transform: 'translateX(-50%)',
          background: isMiddle ? 'var(--gold)' : 'var(--surface-2)',
          color: isMiddle ? '#06060e' : 'var(--gold)',
          border: isMiddle ? 'none' : '1px solid rgba(198,167,94,0.4)',
          fontSize: '0.7rem', fontWeight: 700, letterSpacing: '0.14em',
          textTransform: 'uppercase', padding: '0.3rem 1rem',
          borderRadius: '100px', whiteSpace: 'nowrap',
          fontFamily: 'var(--font-body)',
        }}>{plan.badge}</div>
      )}

      <p style={{
        fontFamily: 'var(--font-display)', fontSize: '1.15rem',
        fontWeight: 600, color: isMiddle ? 'var(--gold)' : 'var(--muted)',
        letterSpacing: '0.04em', marginBottom: '0.5rem',
      }}>{plan.name}</p>

      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: plan.price.startsWith('From') ? 'clamp(1.6rem,3vw,2.2rem)' : 'clamp(2.4rem,4vw,3rem)',
        fontWeight: 700, color: 'var(--text)', lineHeight: 1,
        marginBottom: '0.5rem',
      }}>{plan.price}</div>

      <p style={{
        fontSize: '0.85rem', color: 'var(--muted)', lineHeight: 1.6,
        marginBottom: '2rem', minHeight: '2.6rem',
      }}>{plan.tagline}</p>

      <div style={{
        height: '1px',
        background: isMiddle
          ? 'linear-gradient(90deg, transparent, rgba(198,167,94,0.4), transparent)'
          : 'rgba(255,255,255,0.06)',
        marginBottom: '1.75rem',
      }} />

      <ul style={{
        listStyle: 'none', display: 'flex', flexDirection: 'column',
        gap: '0.75rem', flexGrow: 1, marginBottom: '2rem',
      }}>
        {plan.features.map((f, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: '0.65rem',
            fontSize: '0.875rem', color: i === 0 && index > 0 ? 'var(--gold)' : 'var(--muted)',
            fontWeight: i === 0 && index > 0 ? 600 : 400,
            lineHeight: 1.5,
          }}>
            <span style={{
              color: isMiddle ? 'var(--gold)' : 'rgba(198,167,94,0.55)',
              fontSize: '0.65rem', marginTop: '0.25rem', flexShrink: 0,
            }}>✦</span>
            {f}
          </li>
        ))}
      </ul>

      <a href={plan.ctaHref}
        onClick={e => {
          e.preventDefault();
          document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }}
        style={{
          ...(isMiddle ? primaryBtn : outlineBtn),
          display: 'block', textAlign: 'center',
          textDecoration: 'none', padding: '0.85rem 1.5rem',
          fontSize: '0.9rem',
        }}
        onMouseEnter={e => {
          if (!isMiddle) { e.target.style.background='var(--purple)'; e.target.style.color='#06060e'; }
        }}
        onMouseLeave={e => {
          if (!isMiddle) { e.target.style.background='transparent'; e.target.style.color='var(--purple)'; }
        }}
      >{plan.cta} →</a>
    </div>
  );
}

function PricingSection() {
  const isMobile = useIsMobile();
  return (
    <section id="pricing" style={{...sectionStyle, background:'var(--bg)'}}>
      <SectionLabel>Pricing</SectionLabel>
      <h2 style={headingStyle}>Simple, transparent<br /><em style={{color:'var(--gold)'}}>pricing.</em></h2>
      <p className="reveal-text" style={subStyle}>
        No hidden fees. No surprises. Pick the tier that fits your vision — or contact us for something custom.
      </p>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? '2rem' : '1.5rem',
        marginTop: isMobile ? '3rem' : '4rem',
        alignItems: 'start',
        position: 'relative',
      }}>
        {PLANS.map((plan, i) => <PricingCard key={i} plan={plan} index={i} isMobile={isMobile} />)}
      </div>

      <div style={{
        marginTop: '3rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '0.75rem',
        flexWrap: 'wrap',
      }}>
        <span style={{ width:'2rem', height:'1px', background:'rgba(198,167,94,0.35)', display:'inline-block' }} />
        <p style={{ color:'var(--muted)', fontSize:'0.85rem', textAlign:'center', lineHeight:1.6 }}>
          <em style={{ color:'var(--gold)', fontStyle:'normal', fontWeight:600 }}>Registered non-profits</em>
          {' '}receive discounted pricing on all tiers —{' '}
          <a href="#contact"
            onClick={e => { e.preventDefault(); document.getElementById('contact')?.scrollIntoView({ behavior:'smooth' }); }}
            style={{ color:'var(--gold)', textDecoration:'none', borderBottom:'1px solid rgba(198,167,94,0.35)' }}>
            reach out to learn more.
          </a>
        </p>
        <span style={{ width:'2rem', height:'1px', background:'rgba(198,167,94,0.35)', display:'inline-block' }} />
      </div>
    </section>
  );
}

// ─── STATS BAR ────────────────────────────────────────────────────────────────
function useCountUp(end, suffix, duration) {
  const [display, setDisplay] = React.useState('0' + suffix);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ob = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      ob.disconnect();
      const num = parseFloat(end);
      let start = null;
      const step = ts => {
        if (!start) start = ts;
        const p = Math.min((ts - start) / duration, 1);
        const ease = 1 - Math.pow(1 - p, 3);
        setDisplay(Math.round(num * ease) + suffix);
        if (p < 1) requestAnimationFrame(step);
        else setDisplay(end + suffix);
      };
      requestAnimationFrame(step);
    }, { threshold: 0.6 });
    ob.observe(el);
    return () => ob.disconnect();
  }, []);
  return [display, ref];
}

function StatItem({ n, label, divider }) {
  const prefix = n.startsWith('$') ? '$' : '';
  const stripped = n.replace(/[$+%]/g, '').replace('M','');
  const hasMPlus = n.includes('M+');
  const suffix = hasMPlus ? 'M+' : n.includes('+') ? '+' : n.includes('%') ? '%' : '';
  const [val, ref] = useCountUp(stripped, suffix, 1600);

  return (
    <div ref={ref} style={{ textAlign:'center', padding:'1rem' }}>
      <div style={{ fontSize:'2.8rem', fontFamily:'var(--font-display)', fontWeight:700,
        color:'var(--purple)', lineHeight:1 }}>{prefix}{val}</div>
      <div style={{ color:'var(--muted)', fontSize:'0.85rem', marginTop:'0.4rem', letterSpacing:'0.05em' }}>{label}</div>
    </div>
  );
}

function StatsBar() {
  const isMobile = useIsMobile();
  return (
    <div style={{ background:'var(--surface-2)',
      borderTop:'1px solid rgba(198,167,94,0.12)',
      borderBottom:'1px solid rgba(198,167,94,0.12)' }}>
      <div style={{ maxWidth:'1200px', margin:'0 auto', display:'grid',
        gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)',
        padding:'3rem 2rem', gap: isMobile ? '1.5rem 0' : '0' }}>
        {[['150+','Websites Launched'],['98%','Client Retention'],['12','Countries Served'],['$40M+','Revenue Generated']]
          .map(([n, l], i) => <StatItem key={i} n={n} label={l} divider={false} />)}
      </div>
    </div>
  );
}

// ─── TESTIMONIALS ─────────────────────────────────────────────────────────────
const TESTIMONIALS = [
  { name:'Sophia Kaur',    role:'CEO, Velour Atelier',    quote:"NovaEdge didn't just build us a website — they built us a brand presence. Revenue doubled in the first quarter after launch." },
  { name:'James Obi',      role:'CTO, Orbital Analytics', quote:"I've worked with dozens of agencies. NovaEdge is the only one that truly understood the technical nuance of our product and translated it into something beautiful." },
  { name:'Claire Fontaine',role:'Founder, Aurum Retreats', quote:"Every pixel was intentional. The site they built feels like the hotels we run — immaculate, considered, and unforgettable." },
];

function TestimonialsSection() {
  const [active, setActive] = React.useState(0);
  const [fade, setFade] = React.useState(true);

  const goTo = React.useCallback(idx => {
    setFade(false);
    setTimeout(() => { setActive(idx); setFade(true); }, 280);
  }, []);

  React.useEffect(() => {
    const t = setInterval(() => goTo((active + 1) % TESTIMONIALS.length), 5500);
    return () => clearInterval(t);
  }, [active]);

  const q = TESTIMONIALS[active];
  return (
    <section id="testimonials" style={{ ...sectionStyle, background:'var(--surface)',
      textAlign:'center', paddingTop:'4rem', paddingBottom:'4rem' }}>
      <SectionLabel>Clients</SectionLabel>
      <h2 style={{ ...headingStyle, maxWidth:'none', fontSize:'clamp(1.8rem,3vw,2.6rem)',
        marginTop:'0.5rem' }}>Words from those<br /><em style={{color:'var(--violet)'}}>who've been there.</em></h2>
      <div style={{ maxWidth:'600px', margin:'2.5rem auto 0', position:'relative' }}>
        <div style={{ fontSize:'4rem', color:'var(--purple)', opacity:0.2, lineHeight:1,
          fontFamily:'Georgia', marginBottom:'-0.75rem', userSelect:'none' }}>"</div>
        <p className="word-fade" style={{ fontSize:'1.08rem', lineHeight:1.75, color:'var(--text)',
          fontFamily:'var(--font-display)', fontStyle:'italic', marginBottom:'1.75rem',
          minHeight:'5.5rem', transition:'opacity 0.28s ease', opacity: fade ? 1 : 0 }}>{q.quote}</p>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:'0.2rem',
          transition:'opacity 0.28s ease', opacity: fade ? 1 : 0 }}>
          <span style={{ fontWeight:600, color:'var(--text)', fontSize:'0.9rem', fontFamily:'var(--font-body)' }}>{q.name}</span>
          <span style={{ color:'var(--muted)', fontSize:'0.8rem' }}>{q.role}</span>
        </div>
        <div style={{ display:'flex', gap:'0.5rem', justifyContent:'center', marginTop:'1.75rem' }}>
          {TESTIMONIALS.map((_, i) => (
            <button key={i} onClick={() => goTo(i)} aria-label={`Testimonial ${i+1}`} style={{
              width: i===active ? '2rem' : '0.5rem', height:'0.5rem', borderRadius:'100px',
              background: i===active ? 'var(--purple)' : 'rgba(198,167,94,0.25)',
              border:'none', cursor:'pointer', transition:'all 0.3s ease', padding:0,
            }} />
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CONTACT ─────────────────────────────────────────────────────────────────
function ContactInput({ name, placeholder, value, onChange, required, type='text' }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <input name={name} type={type} placeholder={placeholder} value={value}
      onChange={onChange} required={required}
      onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
      style={{ ...inputStyle,
        borderColor: focused ? 'rgba(198,167,94,0.6)' : 'rgba(255,255,255,0.08)',
        boxShadow: focused ? '0 0 0 3px rgba(198,167,94,0.1)' : 'none',
        transition:'border-color 0.2s, box-shadow 0.2s',
      }} />
  );
}

function ContactTextarea({ name, placeholder, value, onChange, required, rows }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <textarea name={name} placeholder={placeholder} value={value}
      onChange={onChange} required={required} rows={rows}
      onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
      style={{ ...inputStyle, resize:'vertical',
        borderColor: focused ? 'rgba(198,167,94,0.6)' : 'rgba(255,255,255,0.08)',
        boxShadow: focused ? '0 0 0 3px rgba(198,167,94,0.1)' : 'none',
        transition:'border-color 0.2s, box-shadow 0.2s',
      }} />
  );
}

function ContactSelect({ name, value, onChange }) {
  const [focused, setFocused] = React.useState(false);
  return (
    <select name={name} value={value} onChange={onChange}
      onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
      style={{ ...inputStyle,
        color: value ? 'var(--text)' : 'var(--muted)',
        borderColor: focused ? 'rgba(198,167,94,0.6)' : 'rgba(255,255,255,0.08)',
        boxShadow: focused ? '0 0 0 3px rgba(198,167,94,0.1)' : 'none',
        transition:'border-color 0.2s, box-shadow 0.2s',
      }}>
      <option value="">Select a Package</option>
      {['Starter — $500','Professional — $900','Platinum — From $1,200+','Not sure yet'].map(b => <option key={b} value={b}>{b}</option>)}
    </select>
  );
}

function ContactSection() {
  const isMobile = useIsMobile();
  const [sent, setSent]   = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [form, setForm]   = React.useState({name:'',email:'',company:'',budget:'',message:''});
  const handle = e => setForm(f => ({...f, [e.target.name]: e.target.value}));
  const submit = e => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); setSent(true); }, 1400);
  };
  return (
    <section id="contact" style={{...sectionStyle, background:'var(--bg)'}}>
      <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? '2.5rem' : '5rem',
        maxWidth:'1100px', margin:'0 auto', alignItems:'center' }}>
        <div>
          <SectionLabel>Contact</SectionLabel>
          <h2 style={{...headingStyle, maxWidth:'none'}}>Ready to launch<br /><em style={{color:'var(--purple)'}}>something great?</em></h2>
          <p className="reveal-text" style={{ color:'var(--muted)', lineHeight:1.75, marginTop:'1.5rem' }}>Tell us about your project and we'll be in touch within 24 hours.</p>
          <div style={{ marginTop:'3rem', display:'flex', flexDirection:'column', gap:'1.25rem' }}>
            {[
              ['✦ Email',        'novaedgedesign@outlook.com'],
              ['◈ Based in',     'Dallas, TX'],
              ['◎ Response time','Within 24 hours'],
            ].map(([l, v], i) => (
              <div key={i} style={{ display:'flex', gap:'1rem', alignItems:'center' }}>
                <span style={{ color:'var(--purple)', fontSize:'0.85rem', width:'8rem', flexShrink:0, fontWeight:600 }}>{l}</span>
                <span style={{ color:'var(--muted)', fontSize:'0.9rem' }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={glassCardStyle}>
          {sent ? (
            <div style={{ textAlign:'center', padding:'2rem 0' }}>
              <div style={{ fontSize:'3rem', marginBottom:'1rem', color:'var(--gold)' }}>✦</div>
              <h3 style={{ fontFamily:'var(--font-display)', fontSize:'1.8rem', color:'var(--text)', marginBottom:'0.75rem' }}>Message Received</h3>
              <p style={{ color:'var(--muted)' }}>We'll be in touch within 24 hours.</p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:'1.25rem' }}>
              <ContactInput name="name"    placeholder="Your Name"      value={form.name}    onChange={handle} required />
              <ContactInput name="email"   placeholder="Email Address"  value={form.email}   onChange={handle} required type="email" />
              <ContactInput name="company" placeholder="Company"        value={form.company} onChange={handle} />
              <ContactSelect name="budget" value={form.budget} onChange={handle} />
              <ContactTextarea name="message" placeholder="Tell us about your project…" value={form.message} onChange={handle} required rows={4} />
              <button type="submit" data-magnetic disabled={loading} style={{
                ...primaryBtn,
                opacity: loading ? 0.7 : 1,
                transition:'opacity 0.2s, transform 0.5s cubic-bezier(0.23,1,0.32,1)',
              }}
                onMouseEnter={e => { if (!loading) e.target.style.transform='translateY(-1px)'; }}
                onMouseLeave={e => { e.target.style.transform='translateY(0)'; }}>
                {loading ? 'Sending…' : 'Send Message →'}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ───────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background:'var(--surface)', borderTop:'1px solid rgba(198,167,94,0.1)', padding:'3.5rem 2rem' }}>
      <div style={{ maxWidth:'1200px', margin:'0 auto', display:'flex',
        justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:'2rem' }}>
        <div>
          <div>
            <img src="logo.png" alt="NovaEdge Design" style={{ height:'56px', width:'auto', display:'block',
              filter:'drop-shadow(0 0 8px rgba(56,130,246,0.35))' }} />
          </div>
          <p style={{ color:'var(--muted)', fontSize:'0.85rem', marginTop:'0.4rem' }}>© 2026 NovaEdge Design. All rights reserved.</p>
        </div>
        <div style={{ display:'flex', gap:'2.5rem', flexWrap:'wrap' }}>
          {['Services','Portfolio','Process','Pricing','Contact'].map(l => (
            <a key={l} href={`#${l.toLowerCase()}`} data-magnetic
              style={{ color:'var(--muted)', textDecoration:'none',
              fontSize:'0.9rem', transition:'color 0.2s, transform 0.5s cubic-bezier(0.23,1,0.32,1)', position:'relative' }}
              onMouseEnter={e => e.target.style.color='var(--gold)'}
              onMouseLeave={e => e.target.style.color='var(--muted)'}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

// ─── SHARED DESIGN TOKENS ─────────────────────────────────────────────────────
const sectionStyle = { padding:'7rem 2rem', maxWidth:'1200px', margin:'0 auto' };
const headingStyle = {
  fontFamily:'var(--font-display)', fontSize:'clamp(2.2rem,4vw,3.5rem)',
  fontWeight:600, color:'var(--text)', lineHeight:1.18,
  maxWidth:'600px', marginTop:'1rem', letterSpacing:'-0.02em',
};
const subStyle = { color:'var(--muted)', fontSize:'1.05rem', lineHeight:1.72, maxWidth:'520px', marginTop:'1rem' };
const glassCardStyle = {
  background:'rgba(255,255,255,0.025)', backdropFilter:'blur(16px)',
  border:'1px solid rgba(255,255,255,0.06)', borderRadius:'14px', padding:'2rem',
  boxShadow:'0 4px 24px rgba(0,0,0,0.3)',
};
const primaryBtn = {
  display:'inline-block', padding:'0.88rem 2.2rem',
  background:'var(--purple)', color:'#06060e', border:'none', borderRadius:'6px',
  fontFamily:'var(--font-body)', fontSize:'0.95rem', fontWeight:700,
  cursor:'pointer', letterSpacing:'0.02em', width:'100%',
  transition:'opacity 0.2s, transform 0.5s cubic-bezier(0.23,1,0.32,1)',
};
const outlineBtn = {
  display:'inline-block', padding:'0.88rem 2.2rem',
  background:'transparent', color:'var(--purple)',
  border:'1px solid var(--purple)', borderRadius:'6px',
  fontFamily:'var(--font-body)', fontSize:'0.95rem', fontWeight:600,
  cursor:'pointer', letterSpacing:'0.02em',
  transition:'background 0.25s, color 0.25s',
};
const inputStyle = {
  padding:'0.88rem 1rem', background:'rgba(255,255,255,0.04)',
  border:'1px solid rgba(255,255,255,0.08)', borderRadius:'8px',
  color:'var(--text)', fontFamily:'var(--font-body)', fontSize:'0.9rem',
  outline:'none', width:'100%', boxSizing:'border-box',
};

function SectionLabel({ children }) {
  return (
    <div style={{ display:'inline-flex', alignItems:'center', gap:'0.75rem', marginBottom:'0.5rem' }}>
      <span style={{ width:'1.5rem', height:'1px', background:'var(--purple)', display:'inline-block' }} />
      <span style={{ color:'var(--purple)', fontSize:'0.78rem', letterSpacing:'0.18em',
        textTransform:'uppercase', fontWeight:600, fontFamily:'var(--font-body)' }}>{children}</span>
    </div>
  );
}

function TweaksPanel() { return null; }

Object.assign(window, {
  ServicesSection, PortfolioSection, ProcessSection,
  PricingSection, TestimonialsSection, StatsBar,
  ContactSection, Footer, TweaksPanel, SectionLabel,
  sectionStyle, headingStyle, subStyle, glassCardStyle,
  primaryBtn, outlineBtn, inputStyle,
});