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

import SiteHeader from "./components/SiteHeader";
import RevenueField from "./components/RevenueField";
import KineticHeadline from "./components/KineticHeadline";
import Ticker from "./components/Ticker";
import CountUp from "./components/CountUp";
import Reveal from "./components/Reveal";
import BeforeAfter from "./components/BeforeAfter";
import Faq from "./components/Faq";

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

const beforeAfter = [
  { before: "Flat sales", after: "+52% ROAS" },
  { before: "No pipeline", after: "+217% demos" },
  { before: "Empty calendar", after: "+128 booked/mo" },
];

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

      <main id="main">
        {/* =========================================================
            HERO — the masthead front page
        ========================================================= */}
        <section className="hero frame" aria-labelledby="hero-h1">
          <div className="hero__field">
            <RevenueField />
          </div>

          {/* dateline / edition strip */}
          <div className="hero__dateline">
            <span>The Revenue Edition</span>
            <span aria-hidden="true">/</span>
            <span>No. 01</span>
            <span aria-hidden="true">/</span>
            <span>Digital marketing agency</span>
          </div>
          <div className="rule rule--strong" />

          <div className="hero__grid">
            <div className="hero__lead">
              <p className="kicker">
                <span className="kicker__dot" />
                Marketing, priced in revenue
              </p>
              <KineticHeadline className="display hero__h1">
                <span id="hero-h1">
                  Marketing that grows your <span className="cash">revenue.</span>
                </span>
              </KineticHeadline>
            </div>

            <div className="hero__side">
              <p className="hero__sub">
                We&apos;re a results-driven digital marketing agency. We run
                paid, SEO, and content programs built around your revenue
                targets, then show you what they returned. Every month.
              </p>
              <div className="hero__cta">
                <Link
                  href={SITE.booking}
                  className="btn btn--accent"
                  data-cursor="Book it"
                >
                  Get your growth audit
                </Link>
                <a href="#work" className="btn btn--ghost">
                  See the results <span className="arrow" aria-hidden="true">→</span>
                </a>
              </div>
            </div>
          </div>

          {/* hero stat slab */}
          <div className="hero__slab">
            <div className="hero__stat">
              <span className="hero__stat-num display">$40M+</span>
              <span className="hero__stat-lab">in client revenue generated</span>
            </div>
            <div className="hero__stat">
              <span className="hero__stat-num display">50+</span>
              <span className="hero__stat-lab">brands grown</span>
            </div>
            <div className="hero__stat hero__stat--live">
              <span className="hero__live" aria-hidden="true" />
              <span className="hero__stat-lab">
                Live revenue feed — sample data
              </span>
            </div>
          </div>
        </section>

        {/* =========================================================
            TICKER — kinetic social proof tape
        ========================================================= */}
        <section data-invert className="tape" aria-label="Sample results ticker">
          <Ticker />
        </section>

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

        {/* =========================================================
            POSITIONING / PROBLEM — the manifesto spread
        ========================================================= */}
        <section data-invert className="manifesto frame" aria-labelledby="man-h">
          <div className="wrap manifesto__wrap">
            <p className="kicker">
              <span className="kicker__dot" />
              The problem with most agencies
            </p>
            <Reveal as="p" className="manifesto__lead display" >
              <span id="man-h">
                Most budgets buy <span className="strike">activity</span>, not
                outcomes. Dashboards fill up with impressions while the sales
                number <span className="cash">sits still.</span>
              </span>
            </Reveal>
            <Reveal as="p" className="manifesto__body" delay={120}>
              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>

        {/* =========================================================
            SERVICES — the index / 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>

            <ol className="ledger">
              {services.map((s, i) => (
                <li key={s.id} className="ledger__row" data-cursor="">
                  <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>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* =========================================================
            METRICS — count-up scoreboard (inverted)
        ========================================================= */}
        <section data-invert className="score frame" aria-labelledby="score-h">
          <div className="wrap">
            <header className="sec-head sec-head--center">
              <p className="kicker">
                <span className="kicker__dot" />
                The scoreboard — sample data
              </p>
              <h2 id="score-h" className="display sec-head__title">
                Numbers we report on
              </h2>
            </header>
            <dl className="score__grid">
              {metrics.map((m) => (
                <div className="score__cell" key={m.label}>
                  <dt className="sr-only">{m.label}</dt>
                  <dd className={`score__num display ${"accent" in m && m.accent ? "is-accent" : ""}`}>
                    <CountUp
                      to={m.value}
                      prefix={"prefix" in m ? m.prefix : ""}
                      suffix={m.suffix}
                      decimals={"decimals" in m ? m.decimals : 0}
                    />
                  </dd>
                  <p className="score__lab" aria-hidden="true">{m.label}</p>
                </div>
              ))}
            </dl>
          </div>
        </section>

        {/* =========================================================
            CASE STUDIES — proof spreads w/ before/after sliders
        ========================================================= */}
        <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__list">
              {cases.map((c, i) => (
                <article className="case" key={c.tag}>
                  <div className="case__index">
                    <span className="case__no">{String(i + 1).padStart(2, "0")}</span>
                    <span className="case__tag">{c.tag}</span>
                  </div>

                  <div className="case__body">
                    <p className="case__problem">
                      <span className="case__problem-k">Before:</span> {c.problem}
                    </p>
                    <p className="case__result display">{c.result}</p>
                    <p className="case__how">{c.how}</p>
                  </div>

                  <div className="case__visual">
                    <BeforeAfter
                      before={beforeAfter[i].before}
                      after={beforeAfter[i].after}
                      caption={c.tag}
                    />
                    {/* optional brand asset, lazy + sized to avoid CLS */}
                    <Image
                      src={c.img}
                      alt={c.alt}
                      width={1200}
                      height={896}
                      className="case__img"
                      loading="lazy"
                      sizes="(max-width: 900px) 90vw, 40vw"
                    />
                    <div className="case__metric">
                      <span className="case__metric-num display">{c.metricNum}</span>
                      <span className="case__metric-lab">{c.metricLabel}</span>
                    </div>
                  </div>
                </article>
              ))}
            </div>

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

        {/* =========================================================
            PROCESS — The Feedback Loop
        ========================================================= */}
        <section data-invert id="about" className="loop frame" aria-labelledby="loop-h">
          <div className="wrap">
            <header className="sec-head">
              <p className="kicker">
                <span className="kicker__dot" />
                The Feedback Loop
              </p>
              <h2 id="loop-h" className="display sec-head__title">
                How it works
              </h2>
            </header>

            <ol className="loop__grid">
              {processSteps.map((p) => (
                <li className="loop__step" key={p.n}>
                  <span className="loop__n display">{p.n}</span>
                  <h3 className="loop__name">{p.name}</h3>
                  <p className="loop__desc">{p.desc}</p>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {/* =========================================================
            TESTIMONIALS — pull quotes
        ========================================================= */}
        <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 * 100}>
                <blockquote className="quote__text display">
                  &ldquo;{t.quote}&rdquo;
                </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>
            <h2 id="final-h" className="display final__h">
              Ready to <span className="cash">grow?</span>
            </h2>
            <p className="final__sub">
              No long contracts. No vanity reports. Marketing you can measure in
              sales.
            </p>
            <div className="final__cta">
              <Link href={SITE.booking} className="btn btn--accent" data-cursor="Book a call">
                Book a call
              </Link>
              <a href={`mailto:${SITE.email}`} className="btn btn--ghost">
                or {SITE.email}
              </a>
            </div>
          </div>
        </section>
      </main>

      {/* =========================================================
          FOOTER — the colophon
      ========================================================= */}
      <footer data-invert className="colophon frame" aria-label="Footer">
        <div className="wrap">
          <div className="colophon__top">
            <div className="colophon__brand">
              <span className="logo__bug" aria-hidden="true">FS</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="#about">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>
    </>
  );
}