/* global React, Icon, Eyebrow, Button, Reveal, Marquee, StaggerHeadline, Counter, Spotlight, Tilt */
const { useState } = React;

// Photography placeholders. Swap for real client/studio work before launch.
// The river photo is the brand's namesake — locally hosted and resized.
const PHOTOS = {
  hero:  'https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?auto=format&fit=crop&w=900&q=85',
  about: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&w=900&q=85',
};

// Tweakable defaults — read from window.__rgTweaks if the host wrote any in.
const T = () => (typeof window !== 'undefined' && window.__rgTweaks) || {};

// ============================================================
// HOME
// ============================================================
function Home({ setPage, headline }) {
  // Re-render on tweak changes
  const [, setTick] = useState(0);
  React.useEffect(() => {
    const fn = () => setTick(x => x + 1);
    window.addEventListener('rg-tweaks', fn);
    return () => window.removeEventListener('rg-tweaks', fn);
  }, []);
  const h = headline || 'Web design for small businesses in Las\u00a0Cruces.';
  return (
    <>
      <section className="section hero">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <Eyebrow>Las Cruces, New Mexico</Eyebrow>
              <span className="available-badge">
                <span className="pulse" aria-hidden="true" />
                Available for new projects
              </span>
            </div>
            <StaggerHeadline text={h} tail={2} />
            <Reveal>
              <p className="hero-lede">
                Rio Grande Websites is a local web design team in Las Cruces, New Mexico. We build clean, modern, affordable websites for small businesses across southern New Mexico and El Paso — most live in under a week — and we make the whole process easy, even if you've never had a website before.
              </p>
              <div className="hero-actions">
                <Button variant="primary" icon="arrow-up-right" onClick={() => setPage('contact')}>Get a free quote</Button>
                <Button variant="secondary" onClick={() => setPage('services')}>See what we do</Button>
              </div>
            </Reveal>
          </div>
          <Reveal>
            <div className="hero-photo">
              <img src={PHOTOS.hero} alt="A warm New Mexico landscape near Las Cruces" loading="eager" />
              <span className="stamp">Est. 2026 · Las Cruces</span>
            </div>
          </Reveal>
        </div>
        <Reveal as="div" stagger className="hero-meta container">
          <div className="stat"><div className="num">$<Counter to={T().setupPrice ?? 750} /><em>&nbsp;up front</em></div><div className="lbl">Website design &amp; build</div></div>
          <div className="stat"><div className="num">$<Counter to={T().hostingPrice ?? 20} /><em>/mo</em></div><div className="lbl">Support & maintenance</div></div>
          <div className="stat"><div className="num"><Counter to={24} />&ndash;<Counter to={48} /><em>h</em></div><div className="lbl">Reply time</div></div>
          <div className="stat"><div className="num">&lt;<Counter to={1} /><em>&nbsp;week</em></div><div className="lbl">Design to launch</div></div>
        </Reveal>
      </section>

      <Marquee items={[
        'Cafés & bakeries', 'Boutiques', 'Photographers', 'Tradespeople',
        'Realtors', 'Therapists', 'Local nonprofits', 'Restaurants',
        'Wedding venues', 'Salons',
      ]} />

      <section className="vista" aria-label="The Rio Grande">
        <div className="vista-frame">
          <picture>
            <source
              type="image/webp"
              srcSet="/assets/rio-grande-800.webp 800w, /assets/rio-grande-1600.webp 1600w"
              sizes="(max-width: 880px) 100vw, min(1480px, 100vw)"
            />
            <img
              src="/assets/rio-grande-1600.jpg"
              srcSet="/assets/rio-grande-800.jpg 800w, /assets/rio-grande-1600.jpg 1600w"
              sizes="(max-width: 880px) 100vw, min(1480px, 100vw)"
              width="1600" height="1179"
              alt="A bull elk grazing along the Rio Grande, snow-capped mountains in the distance"
              loading="lazy"
              decoding="async"
            />
          </picture>
          <div className="vista-caption">
            <span className="vista-eyebrow">From where we work</span>
            <span className="vista-place"><em>The Rio Grande</em> · its valley runs from southern Colorado to the Gulf, right past Las Cruces.</span>
          </div>
          <span className="vista-credit">Photo: American Rivers · placeholder</span>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Reveal>
            <Eyebrow>Why choose us</Eyebrow>
            <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '12px 0 48px', letterSpacing: '-0.025em', fontWeight: 600, maxWidth: 720 }}>
              Not a big faceless agency — your <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--rg-clay-500)' }}>neighbors</em>.
            </h2>
          </Reveal>
          <Reveal as="div" stagger className="services-grid">
            <Spotlight className="service-card">
              <div className="ico"><Icon name="map-pin" size={24} /></div>
              <h3>Local &amp; personal</h3>
              <p>We're from Las Cruces and genuinely care about helping our community grow online.</p>
            </Spotlight>
            <Spotlight className="service-card t tone-turq">
              <div className="ico"><Icon name="heart" size={24} /></div>
              <h3>Beginner-friendly</h3>
              <p>Never had a website before? No problem. We explain everything in plain language — no tech jargon.</p>
            </Spotlight>
            <Spotlight className="service-card y tone-yellow">
              <div className="ico"><Icon name="sun" size={24} /></div>
              <h3>Affordable pricing</h3>
              <p>Professional websites at prices that work for small businesses and startups.</p>
            </Spotlight>
          </Reveal>
        </div>
      </section>

      <section className="section interlude">
        <div className="container interlude-grid">
          <Reveal>
            <div className="interlude-eyebrow">
              <span className="dot" aria-hidden="true" />
              Our promise
            </div>
            <h2 className="interlude-quote">
              We build websites the <em>old way</em> — by hand, line by line — so yours loads fast, looks right on every screen, and still feels personal a year from now.
            </h2>
            <div className="interlude-sig">
              <span>— The Rio Grande team</span>
              <span className="city">Las Cruces, NM</span>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section process">
        <div className="container">
          <Reveal>
            <div className="process-head">
              <div>
                <Eyebrow>How we work</Eyebrow>
                <h2>Four steps, from <em>hello</em> to launch.</h2>
              </div>
              <p>A simple, friendly process. No surprise invoices, no jargon — just a clear path to your new website, and most go live in under a week.</p>
            </div>
          </Reveal>
          <Reveal as="div" stagger className="process-grid">
            <div className="process-step">
              <div className="num">01</div>
              <h4>We talk</h4>
              <p>Tell us about your business. We listen, ask questions, and sketch out what your site should do.</p>
            </div>
            <div className="process-step">
              <div className="num">02</div>
              <h4>We design</h4>
              <p>You see a first design within a day or two. We revise together until it feels right — no surprises.</p>
            </div>
            <div className="process-step">
              <div className="num">03</div>
              <h4>We build</h4>
              <p>We hand-code the site to be fast, accessible, and easy to update. You stay in the loop.</p>
            </div>
            <div className="process-step">
              <div className="num">04</div>
              <h4>We launch</h4>
              <p>We connect your domain, double-check every page, and flip the switch. Then we're around if you need us.</p>
            </div>
          </Reveal>
        </div>
      </section>

      <Portfolio setPage={setPage} />

      <FAQ setPage={setPage} />

      <SeoContent setPage={setPage} />

      <section className="section">
        <div className="container">
          <Reveal as="div" className="cta">
            <Eyebrow>Ready when you are</Eyebrow>
            <h2>Let's build your <em>website</em>.</h2>
            <p>Tell us a little about your project — a new website, a redesign, or just a question. We reply within 24–48 hours, and the first quote is always free.</p>
            <Button variant="primary" icon="arrow-up-right" onClick={() => setPage('contact')}>Get a free quote</Button>
          </Reveal>
        </div>
      </section>
    </>
  );
}

// ============================================================
// PORTFOLIO — example projects (placeholders until real work ships)
// ============================================================
function Portfolio({ setPage }) {
  const projects = [
    {
      tone: 'clay', icon: 'truck', type: 'Food truck & street food',
      name: 'Taco truck template',
      problem: 'Food trucks live on social media, so customers can rarely find the current menu, hours, or where to park.',
      solution: 'A bright, mobile-first template with the menu, hours, a map, and a tap-to-book form — ready for a real truck\'s name and photos.',
      tech: 'Hand-coded HTML & CSS · responsive images · menu & booking form',
      result: 'A working demo a local taco truck can make their own in a day instead of a buried Instagram bio.',
      link: 'https://taco-truck-template.pages.dev/',
      cover: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&w=900&q=80',
    },
    {
      tone: 'turq', icon: 'pill', type: 'Health & wellness tool',
      name: 'StackSafe',
      problem: 'People take supplements and medications together with no simple way to check for interactions, redundancies, or bad timing.',
      solution: 'A focused web app where you list your stack and get an instant, readable analysis of interactions, redundancies, timing, and dosage.',
      tech: 'Custom design & build · interaction logic · responsive layout',
      result: 'A fast, clear tool that turns a confusing pile of bottles into one simple safety check.',
      link: 'https://stacksafe.health/',
      cover: '/assets/stacksafe-cover.jpg',
    },
    {
      tone: 'yellow', icon: 'flower-2', type: 'Boutique & retail',
      name: 'Calle Real Goods',
      problem: 'A social-media-only shop with nowhere to send serious buyers and no presence in local search.',
      solution: 'A small, polished website with a lookbook, store details, and SEO foundations aimed at southern New Mexico shoppers.',
      tech: 'Custom design · on-page SEO · image optimization',
      result: 'A real home base that shows up in local search instead of disappearing in a feed.',
    },
  ];
  return (
    <section className="section" id="work">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div>
              <Eyebrow>Selected projects</Eyebrow>
              <h2>How we help <em>local</em> businesses.</h2>
            </div>
            <p style={{ fontSize: 16, color: 'var(--rg-fg-soft)', maxWidth: 360, margin: 0 }}>
              Example projects that show how we approach common goals for small businesses in Las Cruces and El&nbsp;Paso.
            </p>
          </div>
        </Reveal>
        <Reveal as="div" stagger className="portfolio-grid">
          {projects.map((p) => (
            <Spotlight key={p.name} className={`portfolio-card ${p.tone === 'turq' ? 'tone-turq' : p.tone === 'yellow' ? 'tone-yellow' : ''}`}>
              <div className={`pf-cover pf-${p.tone}`}>
                {p.cover
                  ? <img className="pf-img" src={p.cover} alt={`${p.name} preview`} loading="lazy" width="900" height="563" />
                  : <Icon name={p.icon} size={40} stroke={1.4} />}
                <span className="pf-type">{p.type}</span>
              </div>
              <div className="pf-body">
                <h3>{p.name}</h3>
                <dl className="pf-dl">
                  <dt>Problem</dt><dd>{p.problem}</dd>
                  <dt>What we did</dt><dd>{p.solution}</dd>
                  <dt>Built with</dt><dd>{p.tech}</dd>
                  <dt>Result</dt><dd>{p.result}</dd>
                </dl>
                {p.link && (
                  <a className="pf-link" href={p.link} target="_blank" rel="noopener noreferrer">
                    View it live
                    <Icon name="arrow-up-right" size={15} stroke={1.6} />
                  </a>
                )}
              </div>
            </Spotlight>
          ))}
        </Reveal>
        <Reveal>
          <p style={{ fontSize: 14, color: 'var(--rg-fg-muted)', marginTop: 28 }}>
            These are example projects that illustrate our process. Want to be one of our first published case studies?{' '}
            <a href="#contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>Start a project</a>.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FAQ — homepage (mirrored in JSON-LD FAQPage schema in index.html)
// ============================================================
const FAQS = [
  {
    q: 'How much does a website cost in Las Cruces?',
    a: 'Most small-business websites with us start at $750 up front for design and development, with an optional Support & Maintenance Retainer at $20/month. The exact price depends on how many pages you need and what the site has to do. We give every Las Cruces and El Paso business a free, specific quote before any work begins — no surprise invoices.',
  },
  {
    q: 'How long does a website take to build?',
    a: 'Most small-business websites go live in under a week. Once we have your content and photos, you usually see a first design within a day or two, then we refine it together and launch. Larger or more complex sites can take a little longer, but we always agree on a clear timeline up front.',
  },
  {
    q: 'Do you redesign existing websites?',
    a: 'Yes. Website redesigns are a big part of what we do. If your current site is slow, hard to use on a phone, or just looks dated, we can rebuild it to be faster, mobile-friendly, and easier to update — usually while keeping the content and search rankings you already have.',
  },
  {
    q: 'Do you offer support and maintenance after launch?',
    a: 'Yes. Your site runs on Cloudflare\'s global edge network at no separate hosting fee. We offer an optional Technical Support & Maintenance Retainer for $20/month — think of it as a dedicated web team on call. Need a phone number updated, a new photo added, or a holiday notice posted? Just email us and we handle it within 24–48 business hours. You can also manage everything yourself if you prefer — we are happy either way.',
  },
  {
    q: 'Do you work with businesses in El Paso?',
    a: 'Absolutely. We are based in Las Cruces, but El Paso is right down the road and we work with businesses throughout the region, including Mesilla, Anthony, Sunland Park, and the wider southern New Mexico and west Texas area.',
  },
  {
    q: 'Do you offer SEO?',
    a: 'Yes. Every site we build includes SEO foundations — clean code, fast load times, mobile-friendly layouts, proper titles and descriptions, and local business markup so you can show up in Las Cruces and El Paso searches. We also offer ongoing local SEO help for businesses that want to climb higher in Google results over time.',
  },
];

function FAQ({ setPage }) {
  return (
    <section className="section faq-section" id="faq">
      <div className="container">
        <Reveal>
          <Eyebrow>Common questions</Eyebrow>
          <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '12px 0 40px', letterSpacing: '-0.025em', fontWeight: 600, maxWidth: 640 }}>
            Answers before you <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--rg-clay-500)' }}>ask</em>.
          </h2>
        </Reveal>
        <Reveal as="div" className="faq-list">
          {FAQS.map((f, i) => (
            <details className="faq-item" key={i} name="home-faq">
              <summary>
                <span>{f.q}</span>
                <span className="faq-mark" aria-hidden="true"><Icon name="plus" size={18} stroke={2} /></span>
              </summary>
              <div className="faq-answer"><p>{f.a}</p></div>
            </details>
          ))}
        </Reveal>
        <Reveal>
          <p style={{ fontSize: 16, color: 'var(--rg-fg-soft)', marginTop: 28 }}>
            Still have a question?{' '}
            <a href="#contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>Send us a message</a> — we reply within 24–48 hours.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// SEO CONTENT — long-form, human-first local copy near page bottom
// ============================================================
function SeoContent({ setPage }) {
  const go = (k) => (e) => { e.preventDefault(); setPage(k); };
  return (
    <section className="section seo-prose" aria-labelledby="seo-prose-h">
      <div className="container">
        <Reveal>
          <Eyebrow>Web design in Las Cruces &amp; El Paso</Eyebrow>
          <h2 id="seo-prose-h" style={{ fontSize: 'clamp(30px, 4vw, 48px)', margin: '12px 0 28px', letterSpacing: '-0.025em', fontWeight: 600, maxWidth: 760 }}>
            A local web design team built for small businesses in southern New Mexico.
          </h2>
        </Reveal>
        <Reveal as="div" className="prose">
          <p>
            Rio Grande Websites is a small web design and web development team based in Las Cruces, New Mexico. We build
            websites for small businesses across the region — from downtown Las Cruces and Mesilla to Las Cruces&apos;s
            neighbors in El Paso and the wider southern New Mexico area. Our work is simple to describe: clean, modern,
            affordable websites that load fast, look right on every screen, and help local owners get found by the people
            already searching for them. If you run a café, a trades business, a boutique, a clinic, or a one-person shop,
            you are exactly who we build for.
          </p>
          <p>
            A good website is the hardest-working part of a small business&apos;s marketing. It answers questions at 11pm,
            shows up when someone searches &ldquo;web designer near me,&rdquo; and gives new customers a reason to trust
            you before they ever walk in. Whether your customers are here in Las Cruces, down the road in El Paso, or
            anywhere across southern New Mexico, the same thing is true: the businesses that are easy to find and easy to
            trust online are the ones that grow. Below is a plain-language look at what we do and how each piece helps.
          </p>

          <h3>Website design</h3>
          <p>
            Every project starts with <strong>website design</strong> that fits your business, not a generic template.
            We design around what your customers actually need to do — find your hours, see your menu or services, read a
            few reviews, and get in touch. We hand-build each site so it stays fast and personal instead of bloated with
            page-builder clutter. The result is a website that feels like your business: warm, professional, and easy to
            use. And because we hand-build lean sites instead of wrestling with bloated page builders, most go live in
            under a week. If you are specifically looking for{' '}
            <a href="/web-design-las-cruces">web design in Las Cruces</a>, that page goes deeper on our local approach.
          </p>

          <h3>Website redesign</h3>
          <p>
            Plenty of businesses already have a site — it is just slow, dated, or impossible to use on a phone. A{' '}
            <a href="/website-redesign">website redesign</a> fixes that without starting your reputation from scratch. We
            keep the content and search history that already work, then rebuild the design, speed, and structure so the
            site competes again. A redesign is often the fastest way to turn a website that quietly loses customers into
            one that earns them.
          </p>

          <h3>Mobile optimization</h3>
          <p>
            Most people in Las Cruces and El Paso will see your website on a phone first. If it is hard to tap, slow to
            load, or zoomed out and tiny, they leave — and Google notices. We design mobile-first, which means we get the
            phone experience right before we ever worry about the desktop version. Buttons are easy to tap, text is easy
            to read, and your phone number and directions are never more than a tap away. Mobile optimization is not a
            nice-to-have anymore; it is most of your traffic.
          </p>

          <h3>SEO foundations</h3>
          <p>
            A beautiful website that nobody can find does not help your business. That is why every site we build ships
            with <strong>SEO</strong> foundations included: clean, fast code, mobile-friendly layouts, sensible page
            titles and descriptions, image optimization, and local business markup that tells search engines where you
            are and what you do. These basics help you appear in local searches like &ldquo;website design Las
            Cruces&rdquo; or &ldquo;web design El Paso.&rdquo; For businesses that want to rank higher over time, our{' '}
            <a href="/seo-las-cruces">local SEO services</a> go further with ongoing work on content, reviews, and your
            Google Business Profile.
          </p>

          <h3>Support &amp; maintenance retainer</h3>
          <p>
            Once your site is live, it runs on Cloudflare's global edge network — enterprise-grade infrastructure, 99.9%
            uptime, and DDoS protection included at no separate hosting fee. Our optional $20/month retainer adds a
            dedicated support relationship on top of that. Need a phone number updated, a new photo added, or a holiday
            notice posted? Just email us and we handle it within 24–48 business hours — no login, no dashboard, no
            technical knowledge required on your end. Think of it as having a web team on call for less than the cost of
            a daily cup of coffee.
          </p>

          <h3>Local business growth</h3>
          <p>
            The point of all of this is growth. A clear, fast, findable website turns more of your visitors into phone
            calls, form submissions, and walk-ins. We focus on the things that actually move the needle for a small
            business: showing up in local search, making it obvious how to contact you, and building enough trust that
            people choose you over the bigger name down the street. Whether you are a brand-new business or an
            established shop that never had a proper site, good <a href="/small-business-websites">small business
            websites</a> pay for themselves over time.
          </p>

          <p>
            We are local, we are beginner-friendly, and we explain everything in plain language. If this is your first
            website, we will walk you through every step. If it is your fifth, we will skip the parts you already know.
            Either way, you work directly with the people building your site — neighbors in Las Cruces, not a faceless
            agency three time zones away.{' '}
            <a href="#contact" onClick={go('contact')}>Get a free quote</a> or{' '}
            <a href="#services" onClick={go('services')}>see everything we offer</a> to get started.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// SERVICES & PRICING
// ============================================================
function Services({ setPage }) {
  const services = [
    'Custom website design & development',
    'Responsive / mobile-friendly websites',
    'Technical support & maintenance retainer',
    'Landing pages for small businesses',
    'Website redesigns & updates',
    'Basic SEO setup',
    'Ongoing website maintenance',
  ];
  return (
    <section className="section" style={{ paddingTop: 160 }}>
      <div className="container">
        <Reveal>
          <Eyebrow>Services &amp; pricing</Eyebrow>
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.98, letterSpacing: '-0.03em', margin: '16px 0 24px', maxWidth: '14ch', fontWeight: 600 }}>
            Simple pricing, <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--rg-clay-500)' }}>clear</em> work.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--rg-fg-soft)', maxWidth: 560, marginBottom: 64 }}>
            Every project is a little different. Below is what most clients pick — reach out for a free quote tailored to your needs.
          </p>
        </Reveal>

        <Reveal as="div" stagger className="pricing-grid">
          <Spotlight className="service-card" style={{ padding: '40px 36px' }}>
            <Eyebrow>Design &amp; development</Eyebrow>
            <h3 style={{ fontSize: 32, marginTop: 16 }}><span style={{ color: 'var(--rg-clay-500)' }}>$<Counter to={T().setupPrice ?? 750} /><span style={{ fontSize: 18, color: 'var(--rg-fg-muted)', fontWeight: 500 }}> · one-time</span></span></h3>
            <p>A new website, designed and built for you — paid up front. We talk through what you need, sketch it, build it, and launch it.</p>
            <Button variant="secondary" icon="arrow-up-right" onClick={() => setPage('contact')}>Get a quote</Button>
          </Spotlight>
          <Spotlight className="service-card t tone-turq" style={{ padding: '40px 36px' }}>
            <Eyebrow>Support & maintenance retainer</Eyebrow>
            <h3 style={{ fontSize: 32, marginTop: 16 }}><span style={{ color: 'var(--rg-turq-700)' }}>$<Counter to={T().hostingPrice ?? 20} /><span style={{ fontSize: 18, color: 'var(--rg-fg-muted)', fontWeight: 500 }}> / month</span></span></h3>
            <p>Optional — your site runs on Cloudflare's global edge network at no extra hosting fee. This retainer adds direct support: need a phone number changed, a photo updated, or a holiday notice added? Just email us and we handle it within 24–48 hours.</p>
            <Button variant="secondary" onClick={() => setPage('contact')}>Learn more</Button>
          </Spotlight>
        </Reveal>

        <Reveal>
          <Eyebrow>Everything we offer</Eyebrow>
          <ul className="everything-list">
            {services.map((s, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 0', borderBottom: '1px solid var(--rg-line)', fontSize: 17, color: 'var(--rg-fg)' }}>
                <span style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--rg-clay-100)', color: 'var(--rg-clay-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name="check" size={16} stroke={2.25} />
                </span>
                {s}
              </li>
            ))}
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// ABOUT — team
// ============================================================
function About({ setPage }) {
  const team = [
    { tone: 'turq',    icon: 'lightbulb',   role: 'Founder & marketing',    name: 'Keith',  about: 'The reason Rio Grande Websites exists — Keith had the idea to start the studio and still sets its direction. He leads the team and runs our marketing, and he\'s the one who turns a rough thought into a plan worth building.', skills: 'Ideas · Strategy · Marketing · Leadership' },
    { tone: 'clay',    icon: 'search',      role: 'Design, build & SEO',    name: 'Andres', about: 'The hands-on half of the work — Andres designs each site, builds it by hand, and does the SEO that helps it get found. If you searched your way to this page, that\'s his doing.', skills: 'Web design · Development · SEO · Local search' },
    { tone: 'yellow',  icon: 'user-search', role: 'Outreach',               name: 'Carlos', about: 'The connector — Carlos finds local businesses that could use a better website and gets a real conversation started, so the rest of the team always has people to help.', skills: 'Prospecting · Outreach · Local connections · Follow-up' },
  ];
  return (
    <>
      <section className="section about-hero">
        <div className="container">
          <Reveal>
            <Eyebrow>About us</Eyebrow>
            <h1>Three of us, <em>made</em> in Las&nbsp;Cruces.</h1>
          </Reveal>
          <Reveal as="div" stagger className="about-grid">
            <div>
              <p>Rio Grande Websites is a small local team. We started because we wanted to help small businesses and individuals around Las Cruces show up online — without the markup, the jargon, or the runaround.</p>
              <p>We're beginner-friendly on purpose. If this is your first website, we'll walk you through every step in plain language. If it's your fifth, we'll skip the part you already know.</p>
              <p>Either way, you talk to a real person who lives down the road.</p>
              <Button variant="primary" icon="arrow-up-right" onClick={() => setPage('contact')}>Get in touch</Button>
            </div>
            <div
              className="about-image"
              role="img"
              aria-label="A warm portrait of the southwest"
              style={{ backgroundImage: `url(${PHOTOS.about})` }}
            />
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <Reveal>
            <Eyebrow>Meet the team</Eyebrow>
            <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '12px 0 48px', letterSpacing: '-0.025em', fontWeight: 600 }}>The people behind your site.</h2>
          </Reveal>
          <Reveal as="div" stagger className="team-grid">
            {team.map((p) => (
              <Tilt key={p.role} className="team-card" max={5}>
                <div className="ph" style={{
                  background: p.tone === 'clay'   ? 'linear-gradient(160deg, #EBCEC1, #A65540)'
                            : p.tone === 'turq'   ? 'linear-gradient(160deg, #C7D9D5, #2D5F58)'
                            :                       'linear-gradient(160deg, #ECD9A4, #C49543)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(31,26,20,0.55)',
                }}>
                  <Icon name={p.icon} size={56} stroke={1.4} />
                </div>
                <div className="body" style={{ padding: '24px 26px 28px' }}>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--rg-clay-700)' }}>{p.role}</div>
                  <div className="name" style={{ marginTop: 6, fontSize: 22 }}>{p.name}</div>
                  <p style={{ fontSize: 14, color: 'var(--rg-fg-soft)', lineHeight: 1.6, margin: '12px 0 16px' }}>{p.about}</p>
                  <div style={{ fontSize: 12, color: 'var(--rg-fg-muted)', paddingTop: 14, borderTop: '1px solid var(--rg-line)' }}>{p.skills}</div>
                </div>
              </Tilt>
            ))}
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Reveal>
            <Eyebrow>Client testimonials</Eyebrow>
            <h2 style={{ fontSize: 'clamp(32px, 4.5vw, 56px)', margin: '12px 0 32px', letterSpacing: '-0.025em', fontWeight: 600 }}>
              Coming <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--rg-clay-500)' }}>soon</em>.
            </h2>
            <Spotlight className="testimonial-card">
              <span className="mark" aria-hidden="true">&ldquo;</span>
              <p style={{ fontSize: 18, color: 'var(--rg-fg-muted)', margin: 0, fontStyle: 'italic' }}>
                [ Client quote will go here once we collect our first reviews. ]
              </p>
              <div style={{ marginTop: 16, fontSize: 13, color: 'var(--rg-fg-muted)' }}>— [Client name], [Business or Location]</div>
            </Spotlight>
          </Reveal>
        </div>
      </section>
    </>
  );
}

// ============================================================
// CONTACT
// ============================================================
// Web3Forms key — public on purpose; allowed-domain check happens server-side.
const WEB3FORMS_KEY = 'e604b3f7-cb22-4cac-9a02-1994aa24ab4f';

function Contact() {
  const [status, setStatus] = useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = useState('');
  const [form, setForm] = useState({ name: '', email: '', project: 'New website', message: '' });
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setErrorMsg('');
    try {
      const fd = new FormData(e.currentTarget);
      // Honeypot: if filled, it's a bot — silently no-op.
      if (fd.get('botcheck')) { setStatus('sent'); return; }
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: fd,
      });
      const data = await res.json();
      if (data.success) {
        setStatus('sent');
        setForm({ name: '', email: '', project: 'New website', message: '' });
      } else {
        setStatus('error');
        setErrorMsg(data.message || 'Something went wrong. Please email us directly.');
      }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Network error. Please email us directly.');
    }
  };

  const btnLabel =
    status === 'sending' ? 'Sending…' :
    status === 'sent'    ? 'Sent — talk soon' :
                           'Send';
  return (
    <section className="section" style={{ paddingTop: 160 }}>
      <div className="container">
        <Reveal>
          <Eyebrow>Contact us</Eyebrow>
          <h1 style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.98, letterSpacing: '-0.03em', margin: '16px 0 16px', maxWidth: '14ch', fontWeight: 600 }}>
            Ready to <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--rg-clay-500)' }}>get</em> started?
          </h1>
          <p style={{ fontSize: 18, color: 'var(--rg-fg-soft)', maxWidth: 540 }}>
            Reach out — we'd love to hear about your project. We reply within 24–48 hours.
          </p>
        </Reveal>
        <Reveal as="div" stagger className="contact-grid">
          <div className="contact-info">
            <Spotlight className="row">
              <div className="ico"><Icon name="mail" size={20} /></div>
              <div><div className="lbl">Email</div><div className="val">contact@riograndeweb.com</div></div>
            </Spotlight>
            <Spotlight className="row tone-turq">
              <div className="ico"><Icon name="map-pin" size={20} /></div>
              <div><div className="lbl">Location</div><div className="val">Las Cruces, New Mexico</div></div>
            </Spotlight>
            <Spotlight className="row tone-yellow">
              <div className="ico"><Icon name="sun" size={20} /></div>
              <div><div className="lbl">Response time</div><div className="val">Within 24&ndash;48 hours</div></div>
            </Spotlight>
          </div>
          <form className="contact-form" onSubmit={submit}>
            <input type="hidden" name="access_key" value={WEB3FORMS_KEY} />
            <input type="hidden" name="subject" value="New project inquiry — Rio Grande Websites" />
            <input type="hidden" name="from_name" value={form.name || 'Website inquiry'} />
            {/* Honeypot — hidden from real users via inline style */}
            <input type="checkbox" name="botcheck" tabIndex="-1" autoComplete="off"
                   style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
            <div className="contact-row">
              <div className="field"><label>Your name</label><input name="name" required value={form.name} onChange={upd('name')} placeholder="Your name" /></div>
              <div className="field"><label>Email</label><input type="email" name="email" required value={form.email} onChange={upd('email')} placeholder="you@example.com" /></div>
            </div>
            <div className="field">
              <label>What do you need?</label>
              <select name="project" value={form.project} onChange={upd('project')}>
                <option>New website</option>
                <option>Website redesign</option>
                <option>Landing page</option>
                <option>Hosting only</option>
                <option>Maintenance / updates</option>
                <option>Something else</option>
              </select>
            </div>
            <div className="field">
              <label>Tell us a little about your project</label>
              <textarea rows="5" name="message" required value={form.message} onChange={upd('message')} placeholder="A few sentences is plenty — we'll follow up with questions." />
            </div>
            <Button variant="primary" icon="arrow-up-right">{btnLabel}</Button>
            {status === 'sent' && (
              <div role="status" style={{ fontSize: 14, color: 'var(--rg-success)', marginTop: 4 }}>
                Thanks — we got your message and will be in touch within 24–48 hours.
              </div>
            )}
            {status === 'error' && (
              <div role="alert" style={{ fontSize: 14, color: 'var(--rg-error)', marginTop: 4 }}>
                {errorMsg} <a href="mailto:contact@riograndeweb.com">contact@riograndeweb.com</a>
              </div>
            )}
          </form>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Home, Services, About, Contact });