function AboutPage({ onContact }) {
  return (
    <main data-screen-label="About">
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'About'}]}
        eyebrow="About"
        title={<>One technical consultant. <span className="beat-aurora">A handful of clients at a time.</span></>}
        body="Aurora Network Solutions is a deliberately small consultancy in Raleigh, NC. We exist because most homeowners and small businesses deserve enterprise-grade networking and IT — without hiring an enterprise."
      />

      <section className="section section--tight">
        <div className="container container--narrow">
          <div className="kv-list">
            <div className="kv"><span className="k">Founded</span><span className="v">2024 · Raleigh, NC</span></div>
            <div className="kv"><span className="k">Legal name</span><span className="v">Aurora Network Solutions LLC</span></div>
            <div className="kv"><span className="k">Insurance</span><span className="v">General liability · 2M aggregate</span></div>
            <div className="kv"><span className="k">Primary service area</span><span className="v">Triangle area, NC</span></div>
            <div className="kv"><span className="k">Travel range</span><span className="v">~75 mi · further for the right job</span></div>
            <div className="kv"><span className="k">Affiliation</span><span className="v">Independent · not affiliated with Ubiquiti Inc.</span></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="cols-2" style={{'--cols':'1fr 1.4fr', '--col-gap':'64px'}}>
            <div>
              <div className="eyebrow">Why Aurora exists</div>
              <h2 className="h2" style={{margin:'18px 0 0', maxWidth:'14ch'}}>
                Most homes deserve <span className="beat-aurora">better than the box from the ISP.</span>
              </h2>
            </div>
            <div className="stack gap-6" style={{maxWidth:'62ch'}}>
              <p className="lede" style={{margin:0}}>
                Most small businesses get their website from one vendor, email from another, and IT help from whoever answers first — none of whom talk to each other.
                We started Aurora to be the one technically-serious person a household or small business actually needs: someone who builds it properly the first time and answers the phone afterward.
              </p>
              <p className="lede" style={{margin:0}}>
                The same idea extends to the network and cameras you already own. There's a properly-engineered version of each, and a half-baked one — and the half-baked one usually costs more in the long run.
              </p>
              <p className="lede" style={{margin:0}}>
                We're a one-person shop on purpose. You talk to the same person who scoped the job, the same person who does the work, and the same person who answers the phone two years later.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="container">
          <Metrics items={[
            {num:'Triangle', lbl:'Primary service area'},
            {num:'1', lbl:'Person on every job'},
            {num:'$0', lbl:'Consultation fee'},
            {num:'25 mi', lbl:'Free site visit radius'},
          ]} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader
            eyebrow="What we believe"
            title={<>A few <span className="beat-aurora">non-negotiables.</span></>}
          />
          <div className="grid grid-2">
            {[
              { icon:'shield-check', accent:'var(--aurora-green)', title:'Honest about limits', body:'If a job is bigger than a one-person shop should take on, we say so and refer you to someone we trust. We\'d rather lose the job than do it halfway.' },
              { icon:'eye', accent:'var(--aurora-blue)', title:'No subscription traps', body:'Websites are yours. Email is on your domain. Cameras record locally. Nothing about Aurora is built around recurring lock-in.' },
              { icon:'users', accent:'var(--aurora-purple)', title:'One human, one number', body:'No call centers, no ticket queues, no escalation. The person who built your website or tuned your network is the one who answers when you call.' },
              { icon:'sparkles', accent:'var(--aurora-magenta)', title:'Right-sized, not overspecced', body:'The fix you need, not the project we could bill. The right answer, even when it\'s the smaller bill.' },
            ].map((b, i) => (
              <div className="card card--edge" key={i}>
                <div className="icon-tile icon-tile--lg" style={{
                  background:`color-mix(in srgb, ${b.accent} 14%, transparent)`,
                  borderColor:`color-mix(in srgb, ${b.accent} 32%, transparent)`,
                  color: b.accent, marginBottom: 18,
                }}>
                  <Icon name={b.icon} size={26} />
                </div>
                <h3 className="h3">{b.title}</h3>
                <p className="body mt-2">{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="cols-2" style={{'--cols':'1fr 1.2fr', '--col-gap':'64px', alignItems:'center'}}>
            <TriangleMap />
            <div>
              <div className="eyebrow">Service area</div>
              <h2 className="h2" style={{margin:'18px 0 24px'}}>
                Raleigh. Durham. Cary. <span className="beat-aurora">The whole Triangle.</span>
              </h2>
              <p className="lede">
                We serve all of Wake, Durham, and Orange counties — and we'll travel further for projects that fit. Site surveys within 25 miles of downtown Raleigh are free. After that we'll quote a small travel fee and explain why.
              </p>
              <div className="row gap-3 mt-8">
                <button className="btn btn--primary" onClick={onContact}>
                  Schedule a Consultation <Icon name="arrow-up-right" size={16} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTABand
        eyebrow="Ready when you are"
        title="No pressure. No salespeople. Just a conversation."
        primary="Schedule a Free Consultation"
        onPrimary={onContact}
        secondary="See our services"
        onSecondary={() => navigate('/services')}
      />
    </main>
  );
}
window.AboutPage = AboutPage;


function PortfolioPage({ onContact }) {
  const cases = [
    {
      tag:'Website', accent:'var(--aurora-green)',
      title:'Naki Dental Studio · Wilmington, NC',
      desc:'Custom site for a boutique dentistry studio — clean, calming, and built to match the in-person experience of the practice.',
      href:'https://nakidentalstudio.com',
      img:'assets/portfolio-naki-dental.jpg',
      alt:'Naki Dental Studio website preview',
    },
    {
      tag:'Website', accent:'var(--aurora-blue)',
      title:'Kathleen Memorial · a life, remembered',
      desc:'A digital memorial built for family and friends — a 200+ photo gallery, life story, and a moderated space to share memories. A lasting home for remembrance.',
      href:'https://kathleen-memorial.com',
      img:'assets/portfolio-kathleen-memorial.jpg',
      alt:'Kathleen Memorial website preview',
    },
    {
      tag:'Website', accent:'var(--aurora-magenta)',
      title:'Katie & Nick · wedding site',
      desc:'Full-featured wedding site — RSVP, travel guide, registry, and a private guest photo gallery. Dark, romantic, and timeless, to match the day.',
      href:'https://katieandnick.net',
      img:'assets/portfolio-katieandnick.jpg',
      alt:'Katie and Nick wedding website preview',
    },
  ];

  // real site preview image, cover-fit inside the card frame
  const visualFor = (img, alt) => (
    <img src={img} alt={alt} loading="lazy" style={{
      position:'absolute', inset:0, width:'100%', height:'100%',
      objectFit:'cover',
    }} />
  );

  return (
    <main data-screen-label="Portfolio">
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'Portfolio'}]}
        eyebrow="Selected work"
        title={<>Real projects. <span className="beat-aurora">Live on the web.</span></>}
        body="Every site below is real, built by Aurora, and live right now — click through and judge the work for yourself."
      />

      <section className="section section--tight">
        <div className="container">
          <div className="grid grid-3">
            {cases.map((c, i) => (
              <CaseCard
                key={i}
                accent={c.accent} title={c.title} desc={c.desc}
                href={c.href}
                visual={visualFor(c.img, c.alt)}
              />
            ))}
          </div>
        </div>
      </section>

      <CTABand
        eyebrow="Got a project like one of these?"
        title="Tell us what you're picturing. We'll quote it."
        primary="Schedule a Free Consultation"
        onPrimary={onContact}
        secondary="See pricing ranges"
        onSecondary={() => navigate('/services')}
      />
    </main>
  );
}
window.PortfolioPage = PortfolioPage;