import type { CSSProperties, ReactNode } from "react";
import SiteHeader from "@/components/site-header";
import GlobeCanvas from "@/components/globe-canvas";
import RevealObserver from "@/components/reveal-observer";
import StatCounter from "@/components/stat-counter";
import Capabilities from "@/components/capabilities";
import QueryTicker from "@/components/query-ticker";
import ProductVisual from "@/components/product-visuals";
import Logo from "@/components/logo";
import { stats, products, journeySteps, gaps, footerColumns } from "@/content/home";

type Vars = CSSProperties & Record<`--${string}`, string | number>;
const delay = (ms: number) => ({ "--d": `${ms}ms` }) as Vars;

const Arrow = () => <span className="arrow">→</span>;

function Eyebrow({ index, children }: { index?: string; children: ReactNode }) {
  return (
    <p className="eyebrow">
      {index && <span className="idx">{index}</span>}
      {children}
    </p>
  );
}

export default function Home() {
  return (
    <>
      <a href="#main" className="skip-link">
        Skip to content
      </a>
      <SiteHeader />
      <RevealObserver />

      <main id="main">
        {/* ───────────────────────── Hero ───────────────────────── */}
        <section className="hero" id="top" aria-labelledby="hero-title">
          <GlobeCanvas />
          <div className="wrap hero-inner">
            <div data-reveal>
              <Eyebrow>Digital Growth Architects</Eyebrow>
            </div>
            <h1 id="hero-title" className="display h1" data-reveal style={delay(120)}>
              Where Search, AI, Media, and Technology Work Together.
            </h1>

            <div className="hero-grid">
              <div className="hero-lead lead" data-reveal style={delay(260)}>
                <p>
                  Your customer might find you through Google today, an AI answer tomorrow, and a paid ad three
                  days later.
                </p>
                <p className="muted">They don’t think in channels. Your growth strategy shouldn’t either.</p>
              </div>
              <div className="hero-body" data-reveal style={delay(380)}>
                <div className="copy">
                  <p>
                    AI Growth Technologies brings paid media, search, AI visibility, technology, and attribution
                    together so each part strengthens the others.
                  </p>
                  <p className="hl">One strategy. Connected execution. A clearer view of what is actually driving growth.</p>
                </div>
                <div className="hero-actions">
                  <a href="#contact" className="btn btn-solid">
                    Book a Strategy Call <Arrow />
                  </a>
                  <a href="#capabilities" className="btn btn-ghost">
                    Explore Services <Arrow />
                  </a>
                </div>
              </div>
            </div>

            <div className="hero-foot" data-reveal style={delay(520)}>
              <div className="hero-channels" aria-hidden="true">
                <span>Paid Media</span>
                <i />
                <span>Search</span>
                <i />
                <span>AI Visibility</span>
                <i />
                <span>Technology</span>
                <i />
                <span>Attribution</span>
              </div>
              <a href="#evidence" className="scroll-cue">
                Scroll <i />
              </a>
            </div>
          </div>
        </section>

        {/* ───────────────────────── Numbers ───────────────────────── */}
        <section className="section" id="evidence" aria-labelledby="evidence-title">
          <div className="wrap">
            <div className="section-head">
              <div className="title" data-reveal>
                <Eyebrow index="01">The Numbers Behind the Work</Eyebrow>
                <h2 id="evidence-title" className="display h2">
                  Good Growth Leaves Evidence.
                </h2>
              </div>
            </div>
            <div className="stats">
              {stats.map((s, i) => (
                <div key={s.label} className="stat" data-reveal style={delay(i * 120)}>
                  <StatCounter value={s.value} suffix={s.suffix} />
                  <div className="stat-label">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ───────────────────────── Capabilities ───────────────────────── */}
        <section className="section section-night" id="capabilities" aria-labelledby="cap-title">
          <div className="wrap">
            <div className="section-head">
              <div className="title" data-reveal>
                <Eyebrow index="02">Everything Works Better Connected</Eyebrow>
                <h2 id="cap-title" className="display h2">
                  Eight Capabilities.
                  <br />
                  One Growth Engine.
                </h2>
              </div>
            </div>
            <div className="split">
              <div className="lead" data-reveal>
                <p>
                  A search can lead to an ad. An ad can lead to a website visit. An AI answer can introduce the brand
                  before either happens.
                </p>
              </div>
              <div className="copy" data-reveal style={delay(140)}>
                <p>To your customer, that is not SEO, paid media, AI, and web.</p>
                <p className="hl">It is one experience with your business.</p>
                <p>Our capabilities are designed to work that way too.</p>
              </div>
            </div>
            <div data-reveal>
              <Capabilities />
            </div>
          </div>
        </section>

        {/* ───────────────────────── Proprietary technology ───────────────────────── */}
        <section className="section" id="technology" aria-labelledby="tech-title">
          <div className="wrap">
            <div className="section-head">
              <div className="title" data-reveal>
                <Eyebrow index="03">Proprietary Technology</Eyebrow>
                <h2 id="tech-title" className="display h2">
                  We Wanted Better Answers, So We Built Better Tools.
                </h2>
              </div>
            </div>
            <div className="split">
              <div className="lead" data-reveal>
                <p>Marketing produces plenty of numbers.</p>
                <p className="muted">The harder part is knowing which ones matter.</p>
              </div>
              <div className="copy" data-reveal style={delay(140)}>
                <p>
                  Our proprietary technology gives our teams and clients a clearer view across attribution, organic and
                  AI visibility, and digital resilience.
                </p>
                <p>
                  Not more data for the sake of it. <span className="hl">Better information for the decisions that come next.</span>
                </p>
              </div>
            </div>

            <div className="products">
              {products.map((p, i) => (
                <article key={p.name} className="product" aria-labelledby={`product-${i}`}>
                  <div className="product-visual" data-reveal>
                    <ProductVisual kind={p.visual} />
                  </div>
                  <div className="product-body" data-reveal style={delay(160)}>
                    <div className="product-kind">
                      <span>{String(i + 1).padStart(2, "0")} / 03</span>
                      <span className="pill">{p.kind}</span>
                    </div>
                    <h3 id={`product-${i}`} className="product-name">
                      {p.name}
                    </h3>
                    <h4 className="display h3">{p.headline}</h4>
                    <div className="copy">
                      {p.body.map((b) => (
                        <p key={b}>{b}</p>
                      ))}
                    </div>
                    <a href="#" className="arrow-link">
                      {p.cta} <Arrow />
                    </a>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* ───────────────────────── Discovery ───────────────────────── */}
        <section className="section section-night discovery" id="discovery" aria-labelledby="disc-title">
          <div className="wrap">
            <div className="section-head">
              <div className="title" data-reveal>
                <Eyebrow index="04">Discovery Is Changing</Eyebrow>
                <h2 id="disc-title" className="display h2">
                  Your Next Customer May Ask Before They Search.
                </h2>
              </div>
            </div>

            <div className="discovery-stage" data-reveal>
              <div className="query-label">People now ask AI platforms</div>
              <QueryTicker />
              <div className="surfaces">
                <div className="surface left">
                  <span className="pill">Google</span>
                  <span className="pill">Rankings</span>
                  <span className="pill">Authority</span>
                </div>
                <div className="surface-core">Your Brand</div>
                <div className="surface">
                  <span className="pill">ChatGPT</span>
                  <span className="pill">Gemini</span>
                  <span className="pill">AI Overviews</span>
                  <span className="pill">Perplexity</span>
                </div>
              </div>
            </div>

            <div className="split">
              <div className="lead" data-reveal>
                <p>People still search Google.</p>
                <p className="muted">
                  Now they also ask AI platforms which companies to consider, how products compare, what to buy, and
                  who to trust.
                </p>
              </div>
              <div data-reveal style={delay(140)}>
                <div className="copy">
                  <p className="hl">That changes what visibility means.</p>
                  <p>
                    Rankings still matter. But so do the information, authority, context, and signals that help AI
                    systems understand a brand well enough to surface it.
                  </p>
                  <p>Our SEO and LLMO work connects both sides of that shift.</p>
                </div>
                <a href="#" className="arrow-link" style={{ marginTop: 28 }}>
                  Explore AI Visibility <Arrow />
                </a>
              </div>
            </div>
          </div>
        </section>

        {/* ───────────────────────── Attention to action ───────────────────────── */}
        <section className="section" id="approach" aria-labelledby="journey-title">
          <div className="wrap">
            <div className="section-head">
              <div className="title" data-reveal>
                <Eyebrow index="05">From Attention to Action</Eyebrow>
                <h2 id="journey-title" className="display h2">
                  The Last Click Rarely Tells the Whole Story.
                </h2>
              </div>
            </div>

            <div className="journey" data-reveal-group>
              <ol>
                {journeySteps.map((s, i) => (
                  <li key={s.label} style={{ "--i": i } as Vars}>
                    <span className="dot" />
                    <span className="channel">
                      {String(i + 1).padStart(2, "0")} — {s.channel}
                    </span>
                    <span className="step">{s.label}</span>
                  </li>
                ))}
              </ol>
            </div>

            <div className="credit split">
              <h3 className="display question" data-reveal>
                Which interaction gets the credit?
              </h3>
              <div className="copy" data-reveal style={delay(140)}>
                <p>Too often, the answer depends on which dashboard you open.</p>
                <p>
                  We bring media, search, AI visibility, and attribution closer together to answer a more useful
                  question:
                </p>
              </div>
            </div>

            <figure className="pullquote" data-reveal>
              <Eyebrow>The more useful question</Eyebrow>
              <blockquote>What actually helped move the customer toward a decision?</blockquote>
              <figcaption className="copy">
                <p>Better attribution isn’t about producing a prettier report.</p>
                <p className="hl">
                  It is about knowing where the next dollar has the best chance of doing something useful.
                </p>
              </figcaption>
              <a href="#" className="arrow-link">
                Explore Our Approach <Arrow />
              </a>
            </figure>
          </div>
        </section>

        {/* ───────────────────────── Connections ───────────────────────── */}
        <section className="section section-night" id="difference" aria-labelledby="diff-title">
          <div className="wrap">
            <div className="section-head">
              <div className="title" data-reveal>
                <Eyebrow index="06">The Difference Is in the Connections</Eyebrow>
                <h2 id="diff-title" className="display h2">
                  Good Channels Don’t Automatically Make a Good System.
                </h2>
              </div>
            </div>

            <ul className="gaps">
              {gaps.map((g, i) => (
                <li key={g} data-reveal style={delay(i * 80)}>
                  <span>{g}</span>
                  <svg className="break" viewBox="0 0 120 14" aria-hidden="true">
                    <line x1="0" y1="7" x2="50" y2="7" />
                    <line x1="70" y1="7" x2="120" y2="7" />
                    <line className="cut" x1="55" y1="1" x2="65" y2="13" />
                  </svg>
                </li>
              ))}
            </ul>

            <div className="split" style={{ marginTop: "clamp(80px, 10vw, 144px)" }}>
              <h3 className="display h2" data-reveal>
                That is the gap we care about.
              </h3>
              <div className="copy" data-reveal style={delay(140)}>
                <p>We look at how discovery, acquisition, experience, data, technology, and security affect one another.</p>
                <p className="hl">Then we strengthen the connections that make the whole system perform better.</p>
              </div>
            </div>

            <div className="nos">
              <div data-reveal>
                <span>No. 01</span>
                No channel fighting for credit.
              </div>
              <div data-reveal style={delay(120)}>
                <span>No. 02</span>
                No technology added just because it is new.
              </div>
              <div data-reveal style={delay(240)}>
                <span>No. 03</span>
                No dashboard pretending the numbers mean more than they do.
              </div>
            </div>

            <p className="closing" data-reveal>
              Just a clearer system and a team accountable for making it work.
            </p>
          </div>
        </section>

        {/* ───────────────────────── CTA ───────────────────────── */}
        <section className="cta" id="contact" aria-labelledby="cta-title">
          <GlobeCanvas layout="center" />
          <div className="wrap">
            <div data-reveal>
              <Eyebrow>Ready When You Are</Eyebrow>
            </div>
            <h2 id="cta-title" className="display h2" data-reveal style={delay(120)}>
              Bring Us the Growth Problem You Can’t Quite Pin Down.
            </h2>
            <div className="copy" data-reveal style={delay(240)}>
              <p>
                Maybe acquisition is getting more expensive. Maybe organic visibility has stalled. Maybe AI is changing
                how customers find you.
              </p>
              <p>Or maybe every dashboard looks healthy, but the business is telling you something different.</p>
            </div>
            <div className="lead" data-reveal style={delay(320)}>
              <p>You don’t need to diagnose it before the call.</p>
              <p className="muted">Bring us what you’re seeing. We’ll start there.</p>
            </div>
            <div data-reveal style={delay(400)}>
              <a href="#" className="btn btn-solid">
                Book Your Strategy Call <Arrow />
              </a>
            </div>
          </div>
        </section>
      </main>

      {/* ───────────────────────── Footer ───────────────────────── */}
      <footer className="footer">
        <div className="wrap">
          <div className="footer-top">
            <div className="footer-brand">
              <Logo />
              <p>
                Paid media, SEO, AI visibility, web, attribution, and technology — connected into one accountable
                digital growth system.
              </p>
              <div className="socials">
                <a href="#" aria-label="LinkedIn">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <rect x="3" y="3" width="18" height="18" />
                    <path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 10v7" />
                  </svg>
                </a>
                <a href="#" aria-label="Instagram">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <rect x="3" y="3" width="18" height="18" rx="5" />
                    <circle cx="12" cy="12" r="4" />
                    <path d="M17.5 6.5v.01" />
                  </svg>
                </a>
                <a href="#" aria-label="X">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <path d="M4 4l16 16M20 4L4 20" />
                  </svg>
                </a>
                <a href="#" aria-label="YouTube">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                    <rect x="2.5" y="5.5" width="19" height="13" rx="3" />
                    <path d="M10 9.5v5l4.5-2.5z" />
                  </svg>
                </a>
              </div>
            </div>
            <div className="footer-cols">
              {footerColumns.map((col) => (
                <div key={col.title}>
                  <h4>{col.title}</h4>
                  <ul>
                    {col.links.map((l) => (
                      <li key={l}>
                        <a href="#">{l}</a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
          <p className="footer-word" aria-hidden="true">
            AI Growth Technologies
          </p>
          <div className="footer-bottom">
            <span>© 2026 AI Growth Technologies. All rights reserved.</span>
            <nav aria-label="Legal">
              <a href="#">Privacy</a>
              <a href="#">Terms</a>
              <a href="#">Cookies</a>
            </nav>
          </div>
        </div>
      </footer>
    </>
  );
}