/* Genesis DMA — About, Contact, NotFound */
const { useState: _usA, useEffect: _ueA } = React;

function AboutPage() {
  const crumbs = [{ path: '/', label: 'Home' }, { path: '/about', label: 'About' }];
  useSEO({
    title: 'About Genesis DMA — Operator-first growth agency in Houston',
    description: 'Genesis DMA is an operator-first growth agency based in Houston, TX, serving service businesses across the United States. Built for teams that care about the numbers.',
    path: '/about',
    jsonLd: [
      ldOrganization(),
      { "@context": "https://schema.org", "@type": "AboutPage", "url": SITE.url + "/about", "name": "About Genesis DMA",
        "about": { "@id": SITE.url + "#organization" } },
      ldBreadcrumb(crumbs),
    ],
  });
  return (
    <main>
      <section className="relative pt-40 pb-20 md:pt-48 md:pb-28 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal as="h1" className="mt-10 font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(3rem, 7.5vw, 6.5rem)', lineHeight: 0.98, letterSpacing: '-0.035em' }}>
            An <span className="text-teal">operator-first</span> growth agency.
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">
            Genesis DMA was built for operators who care about the numbers. Based in Houston. Serving the United States. Focused on service businesses and growth-stage founders.
          </Reveal>
        </div>
      </section>

      <Section label="Who we are" title="A small team that does the work itself.">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
          <div className="md:col-span-8 space-y-6 text-lg text-sub leading-relaxed" style={{ textWrap: 'pretty' }}>
            <Reveal as="p">Genesis DMA is a growth agency founded in 2021 and based in Houston, Texas. We serve service businesses across the United States — cleaning companies, home services, auto, medical, professional trades — the operators whose growth depends on predictable lead flow and disciplined unit economics.</Reveal>
            <Reveal as="p" delay={60}>We are a small, senior team. The person who sells the engagement is the person who builds the account. We do not route work through junior planners. We do not ship strategy decks as a deliverable. We ship systems.</Reveal>
            <Reveal as="p" delay={120}>We work across six disciplines — paid media, search and GEO, CRM, automation, content and analytics — because the boundary between them is where most agencies drop the ball. A paid media win that never reaches the CRM is not a win. An automation that never touches ad spend is a toy.</Reveal>
            <Reveal as="p" delay={180}>We are opinionated about tools: GoHighLevel for CRM under 50 users, n8n for production automation, GA4 + CallRail + offline conversion import for attribution. We will tell you when a tool is wrong for the job, including our own.</Reveal>
            <Reveal as="p" delay={240}>We take on a small number of engagements at a time. We do not scale by hiring account managers. We scale by making the system we run faster.</Reveal>
          </div>
          <aside className="md:col-span-4">
            <Reveal className="border border-line2 p-8 bg-surface sticky top-28">
              <div className="text-xs uppercase tracking-[0.2em] text-teal mb-6">By the numbers</div>
              <ul className="space-y-6">
                <li><div className="text-4xl font-semibold text-white" style={{ letterSpacing: '-0.03em' }}><Counter to={5} />+ yrs</div><div className="text-muted text-sm mt-1">Running paid media and growth systems.</div></li>
                <li><div className="text-4xl font-semibold text-white" style={{ letterSpacing: '-0.03em' }}>$<Counter to={42} />/10M+</div><div className="text-muted text-sm mt-1">Ad spend managed across Meta and Google.</div></li>
                <li><div className="text-4xl font-semibold text-white" style={{ letterSpacing: '-0.03em' }}><Counter to={12} />+ verticals</div><div className="text-muted text-sm mt-1">Cleaning, HVAC, dental, medspas, legal and more.</div></li>
                <li><div className="text-4xl font-semibold text-white" style={{ letterSpacing: '-0.03em' }}><Counter to={247} /></div><div className="text-muted text-sm mt-1">Automated workflows live in production.</div></li>
              </ul>
            </Reveal>
          </aside>
        </div>
      </Section>

      <Section label="Philosophy" title="Three ideas we refuse to give up on.">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
          {[
            ['Systems over tactics.',   'Tactics stop working. Systems keep compounding because they are built to be measured, improved and extended.'],
            ['Data over opinions.',     'We do not argue about creative or channels. We put a number on it, ship the test, and let the data end the conversation.'],
            ['Compound over campaigns.','A campaign ends. A system that generates leads, converts them and learns from every deal keeps paying for years.'],
          ].map(([t, d], i) => (
            <Reveal key={t} delay={i*100} className="philos-item">
              <h3 className="text-white font-semibold" style={{ fontSize: 'clamp(1.75rem, 2.5vw, 2.25rem)', lineHeight: 1.1, letterSpacing: '-0.02em' }}>{t}</h3>
              <p className="text-sub mt-5 leading-relaxed">{d}</p>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section label="How we work" title="The practical bits.">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-line">
          {[
            ['Engagements', 'A 60-day build-and-launch commitment, then 30-day rolling terms. No multi-year handcuffs.'],
            ['Team',         'Senior operators on every account. The person selling the engagement is the person building it.'],
            ['Reporting',    'One honest dashboard. Weekly written notes. Monthly strategic review. No slide-deck theater.'],
            ['Ownership',    'You own the accounts, the data, the creative and the documentation. We keep docs in your Drive.'],
          ].map(([t, d], i) => (
            <Reveal key={t} delay={i*60} className="bg-bg p-8">
              <h3 className="text-white font-semibold text-xl" style={{ letterSpacing: '-0.015em' }}>{t}</h3>
              <p className="text-sub mt-3 leading-relaxed">{d}</p>
            </Reveal>
          ))}
        </div>
      </Section>

      <section className="container-x py-16 text-center">
        <Reveal as="h2" className="font-semibold text-white max-w-3xl mx-auto" style={{ fontSize: 'clamp(2.25rem, 5vw, 4rem)', lineHeight: 1.05, letterSpacing: '-0.03em' }}>
          If this sounds like a fit, <span className="text-teal">let's talk.</span>
        </Reveal>
        <Reveal delay={120} className="mt-10 flex justify-center gap-4 flex-wrap">
          <BtnPrimary href="#/contact">Start a conversation</BtnPrimary>
          <BtnGhost href="#/capabilities/paid-media">See the capabilities</BtnGhost>
        </Reveal>
      </section>
    </main>
  );
}

/* --- Contact --- */
function ContactPage() {
  const crumbs = [{ path: '/', label: 'Home' }, { path: '/contact', label: 'Contact' }];
  const [form, setForm] = _usA({ name: '', email: '', company: '', message: '' });
  const [sent, setSent] = _usA(false);

  useSEO({
    title: 'Contact Genesis DMA — Houston, TX',
    description: 'Start a conversation with Genesis DMA. Based in Houston, TX, serving service businesses across the United States.',
    path: '/contact',
    jsonLd: [
      ldOrganization(),
      ldLocalBusiness(),
      { "@context": "https://schema.org", "@type": "ContactPage", "url": SITE.url + "/contact", "name": "Contact Genesis DMA" },
      ldBreadcrumb(crumbs),
    ],
  });

  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <main>
      <section className="relative pt-40 pb-20 md:pt-48 md:pb-24 overflow-hidden">
        <div aria-hidden="true" className="absolute inset-0 dot-grid opacity-60 pointer-events-none" />
        <div className="absolute -top-20 -left-20 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
             style={{ background: 'radial-gradient(circle, rgba(45,212,191,0.15), transparent 70%)', filter: 'blur(60px)' }} />
        <div className="container-x relative">
          <Reveal><Breadcrumb items={crumbs} /></Reveal>
          <Reveal as="h1" className="mt-10 font-semibold text-white max-w-5xl" style={{ fontSize: 'clamp(3rem, 7.5vw, 6.5rem)', lineHeight: 0.98, letterSpacing: '-0.035em' }}>
            Start a <span className="text-teal">conversation.</span>
          </Reveal>
          <Reveal delay={120} className="text-sub text-lg md:text-xl mt-8 max-w-2xl leading-relaxed">
            Bring your numbers — spend, CAC, payback, where you want to be in 12 months. We will bring a plan you can run with or without us.
          </Reveal>
        </div>
      </section>

      <section className="container-x pb-16">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <div className="lg:col-span-7">
            {sent ? (
              <Reveal className="border border-teal/50 p-10 bg-surface">
                <div className="text-teal text-xs tracking-[0.2em] uppercase">Message received</div>
                <h2 className="text-3xl text-white font-semibold mt-4" style={{ letterSpacing: '-0.02em' }}>Thanks, {form.name.split(' ')[0] || 'operator'}.</h2>
                <p className="text-sub mt-4 leading-relaxed">Expect an email from a real person at {SITE.email} within one business day. If it is urgent, call us directly — the number is on the right.</p>
                <button className="mt-8 text-teal link-underline text-sm" onClick={() => { setSent(false); setForm({ name:'', email:'', company:'', message:'' }); }}>Send another</button>
              </Reveal>
            ) : (
              <Reveal>
                <form onSubmit={submit} className="border border-line2 p-8 md:p-10 bg-surface" aria-labelledby="contact-h">
                  <h2 id="contact-h" className="text-2xl text-white font-semibold mb-8" style={{ letterSpacing: '-0.02em' }}>Send a note.</h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <label className="block"><span className="block text-xs tracking-[0.2em] uppercase text-muted mb-2">Name</span>
                      <input required className="inp" value={form.name} onChange={e => setForm(f => ({...f, name: e.target.value}))} /></label>
                    <label className="block"><span className="block text-xs tracking-[0.2em] uppercase text-muted mb-2">Email</span>
                      <input required type="email" className="inp" value={form.email} onChange={e => setForm(f => ({...f, email: e.target.value}))} /></label>
                    <label className="block md:col-span-2"><span className="block text-xs tracking-[0.2em] uppercase text-muted mb-2">Company</span>
                      <input className="inp" value={form.company} onChange={e => setForm(f => ({...f, company: e.target.value}))} /></label>
                    <label className="block md:col-span-2"><span className="block text-xs tracking-[0.2em] uppercase text-muted mb-2">What are you working on?</span>
                      <textarea required rows={5} className="inp" value={form.message} onChange={e => setForm(f => ({...f, message: e.target.value}))} /></label>
                  </div>
                  <div className="mt-8 flex items-center justify-between gap-4 flex-wrap">
                    <p className="text-xs text-muted max-w-sm">We reply within one business day. No drip sequences. No AI-written bullshit.</p>
                    <button type="submit" className="btn-primary">Send message<Ico.Arrow /></button>
                  </div>
                </form>
              </Reveal>
            )}
          </div>

          <aside className="lg:col-span-5 space-y-6">
            <Reveal className="border border-line2 p-8 bg-surface">
              <div className="text-xs uppercase tracking-[0.2em] text-teal mb-4">Direct</div>
              <ul className="space-y-4 text-sub">
                <li className="flex items-start gap-3"><span className="text-teal mt-1"><Ico.Mail /></span><a href={`mailto:${SITE.email}`} className="link-underline hover:text-white">{SITE.email}</a></li>
                <li className="flex items-start gap-3"><span className="text-teal mt-1"><Ico.Phone /></span><a href={`tel:${SITE.phone.replace(/[^0-9+]/g,'')}`} className="link-underline hover:text-white">{SITE.phone}</a></li>
                <li className="flex items-start gap-3"><span className="text-teal mt-1"><Ico.Pin /></span><span>{SITE.address}</span></li>
              </ul>
            </Reveal>

            <Reveal delay={80} className="border border-line2 p-8 bg-surface">
              <div className="text-xs uppercase tracking-[0.2em] text-teal mb-4">Book a 30-min call</div>
              <p className="text-sub text-sm mb-6">Pick a slot that works. We will send a calendar invite with a short agenda.</p>
              <a href={`mailto:${SITE.email}?subject=Book%20a%20call`} className="block border border-dashed border-line2 p-8 text-center hover:border-teal transition-colors group">
                <div className="text-teal font-medium group-hover:underline">Open scheduler</div>
                <div className="text-muted text-xs mt-2 font-mono">calendly.com/genesisdma</div>
              </a>
            </Reveal>

            <Reveal delay={160} className="border border-line2 p-8 bg-surface">
              <div className="text-xs uppercase tracking-[0.2em] text-teal mb-4">Hours</div>
              <ul className="space-y-1 text-sub text-sm font-mono">
                <li className="flex justify-between"><span>Mon–Fri</span><span>09:00–18:00 CT</span></li>
                <li className="flex justify-between"><span>Sat–Sun</span><span className="text-muted">Closed</span></li>
              </ul>
            </Reveal>
          </aside>
        </div>
      </section>
    </main>
  );
}

/* --- 404 --- */
function NotFoundPage() {
  useSEO({ title: 'Page not found — Genesis DMA', description: 'This page does not exist. Head back to Genesis DMA.', path: '/404' });
  return (
    <main className="container-x flex flex-col items-center justify-center text-center" style={{ minHeight: '80vh', paddingTop: '8rem' }}>
      <div className="text-teal text-xs tracking-[0.25em] uppercase mb-6">404</div>
      <h1 className="font-semibold text-white" style={{ fontSize: 'clamp(3rem, 8vw, 6rem)', lineHeight: 1, letterSpacing: '-0.03em' }}>Nothing here.</h1>
      <p className="text-sub mt-6 max-w-lg">The page you are looking for either moved or never existed. Head home and try again.</p>
      <div className="mt-10"><BtnPrimary href="#/">Back to home</BtnPrimary></div>
    </main>
  );
}

Object.assign(window, { AboutPage, ContactPage, NotFoundPage });