import Link from "next/link";
import {
  SITE,
  services,
  cases,
  testimonials,
} from "./content";

import SiteHeader from "./components/SiteHeader";
import Hero from "./components/Hero";
import VelocityMarquee from "./components/VelocityMarquee";
import Reveal, { RevealItem } from "./components/Reveal";
import Scoreboard from "./components/Scoreboard";
import CaseCard, { type CaseData } from "./components/CaseCard";
import ProcessLoop from "./components/ProcessLoop";
import Faq from "./components/Faq";
import Magnetic from "./components/Magnetic";

const TAPE = [
  "Revenue, not vanity metrics",
  "Paid",
  "SEO",
  "Content",
  "Social",
  "+52% ROAS",
  "+217% demos",
  "+128 booked/mo",
  "Reported every month",
];

const INDUSTRIES = [
  "E-commerce",
  "B2B SaaS",
  "Clinics",
  "Professional services",
  "DTC brands",
  "Marketplaces",
];

export default function Page() {
  return (
    <>
      <SiteHeader />

      <main id="main">
        <Hero />

        {/* ===== KINETIC TAPE — scroll-velocity marquee ===== */}
        <section className="tape" aria-label="What we do, at a glance">
          <VelocityMarquee items={TAPE} />
        </section>

        {/* ===== POSITIONING / MANIFESTO ===== */}
        <section id="manifesto" className="manifesto frame" aria-labelledby="man-h">
          <div className="wrap manifesto__wrap">
            <Reveal as="p" className="kicker">
              <span className="kicker__dot" />
              The problem with most agencies
            </Reveal>
            <Reveal as="p" className="manifesto__lead display" delay={80}>
              <span id="man-h">
                Most budgets buy <span className="strike">activity</span>, not
                outcomes. Dashboards fill with impressions while the sales number{" "}
                <span className="grad">sits still.</span>
              </span>
            </Reveal>
            <Reveal as="p" className="manifesto__body" delay={180}>
              We started Feedback Studios to fix that. Every campaign we run is
              built to move revenue, and we report on it the way your CFO would.
              No vanity metrics. No mystery. Just the number that pays the bills.
            </Reveal>
          </div>
        </section>

        {/* ===== INDUSTRIES / SOCIAL PROOF ===== */}
        <section className="proof" aria-label="Who we work with">
          <div className="wrap">
            <p className="kicker proof__label">
              Trusted by teams that care about the sales number
            </p>
            <Reveal as="ul" className="proof__list" stagger={0.06}>
              {INDUSTRIES.map((p) => (
                <RevealItem as="li" className="proof__item" key={p}>
                  {p}
                </RevealItem>
              ))}
            </Reveal>
          </div>
        </section>

        {/* ===== SERVICES — interactive ledger ===== */}
        <section id="services" className="services frame" aria-labelledby="svc-h">
          <div className="wrap">
            <header className="sec-head">
              <p className="kicker">
                <span className="kicker__dot" />
                Services / 06
              </p>
              <h2 id="svc-h" className="display sec-head__title">
                How we grow your business
              </h2>
            </header>

            <Reveal as="ol" className="ledger" stagger={0.07}>
              {services.map((s, i) => (
                <RevealItem as="li" key={s.id}>
                  <a href={SITE.booking} className="ledger__row" data-cursor="Scope it">
                    <span className="ledger__no">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <h3 className="ledger__name display">{s.name}</h3>
                    <p className="ledger__desc">{s.desc}</p>
                    <span className="ledger__arrow" aria-hidden="true">↗</span>
                  </a>
                </RevealItem>
              ))}
            </Reveal>
          </div>
        </section>

        {/* ===== METRICS scoreboard (animated SVG bars + count-ups) ===== */}
        <Scoreboard />

        {/* ===== CASE STUDIES — 3D tilt + coded charts ===== */}
        <section id="work" className="work frame" aria-labelledby="work-h">
          <div className="wrap">
            <header className="sec-head">
              <p className="kicker">
                <span className="kicker__dot" />
                Selected work — sample
              </p>
              <h2 id="work-h" className="display sec-head__title">
                Proof, not promises
              </h2>
            </header>

            <div className="work__grid">
              {cases.map((c, i) => (
                <CaseCard key={c.tag} data={c as unknown as CaseData} index={i} />
              ))}
            </div>

            <div className="work__cta">
              <Magnetic strength={0.3}>
                <a href={SITE.booking} className="btn btn--ghost" data-cursor="See more">
                  View all work <span className="arrow" aria-hidden="true">→</span>
                </a>
              </Magnetic>
            </div>
          </div>
        </section>

        {/* ===== PROCESS — pinned scroll + morphing SVG ===== */}
        <ProcessLoop />

        {/* ===== TESTIMONIALS ===== */}
        <section className="quotes frame" aria-label="What clients say">
          <div className="wrap quotes__grid">
            {testimonials.map((t, i) => (
              <Reveal as="figure" className="quote" key={i} delay={i * 120}>
                <span className="quote__mark display" aria-hidden="true">&ldquo;</span>
                <blockquote className="quote__text display">{t.quote}</blockquote>
                <figcaption className="quote__by">
                  <span className="quote__rule" aria-hidden="true" />
                  {t.by}
                </figcaption>
              </Reveal>
            ))}
          </div>
          <div className="wrap partners">
            <p className="kicker">Partners</p>
            <ul className="partners__list">
              <li>Google Partner</li>
              <li>Meta Business Partner</li>
            </ul>
          </div>
        </section>

        {/* ===== FAQ ===== */}
        <section id="faq" data-invert className="faq-sec frame" aria-labelledby="faq-h">
          <div className="wrap faq-sec__wrap">
            <header className="sec-head">
              <p className="kicker">
                <span className="kicker__dot" />
                FAQ
              </p>
              <h2 id="faq-h" className="display sec-head__title">
                Questions about working with a digital marketing agency
              </h2>
            </header>
            <Faq />
          </div>
        </section>

        {/* ===== FINAL CTA ===== */}
        <section className="final frame" aria-labelledby="final-h">
          <div className="wrap final__wrap">
            <p className="kicker">
              <span className="kicker__dot" />
              The bottom line
            </p>
            <Reveal as="header">
              <h2 id="final-h" className="display final__h">
                Ready to <span className="grad">grow?</span>
              </h2>
            </Reveal>
            <p className="final__sub">
              No long contracts. No vanity reports. Marketing you can measure in
              sales.
            </p>
            <div className="final__cta">
              <Magnetic strength={0.4}>
                <Link href={SITE.booking} className="btn btn--accent" data-cursor="Book a call">
                  Book a call
                </Link>
              </Magnetic>
              <a href={`mailto:${SITE.email}`} className="btn btn--ghost">
                or {SITE.email}
              </a>
            </div>
          </div>
        </section>
      </main>

      {/* ===== FOOTER ===== */}
      <footer data-invert className="colophon frame" aria-label="Footer">
        <div className="wrap">
          <div className="colophon__top">
            <div className="colophon__brand">
              <span className="brand__mark" aria-hidden="true">
                <span className="brand__dot" />
              </span>
              <p className="colophon__line">
                {SITE.name}. {SITE.tagline}
              </p>
            </div>
            <nav className="colophon__nav" aria-label="Footer">
              <ul>
                <li><a href="#services">Services</a></li>
                <li><a href="#work">Work</a></li>
                <li><a href="#process">About</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href={`mailto:${SITE.email}`}>Contact</a></li>
              </ul>
              <ul>
                <li><a href="https://www.linkedin.com" rel="noopener">LinkedIn</a></li>
                <li><a href={SITE.booking}>Book a call</a></li>
                <li><a href="#main">Privacy</a></li>
                <li><a href="#main">Terms</a></li>
              </ul>
            </nav>
          </div>
          <div className="rule" />
          <div className="colophon__bottom">
            <p>© 2026 {SITE.name}. All rights reserved.</p>
            <p className="colophon__note">
              Metrics and case studies shown are illustrative samples.
            </p>
          </div>
        </div>
      </footer>
    </>
  );
}