import Iridescence from "./components/Iridescence";
import SiteHeader from "./components/SiteHeader";
import Hero from "./components/Hero";
import Marquee from "./components/Marquee";
import Reveal from "./components/Reveal";
import KineticText from "./components/KineticText";
import Services from "./components/Services";
import Metrics from "./components/Metrics";
import CaseStudies from "./components/CaseStudies";
import Process from "./components/Process";
import Faq from "./components/Faq";
import PillMark from "./components/PillMark";
import Magnetic from "./components/Magnetic";
import { testimonials } from "./content";

export default function Home() {
  return (
    <>
      <Iridescence />
      <SiteHeader />

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

        {/* SOCIAL PROOF BAR */}
        <Marquee />

        {/* POSITIONING / PROBLEM — big editorial statement */}
        <section id="position" className="positioning" aria-label="Our positioning">
          <div className="wrap positioning__grid">
            <Reveal>
              <p className="kicker">Why we exist</p>
              <p className="positioning__statement">
                Most marketing budgets buy{" "}
                <span className="muted">activity</span>, not{" "}
                <span className="serif-em">outcomes.</span>
              </p>
            </Reveal>
            <Reveal className="positioning__aside" y={40}>
              <span className="serif-em">We started to fix that.</span>
              Dashboards fill up with impressions and &ldquo;engagement&rdquo;
              while the sales number sits still. Every campaign we run is built
              to move revenue, and we report on it the way your CFO would.
            </Reveal>
          </div>
        </section>

        {/* SERVICES — broken grid */}
        <Services />

        {/* RESULTS — animated count-up */}
        <Metrics />

        {/* CASE STUDIES — large film-cell cards */}
        <CaseStudies />

        {/* PROCESS — pinned scrollytelling */}
        <Process />

        {/* TESTIMONIALS + PARTNERS */}
        <section id="voices" className="tmonials" aria-label="What clients say">
          <div className="wrap">
            <Reveal>
              <p className="kicker">In their words</p>
              <h2 className="section__title">
                The number is the <span className="serif-em">whole point.</span>
              </h2>
            </Reveal>

            <Reveal className="tmonials__grid" stagger={0.12}>
              {testimonials.map((t) => (
                <figure className="tmonial" key={t.by}>
                  <span className="tmonial__mark" aria-hidden="true">
                    &ldquo;
                  </span>
                  <blockquote>
                    <p className="tmonial__quote">{t.quote}</p>
                  </blockquote>
                  <figcaption className="tmonial__by">{t.by}</figcaption>
                </figure>
              ))}
            </Reveal>

            <Reveal className="partners">
              <span className="partners__label">Partners</span>
              <span className="partner">Google Partner</span>
              <span className="partner">Meta Business Partner</span>
            </Reveal>
          </div>
        </section>

        {/* FAQ */}
        <Faq />

        {/* FINAL CTA */}
        <section id="contact" className="cta" aria-label="Get in touch">
          <span className="cta__glow" aria-hidden="true" />
          <Reveal className="wrap cta__wrap">
            <PillMark className="cta__mark" animate breathe />
            <h2 className="cta__title">
              <KineticText as="span" text="Ready to" />{" "}
              <KineticText
                as="span"
                className="cta__title-grad"
                text="grow?"
                highlight={[0, 0]}
              />
            </h2>
            <p className="cta__lead">
              No long contracts. No vanity reports. Marketing you can measure in
              sales.
            </p>
            <Magnetic strength={0.4}>
              <a
                className="btn btn--primary btn--lg hoverable"
                href="https://cal.feedback-studios.com"
                data-cursor="book a call"
              >
                <span>Book a call</span>
              </a>
            </Magnetic>
            <p className="cta__mail">
              or email{" "}
              <a className="hoverable" href="mailto:hello@feedbackstudios.com">
                hello@feedbackstudios.com
              </a>
            </p>
          </Reveal>
        </section>
      </main>

      <footer className="site-footer">
        <div className="wrap site-footer__inner">
          <div className="site-footer__brand">
            <span className="brand__word brand__word--lg">
              feedback<span className="brand__word-2">studios</span>
            </span>
            <p className="site-footer__tag">
              A results-driven digital marketing agency. We build paid, SEO and
              content programs around your revenue.
            </p>
          </div>

          <div className="site-footer__col">
            <h2>Sitemap</h2>
            <nav aria-label="Footer">
              <a className="hoverable" href="#services">Services</a>
              <a className="hoverable" href="#work">Work</a>
              <a className="hoverable" href="#process">About</a>
              <a className="hoverable" href="#faq">FAQ</a>
              <a className="hoverable" href="#contact">Contact</a>
            </nav>
          </div>

          <div className="site-footer__col">
            <h2>Connect</h2>
            <nav aria-label="Social and legal">
              <a className="hoverable" href="https://www.linkedin.com" rel="noopener">LinkedIn</a>
              <a className="hoverable" href="mailto:hello@feedbackstudios.com">Email</a>
              <a className="hoverable" href="#">Privacy</a>
              <a className="hoverable" href="#">Terms</a>
            </nav>
          </div>

          <p className="site-footer__legal">
            <span>© 2026 Feedback Studios</span>
            <span>Marketing that grows your revenue.</span>
          </p>
        </div>
      </footer>
    </>
  );
}