// Home page

function Hero({ heroVariant, onContact }) {
  return (
    <section className="hero" data-screen-label="01 Home Hero">
      <AuroraRibbon mode={heroVariant} />
      <div className="container hero-inner">
        <div style={{display:'flex', alignItems:'center', gap:14, color:'var(--fg-3)', flexWrap:'wrap'}}>
          <span className="chip"><span className="dot" />Booking now</span>
          <span className="mono dim hero-locale" style={{fontSize:12}}>· Raleigh, NC · Triangle area</span>
        </div>

        <h1 className="display hero-headline">
          <span className="beat">Secure.</span>{' '}
          <span className="beat">Connected.</span>{' '}
          <span className="beat beat-aurora">Hassle&#8209;Free.</span>
        </h1>

        <p className="lede" style={{maxWidth: '58ch'}}>
          Websites, business email, and IT consulting for small businesses — plus expert care for the home or office
          network you already have. One technical consultant who plans it, builds it, and stays with you after launch.
        </p>

        <div className="hero-ctas mt-8">
          <button className="btn btn--primary btn--lg" onClick={onContact}>
            Schedule a Free Consultation <Icon name="arrow-up-right" size={16} />
          </button>
          <Link to="/services" className="btn btn--secondary btn--lg">
            See What We Do <Icon name="arrow-right" size={16} />
          </Link>
        </div>

        <div className="hero-meta">
          <span><Icon name="map-pin" size={14} style={{verticalAlign:'-2px', marginRight:4, color:'var(--aurora-blue)'}} />Raleigh · Durham · Cary · Wake Forest</span>
          <span className="dot" />
          <span><Icon name="shield-check" size={14} style={{verticalAlign:'-2px', marginRight:4, color:'var(--aurora-green)'}} />Fully insured</span>
          <span className="dot" />
          <span><Icon name="users" size={14} style={{verticalAlign:'-2px', marginRight:4, color:'var(--aurora-purple)'}} />Locally owned</span>
        </div>
      </div>

      {/* Bottom signal bar - service quick-jump */}
      <div className="container" style={{position:'relative', zIndex:2, marginTop: 'clamp(48px, 8vw, 80px)'}}>
        <div className="hero-quickjump">
          <div className="hero-quickjump-links">
            {SERVICE_LINKS.map(s => (
              <Link key={s.path} to={s.path} className="nav-link">
                <Icon name={s.icon} size={14} /> {s.label}
              </Link>
            ))}
          </div>
          <Link to="/services" className="btn btn--ghost btn--sm" style={{color:'var(--aurora-blue)'}}>
            All services <Icon name="arrow-right" size={14} />
          </Link>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;


function ServicesPreview() {
  return (
    <section className="section" data-screen-label="01 Home Services">
      <div className="container">
        <div className="row row--between" style={{alignItems:'flex-end', gap:32, flexWrap:'wrap', marginBottom: 56}}>
          <div style={{maxWidth: '50ch'}}>
            <div className="eyebrow">Our Services</div>
            <h2 className="h1" style={{margin:'18px 0 18px', fontSize:'clamp(36px, 5vw, 64px)'}}>
              We don't sell you gear. <span className="beat-aurora">We solve the problem.</span>
            </h2>
          </div>
          <p className="lede" style={{maxWidth:'42ch', margin:0}}>
            Four offerings, one consultant, no handoffs. Pick a pillar — or pair them.
          </p>
        </div>

        <div className="grid grid-2">
          <ServiceCard
            to="/services/websites" number="01 / 04"
            accent="var(--aurora-green)"
            icon="browser"
            title="Website Design"
            body="Modern, hand-built websites for small businesses in the Triangle. Fast, maintainable, designed to actually convert."
            tags={['Branding', 'Build', 'SEO', 'Hosting']}
          />
          <ServiceCard
            to="/services/email" number="02 / 04"
            accent="var(--aurora-magenta)"
            icon="mail"
            title="Business Email & IT"
            body="Google Workspace or Microsoft 365 setup, domain configuration, migration, and ongoing small-business IT support."
            tags={['Workspace', 'M365', 'Domains', 'Migration']}
          />
          <ServiceCard
            to="/services/networking" number="03 / 04"
            accent="var(--aurora-blue)"
            icon="wifi"
            title="Network Consulting & Tune-ups"
            body="Dead zones, slow WiFi, or a UniFi® setup nobody maintains? Honest advice, tune-ups, and small upgrades for homes and small offices."
            tags={['Tune-ups', 'Dead zones', 'VLANs', 'UniFi®']}
          />
          <ServiceCard
            to="/services/cameras" number="04 / 04"
            accent="var(--aurora-purple)"
            icon="camera"
            title="Camera System Support"
            body="Already running UniFi Protect®? We tune alerts, fix blind spots, expand storage, and keep an existing system healthy."
            tags={['Protect®', 'Alert tuning', 'Storage', 'Health checks']}
          />
        </div>
      </div>
    </section>
  );
}
window.ServicesPreview = ServicesPreview;


function ProcessSection() {
  const steps = [
    { title: 'Free consult',  body: 'A real conversation — phone, video, or on-site walkthrough. We listen first, scope second.' },
    { title: 'Plan',          body: 'A written scope and itemized quote before any work starts. No surprises, no upsells.' },
    { title: 'Build',         body: 'Website built, email migrated, or network tuned — on time, on quote, done properly.' },
    { title: 'Stay close',    body: 'Updates, monitoring, and one phone number if anything ever goes sideways.' },
  ];
  return (
    <section className="section section--tight" data-screen-label="01 Home Process">
      <div className="container">
        <SectionHeader
          eyebrow="How we work"
          title={<>Smart Planning. Clean Execution. <span className="beat-aurora">No Surprises.</span></>}
          body="Every project follows the same four steps. The boring word is process. We call it doing it right the first time."
        />
        <ProcessGrid steps={steps} />
        <div className="row row--center gap-4 mt-12" style={{justifyContent:'center', flexWrap:'wrap'}}>
          <div className="mono dim">Typical timeline: websites 4–8 weeks · email cutovers overnight · network tune-ups a single visit</div>
        </div>
      </div>
    </section>
  );
}
window.ProcessSection = ProcessSection;


function FeatureSplit({ eyebrow, title, body, bullets, ctaLabel, ctaTo, visual, reverse, accent }) {
  return (
    <section className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 64, alignItems: 'center',
        }}>
          <div style={{order: reverse ? 2 : 1}}>
            <div className="eyebrow" style={{color: accent || 'var(--aurora-blue)'}}>{eyebrow}</div>
            <h2 className="h2" style={{margin:'18px 0 18px'}}>{title}</h2>
            <p className="lede" style={{margin:'0 0 28px'}}>{body}</p>
            <BulletList items={bullets} />
            {ctaLabel && (
              <Link to={ctaTo} className="btn btn--secondary mt-8">
                {ctaLabel} <Icon name="arrow-right" size={16} />
              </Link>
            )}
          </div>
          <div style={{order: reverse ? 1 : 2}}>
            {visual}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .section > .container > div[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
          }
          .section > .container > div[style*="grid-template-columns"] > div { order: unset !important; }
        }
      `}</style>
    </section>
  );
}
window.FeatureSplit = FeatureSplit;


// Decorative visuals for feature splits
function PlanningVisual() {
  return (
    <div style={{
      position:'relative', aspectRatio: '4/3',
      background:'var(--bg-elev-1)', border:'1px solid var(--border-quiet)',
      borderRadius: 'var(--radius-lg)', overflow:'hidden',
    }}>
      <div style={{position:'absolute', inset:0, padding:24}}>
        <svg viewBox="0 0 400 300" width="100%" height="100%">
          <defs>
            <radialGradient id="ap1" cx="25%" cy="35%" r="22%">
              <stop offset="0%" stopColor="#3DDC8C" stopOpacity="0.45" />
              <stop offset="100%" stopColor="#3DDC8C" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="ap2" cx="65%" cy="55%" r="25%">
              <stop offset="0%" stopColor="#4A8FE7" stopOpacity="0.5" />
              <stop offset="100%" stopColor="#4A8FE7" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="ap3" cx="85%" cy="30%" r="18%">
              <stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.45" />
              <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0" />
            </radialGradient>
          </defs>
          {/* floorplan walls */}
          <g stroke="rgba(245,239,227,0.35)" strokeWidth="1.2" fill="none">
            <rect x="20" y="20" width="360" height="260" />
            <line x1="180" y1="20" x2="180" y2="160" />
            <line x1="20" y1="160" x2="240" y2="160" />
            <line x1="240" y1="160" x2="240" y2="280" />
            <line x1="240" y1="200" x2="380" y2="200" />
            {/* doors */}
            <path d="M 165 160 a 15 15 0 0 0 15 -15" />
            <path d="M 240 175 a 15 15 0 0 1 -15 15" />
          </g>
          {/* coverage washes */}
          <rect x="0" y="0" width="400" height="300" fill="url(#ap1)" />
          <rect x="0" y="0" width="400" height="300" fill="url(#ap2)" />
          <rect x="0" y="0" width="400" height="300" fill="url(#ap3)" />
          {/* AP dots */}
          {[[100,105,'#3DDC8C'],[260,165,'#4A8FE7'],[340,90,'#8B5CF6']].map(([x,y,c],i)=>(
            <g key={i}>
              <circle cx={x} cy={y} r="6" fill={c} />
              <circle cx={x} cy={y} r="14" fill="none" stroke={c} strokeOpacity="0.4" />
              <circle cx={x} cy={y} r="24" fill="none" stroke={c} strokeOpacity="0.2" />
            </g>
          ))}
          {/* labels */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(168,176,196,0.7)">
            <text x="60" y="40">LIVING</text>
            <text x="220" y="40">KITCHEN</text>
            <text x="220" y="220">OFFICE</text>
            <text x="40" y="200">PRIMARY</text>
            <text x="290" y="220">GARAGE</text>
          </g>
        </svg>
      </div>
      <div style={{position:'absolute', bottom: 16, left:16, right:16, display:'flex', justifyContent:'space-between', gap:8}}>
        <span className="chip"><Icon name="wifi" size={12} /> 3 APs · -52 dBm avg</span>
        <span className="chip" style={{color:'var(--aurora-green)'}}>100% coverage</span>
      </div>
    </div>
  );
}
window.PlanningVisual = PlanningVisual;

function CamerasVisual() {
  return (
    <div style={{
      position:'relative', aspectRatio: '4/3',
      background:'#070A18', border:'1px solid var(--border-quiet)',
      borderRadius: 'var(--radius-lg)', overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', inset: 12, borderRadius: 12,
        background: 'linear-gradient(135deg, #1e2845 0%, #0a1430 100%)',
        display:'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 6, padding: 6,
      }}>
        {[
          ['Front Drive', '#3DDC8C', 'video'],
          ['Back Patio',  '#4A8FE7', 'video'],
          ['Garage',      '#8B5CF6', 'video'],
          ['Entry',       '#F4A261', 'video'],
        ].map(([name, color, ic], i) => (
          <div key={i} style={{
            position:'relative', borderRadius: 6, overflow:'hidden',
            background:`linear-gradient(135deg, color-mix(in srgb, ${color} 18%, #050810), #050810)`,
            display:'flex', alignItems:'flex-end', padding: 10,
          }}>
            <div style={{position:'absolute', top: 8, left: 8, display:'flex', gap:6, alignItems:'center'}}>
              <span style={{width:6, height:6, borderRadius:'50%', background: '#F36B6B', boxShadow:'0 0 6px #F36B6B', animation:'twinkle 1.5s infinite'}} />
              <span className="mono" style={{fontSize:9, color:'rgba(245,239,227,0.7)'}}>REC</span>
            </div>
            <Icon name={ic} size={28} style={{position:'absolute', top:'40%', left:'40%', color: `color-mix(in srgb, ${color} 40%, transparent)`}} />
            <div className="mono" style={{fontSize:10, color:'var(--fg-1)'}}>{name}</div>
          </div>
        ))}
      </div>
      <div style={{position:'absolute', bottom: 16, left: 24, right: 24, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <span className="mono dim" style={{fontSize:11}}>CLOUDKEY · 14 days · local</span>
        <span className="mono" style={{fontSize:11, color:'var(--aurora-green)'}}>● live</span>
      </div>
    </div>
  );
}
window.CamerasVisual = CamerasVisual;

function WebsiteVisual() {
  return (
    <div style={{
      position:'relative', aspectRatio: '4/3',
      background:'linear-gradient(135deg, #131A30, #0A0E1F)',
      border:'1px solid var(--border-quiet)',
      borderRadius: 'var(--radius-lg)', overflow:'hidden',
      padding: 24, display:'flex', flexDirection:'column', gap:8,
    }}>
      {/* browser bar */}
      <div style={{display:'flex', alignItems:'center', gap:6}}>
        <span style={{width:10, height:10, borderRadius:'50%', background:'#F36B6B'}} />
        <span style={{width:10, height:10, borderRadius:'50%', background:'#F4A261'}} />
        <span style={{width:10, height:10, borderRadius:'50%', background:'#3DDC8C'}} />
        <div style={{flex:1, height:22, background:'var(--bg-elev-3)', borderRadius: 999, marginLeft:8, display:'flex', alignItems:'center', padding:'0 10px'}}>
          <span className="mono" style={{fontSize:10, color:'var(--fg-3)'}}>https://yourbusiness.com</span>
        </div>
      </div>
      <div style={{flex:1, background:'var(--bg-elev-1)', borderRadius:8, padding:18, display:'flex', flexDirection:'column', gap:10, position:'relative', overflow:'hidden'}}>
        <div style={{
          fontFamily:'var(--font-display)', fontSize:'clamp(14px, 2vw, 22px)', fontWeight:700, color:'var(--fg-1)', lineHeight:1.1, letterSpacing:'-0.02em',
        }}>Smart. Local. Booked&nbsp;solid.</div>
        <div style={{fontSize:11, color:'var(--fg-2)', maxWidth:'40ch', lineHeight:1.45}}>
          Sandhill Dental Co. is a family dentistry in Cary, NC, accepting new patients.
        </div>
        <div style={{display:'flex', gap:6, marginTop:4}}>
          <span style={{padding:'5px 10px', borderRadius:999, background:'var(--aurora-ribbon)', color:'var(--fg-on-aurora)', fontSize:10, fontWeight:600}}>Book a visit</span>
          <span style={{padding:'5px 10px', borderRadius:999, border:'1px solid var(--border-soft)', fontSize:10, color:'var(--fg-1)'}}>Services</span>
        </div>
        {/* aurora swoosh */}
        <svg style={{position:'absolute', bottom:-20, right:-30, width:160, height:80}}>
          <path d="M 0 60 Q 50 0 160 30" stroke="url(#ribbon-grad-1)" strokeWidth="2" fill="none" opacity="0.6" />
        </svg>
      </div>
      <div className="row gap-3" style={{justifyContent:'space-between'}}>
        <span className="chip" style={{color:'var(--aurora-green)'}}>● Live</span>
        <span className="mono dim" style={{fontSize:10}}>Lighthouse 98 · 1.2s LCP</span>
      </div>
    </div>
  );
}
window.WebsiteVisual = WebsiteVisual;

function EmailVisual() {
  return (
    <div style={{
      position:'relative', aspectRatio: '4/3',
      background:'linear-gradient(135deg, #1B2342, #0A0E1F)',
      border:'1px solid var(--border-quiet)',
      borderRadius: 'var(--radius-lg)', overflow:'hidden',
      padding: 28, display:'flex', flexDirection:'column', gap:16,
    }}>
      <div className="row gap-3 row--center" style={{justifyContent:'space-between'}}>
        <div className="mono dim" style={{fontSize:11}}>YOURBUSINESS.COM · DNS</div>
        <div className="row gap-2"><span className="chip" style={{color:'var(--aurora-green)'}}><span className="dot" />Verified</span></div>
      </div>
      <div style={{
        background:'var(--bg-deep)', borderRadius:12, padding:16, fontFamily:'var(--font-mono)', fontSize:11, lineHeight:1.8, color:'var(--fg-2)', flex:1,
      }}>
        <div><span style={{color:'var(--aurora-blue)'}}>MX  </span> 1 smtp.google.com</div>
        <div><span style={{color:'var(--aurora-blue)'}}>TXT </span> v=spf1 include:_spf.google.com ~all</div>
        <div><span style={{color:'var(--aurora-blue)'}}>TXT </span> v=DMARC1; p=reject; rua=mailto:...</div>
        <div><span style={{color:'var(--aurora-blue)'}}>CNAME</span> _domainkey ➜ DKIM-1024</div>
        <div style={{marginTop:8, color:'var(--aurora-green)'}}>✓ SPF / DKIM / DMARC aligned</div>
      </div>
      <div className="row gap-2" style={{flexWrap:'wrap'}}>
        <span className="chip"><Icon name="mail" size={12} /> hello@yourbusiness.com</span>
        <span className="chip"><Icon name="mail" size={12} /> billing@</span>
        <span className="chip"><Icon name="mail" size={12} /> info@</span>
      </div>
    </div>
  );
}
window.EmailVisual = EmailVisual;