import Link from "next/link";

import { PropertyPilotLogo } from "@/components/brand-logo";
import { ScrollRevealController } from "@/components/scroll-reveal-controller";

const proofPoints = [
  "Built for 7-15 UK homes, not enterprise blocks",
  "Bills, certificates, rent, messages, maps, and valuations in one view",
  "Homeowner-friendly reminders plus landlord compliance workflows",
];

const featureCards = [
  {
    title: "Flick-through property cards",
    text: "Flick between homes and see the checks, bills, rent, valuation, and map that matter right now.",
  },
  {
    title: "Yearly checks timeframe",
    text: "Gas, EICR, EPC, insurance, licences, fire checks, and water reminders colour-coded by urgency.",
  },
  {
    title: "Portfolio money view",
    text: "Track rent collection, arrears, maintenance spend, and upcoming bills without building a spreadsheet.",
  },
  {
    title: "Maps and valuations",
    text: "Connect Google Maps and Zoopla/Hometrack valuation access when you are ready to use live data.",
  },
];

const workflowItems = [
  "Upload a CSV of homes or add one manually",
  "Add bill dates, compliance deadlines, and tenant notes",
  "Open the app each week and see what needs action first",
];

const journeyCards = [
  {
    eyebrow: "01",
    title: "Watch the home",
    text: "Bills, certificates, document reviews, repairs, and tenancy dates surface before they become expensive.",
  },
  {
    eyebrow: "02",
    title: "Act from one place",
    text: "Open the property, message the tenant, download the PDF, or check the map without jumping between folders.",
  },
  {
    eyebrow: "03",
    title: "Keep the record",
    text: "Every property keeps its own practical trail, so the next decision starts with context instead of guesswork.",
  },
];

const showcaseItems = [
  {
    metric: "01",
    title: "The next thing is obvious",
    text: "Safety deadlines, bills, and document reviews appear in priority order instead of living in separate reminders.",
  },
  {
    metric: "02",
    title: "Every home keeps its context",
    text: "Flick into a property and see the map, valuation, repairs, rent position, documents, and message trail together.",
  },
  {
    metric: "03",
    title: "Evidence stays close",
    text: "Policies, warranties, certificates, tenancy files, and invoices sit beside the property they belong to.",
  },
];

const clientVisuals = [
  {
    title: "Certificates before they turn red",
    text: "Gas, EICR, EPC, insurance, licence, fire, and water reminders land in one calm priority list.",
  },
  {
    title: "Each property has its own memory",
    text: "PDFs, warranties, policies, tenant notes, map context, and valuation prompts stay attached to the right home.",
  },
  {
    title: "Calendar-ready from day one",
    text: "Export reminders into Apple Calendar, Outlook, or Google Calendar so landlords can run the week from anywhere.",
  },
];

const proofMetrics = [
  { value: "1", label: "home for every file, bill, check, message, and reminder" },
  { value: "14d", label: "default reminder window before important dates" },
  { value: "7-15", label: "property portfolio size the app is designed around" },
];

function MarketingHeader() {
  return (
    <header className="relative z-20 mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-5 py-5 sm:px-8">
      <Link aria-label="PropertyPilot home" href="/">
        <PropertyPilotLogo
          markClassName="h-11 w-11 text-[#143569]"
          textClassName="text-2xl font-semibold tracking-tight text-[#15223c]"
        />
      </Link>
      <nav className="hidden items-center gap-2 md:flex">
        <Link
          className="rounded-full px-4 py-2 text-sm font-semibold text-[#42506a] transition hover:bg-[#ece3d3] hover:text-[#143569]"
          href="/pricing"
        >
          Pricing
        </Link>
        <Link
          className="rounded-full px-4 py-2 text-sm font-semibold text-[#42506a] transition hover:bg-[#ece3d3] hover:text-[#143569]"
          href="/access"
        >
          Access app
        </Link>
        <Link
          className="rounded-full px-4 py-2 text-sm font-semibold text-[#42506a] transition hover:bg-[#ece3d3] hover:text-[#143569]"
          href="/contact"
        >
          Contact
        </Link>
        <Link
          className="rounded-full bg-[#143569] px-5 py-2.5 text-sm font-normal text-[#efe6d2] shadow-[0_16px_34px_rgba(20,53,105,0.22)] transition hover:bg-[#0f2852]"
          href="/signin?next=/app"
          style={{ color: "#efe6d2" }}
        >
          Sign in
        </Link>
      </nav>
      <Link
        className="rounded-full bg-[#143569] px-4 py-2 text-sm font-semibold text-white md:hidden"
        href="/access"
      >
        Open
      </Link>
    </header>
  );
}

export default function MarketingHomePage() {
  return (
    <main className="marketing-page min-h-screen overflow-hidden bg-[#f7f1e7] text-[#15223c]">
      <ScrollRevealController />
      <MarketingHeader />

      <section className="relative mx-auto grid max-w-7xl gap-10 px-5 pb-16 pt-8 sm:px-8 lg:grid-cols-[1.02fr_0.98fr] lg:items-center lg:pb-24 lg:pt-14">
        <div
          aria-hidden="true"
          className="marketing-orb marketing-orb-one"
        />
        <div
          aria-hidden="true"
          className="marketing-orb marketing-orb-two"
        />
        <div data-reveal="up">
          <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#8d704d]">
            Property operations for UK homes
          </p>
          <h1 className="mt-5 max-w-4xl font-serif text-5xl font-semibold leading-[0.94] tracking-[-0.055em] text-[#10233f] sm:text-6xl lg:text-7xl">
            Run your homes like a calm, profitable portfolio.
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-8 text-[#526073]">
            PropertyPilot helps homeowners and small landlords stay ahead of rent,
            repairs, certificates, bills, reminders, maps, and property valuations
            before anything gets expensive.
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link
              className="inline-flex items-center justify-center rounded-full bg-[#143569] px-7 py-4 text-sm font-normal uppercase tracking-[0.16em] text-[#efe6d2] shadow-[0_24px_48px_rgba(20,53,105,0.25)] transition hover:bg-[#0f2852]"
              href="/pricing"
              style={{ color: "#efe6d2" }}
            >
              See subscription
            </Link>
            <Link
              className="inline-flex items-center justify-center rounded-full border border-[#143569]/20 bg-white/58 px-7 py-4 text-sm font-bold uppercase tracking-[0.16em] text-[#143569] transition hover:border-[#143569]/45 hover:bg-white"
              href="/access"
            >
              Access web app
            </Link>
          </div>

          <div className="mt-8 grid gap-3">
            {proofPoints.map((point, index) => (
              <div
                className="marketing-proof flex items-start gap-3 rounded-[18px] border border-[#143569]/12 bg-white/55 px-4 py-3 text-sm font-semibold text-[#36465e]"
                data-reveal="up"
                key={point}
                style={{ transitionDelay: `${160 + index * 80}ms` }}
              >
                <span className="mt-1 h-2.5 w-2.5 rounded-full bg-[#143569]" />
                {point}
              </div>
            ))}
          </div>
        </div>

        <div className="relative" data-reveal="right">
          <div className="marketing-hero-card rounded-[38px] border border-[#143569]/14 bg-[#10233f] p-4 shadow-[0_34px_80px_rgba(16,35,63,0.32)]">
            <div className="rounded-[30px] bg-[#f9f4eb] p-5">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="font-mono text-xs uppercase tracking-[0.28em] text-[#8d704d]">
                    Today
                  </p>
                  <h2 className="mt-3 text-3xl font-semibold tracking-tight text-[#10233f]">
                    4 Apsley Crescent
                  </h2>
                  <p className="mt-2 text-sm text-[#667184]">
                    BD8 7EY · Terraced house · Bradford
                  </p>
                </div>
                <div className="rounded-full bg-[#143569] px-4 py-2 text-sm font-bold text-white">
                  £522k
                </div>
              </div>

              <div className="mt-6 grid grid-cols-2 gap-3">
                {[
                  ["Gas check", "6 days", "#b94d45"],
                  ["Electric bill", "8 days", "#c06a36"],
                  ["Rent collected", "100%", "#143569"],
                  ["Water", "25 days", "#476f55"],
                ].map(([label, value, colour]) => (
                  <div
                    className="marketing-mini-card rounded-[22px] border border-[#143569]/12 bg-white/72 p-4"
                    key={label}
                  >
                    <p className="text-sm font-semibold text-[#667184]">{label}</p>
                    <p className="mt-2 text-2xl font-semibold text-[#10233f]">{value}</p>
                    <span
                      className="mt-4 block h-2 rounded-full"
                      style={{ backgroundColor: colour }}
                    />
                  </div>
                ))}
              </div>

              <div className="mt-4 rounded-[24px] border border-[#143569]/12 bg-[#e9ded0] p-4">
                <p className="text-sm font-semibold text-[#10233f]">
                  Next action
                </p>
                <p className="mt-1 text-sm leading-6 text-[#526073]">
                  Confirm gas safety certificate and upload evidence before it moves
                  into overdue.
                </p>
              </div>
            </div>
          </div>
          <div className="absolute -bottom-7 left-6 right-6 rounded-[26px] border border-[#143569]/14 bg-white px-5 py-4 shadow-[0_24px_55px_rgba(16,35,63,0.16)]">
            <p className="text-sm font-bold uppercase tracking-[0.18em] text-[#143569]">
              Free starter tier
            </p>
            <p className="mt-1 text-sm text-[#667184]">
              Start with one home, then upgrade when the portfolio grows.
            </p>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-16 sm:px-8 lg:py-24">
        <div className="mx-auto max-w-4xl text-center" data-reveal="up">
          <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#8d704d]">
            Visual proof clients understand quickly
          </p>
          <h2 className="mt-4 font-serif text-5xl font-semibold leading-[0.95] tracking-[-0.055em] text-[#10233f] md:text-7xl">
            Show them the calm before they even sign in.
          </h2>
          <p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-[#526073]">
            A landlord should instantly see the promise: fewer missed dates, cleaner
            records, and every property in one place.
          </p>
        </div>

        <div className="mt-10 grid gap-6 lg:grid-cols-[1.08fr_0.92fr] lg:items-center">
          <div className="marketing-product-stage" data-reveal="zoom">
            <div className="marketing-stage-glow" aria-hidden="true" />
            <div className="marketing-device-shell">
              <div className="flex items-center justify-between border-b border-[#143569]/10 px-5 py-4">
                <div>
                  <p className="font-mono text-[11px] uppercase tracking-[0.24em] text-[#8d704d]">
                    Live property cockpit
                  </p>
                  <h3 className="mt-1 text-2xl font-semibold tracking-tight text-[#10233f]">
                    4 Apsley Crescent
                  </h3>
                </div>
                <span className="rounded-full bg-[#143569] px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-white">
                  On track
                </span>
              </div>

              <div className="grid gap-3 p-5 sm:grid-cols-3">
                {[
                  ["Gas", "20 days", "#9d5549"],
                  ["Electric", "8 days", "#c06a36"],
                  ["Water", "25 days", "#476f55"],
                ].map(([label, value, colour]) => (
                  <div
                    className="marketing-metric-tile rounded-[22px] border border-[#143569]/12 bg-white/72 p-4"
                    key={label}
                  >
                    <p className="text-sm font-semibold text-[#667184]">{label}</p>
                    <p className="mt-2 text-2xl font-semibold text-[#10233f]">
                      {value}
                    </p>
                    <span
                      className="mt-4 block h-2 rounded-full"
                      style={{ backgroundColor: colour }}
                    />
                  </div>
                ))}
              </div>

              <div className="space-y-3 px-5 pb-5">
                {[
                  ["PDF vault", "Insurance policy saved", "Files"],
                  ["Calendar", "CP12 engineer visit exported", "Reminder"],
                  ["Valuation", "Zoopla-ready estimate panel", "Insight"],
                ].map(([title, detail, tag]) => (
                  <div
                    className="marketing-feed-row flex items-center justify-between gap-4 rounded-[20px] border border-[#143569]/10 bg-[#f9f4eb]/82 px-4 py-3"
                    key={title}
                  >
                    <div>
                      <p className="text-sm font-semibold text-[#10233f]">{title}</p>
                      <p className="mt-1 text-xs text-[#667184]">{detail}</p>
                    </div>
                    <span className="rounded-full border border-[#143569]/14 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.16em] text-[#143569]">
                      {tag}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div className="marketing-float-chip marketing-float-chip-one">
              Bell: 9 reminders
            </div>
            <div className="marketing-float-chip marketing-float-chip-two">
              Calendar file ready
            </div>
            <div className="marketing-float-chip marketing-float-chip-three">
              Warranty PDF stored
            </div>
          </div>

          <div className="grid gap-4">
            {clientVisuals.map((visual, index) => (
              <article
                className="marketing-client-card rounded-[30px] border border-[#143569]/14 bg-white/62 p-6 shadow-[0_24px_60px_rgba(16,35,63,0.08)]"
                data-reveal="right"
                key={visual.title}
                style={{ transitionDelay: `${index * 100}ms` }}
              >
                <span className="font-mono text-xs font-black uppercase tracking-[0.24em] text-[#8d704d]">
                  0{index + 1}
                </span>
                <h3 className="mt-3 text-2xl font-semibold tracking-[-0.035em] text-[#10233f]">
                  {visual.title}
                </h3>
                <p className="mt-3 text-sm leading-6 text-[#526073]">{visual.text}</p>
              </article>
            ))}
          </div>
        </div>

        <div className="mt-8 grid gap-4 md:grid-cols-3">
          {proofMetrics.map((metric, index) => (
            <div
              className="marketing-proof-metric rounded-[28px] border border-[#143569]/12 bg-[#10233f] p-6 text-white"
              data-reveal="up"
              key={metric.value}
              style={{ transitionDelay: `${index * 90}ms` }}
            >
              <p className="font-serif text-5xl font-semibold tracking-[-0.06em]">
                {metric.value}
              </p>
              <p className="mt-3 text-sm leading-6 text-white/70">{metric.label}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="marketing-sticky-showcase mx-auto grid max-w-7xl gap-8 px-5 py-16 sm:px-8 lg:grid-cols-[0.95fr_1.05fr] lg:py-24">
        <div className="lg:sticky lg:top-20 lg:self-start" data-reveal="left">
          <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#8d704d]">
            Built to feel inevitable
          </p>
          <h2 className="mt-4 font-serif text-5xl font-semibold leading-[0.95] tracking-[-0.055em] text-[#10233f] md:text-7xl">
            Scroll once. Know what needs attention.
          </h2>
          <p className="mt-5 max-w-xl text-base leading-7 text-[#526073]">
            The front page now moves like the product should feel: calm, clear, and
            focused on the next landlord decision.
          </p>
        </div>

        <div className="space-y-5">
          {showcaseItems.map((item, index) => (
            <article
              className="marketing-showcase-card rounded-[34px] border border-[#143569]/14 bg-white/62 p-6 shadow-[0_24px_70px_rgba(16,35,63,0.08)]"
              data-reveal={index % 2 === 0 ? "right" : "up"}
              key={item.title}
              style={{ transitionDelay: `${index * 110}ms` }}
            >
              <div className="flex flex-col gap-5 sm:flex-row sm:items-start">
                <span className="grid h-14 w-14 shrink-0 place-items-center rounded-full border border-[#143569]/18 bg-[#f9f4eb] font-mono text-sm font-black text-[#143569]">
                  {item.metric}
                </span>
                <div>
                  <h3 className="text-3xl font-semibold tracking-[-0.035em] text-[#10233f]">
                    {item.title}
                  </h3>
                  <p className="mt-3 text-sm leading-6 text-[#526073]">{item.text}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="relative mx-auto max-w-7xl px-5 py-14 sm:px-8">
        <div
          className="mb-8 max-w-3xl"
          data-reveal="up"
        >
          <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#8d704d]">
            Built around the things landlords actually chase
          </p>
          <h2 className="mt-4 font-serif text-4xl font-semibold tracking-[-0.045em] text-[#10233f] md:text-5xl">
            Less dashboard. More muscle memory.
          </h2>
        </div>
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          {featureCards.map((card, index) => (
            <article
              className="marketing-feature-card rounded-[28px] border border-[#143569]/12 bg-white/62 p-6"
              data-reveal="up"
              key={card.title}
              style={{ transitionDelay: `${index * 90}ms` }}
            >
              <h2 className="text-xl font-semibold tracking-tight text-[#10233f]">
                {card.title}
              </h2>
              <p className="mt-3 text-sm leading-6 text-[#526073]">{card.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="mx-auto grid max-w-7xl gap-8 px-5 py-14 sm:px-8 lg:grid-cols-[0.85fr_1.15fr] lg:items-center">
        <div data-reveal="left">
          <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#8d704d]">
            How it fits your week
          </p>
          <h2 className="mt-4 font-serif text-4xl font-semibold tracking-[-0.045em] text-[#10233f] md:text-5xl">
            Open it, act, move on.
          </h2>
          <p className="mt-4 text-base leading-7 text-[#526073]">
            PropertyPilot is designed for people who own or manage enough homes that
            reminders matter, but not so many that enterprise software makes sense.
          </p>
        </div>
        <div className="grid gap-3">
          {workflowItems.map((item, index) => (
            <div
              className="marketing-workflow-row flex items-center gap-4 rounded-[24px] border border-[#143569]/12 bg-white/66 p-5"
              data-reveal="right"
              key={item}
              style={{ transitionDelay: `${index * 90}ms` }}
            >
              <span className="grid h-11 w-11 place-items-center rounded-full bg-[#143569] font-mono text-sm font-black text-white">
                {index + 1}
              </span>
              <p className="font-semibold text-[#36465e]">{item}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-5 py-14 sm:px-8">
        <div
          className="marketing-flow-panel rounded-[38px] border border-[#143569]/14 bg-white/54 p-5 shadow-[0_28px_70px_rgba(16,35,63,0.08)] sm:p-8"
          data-reveal="up"
        >
          <div className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
            <div>
              <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#8d704d]">
                A smoother operating loop
              </p>
              <h2 className="mt-4 font-serif text-4xl font-semibold tracking-[-0.045em] text-[#10233f] md:text-5xl">
                The app should feel like the first place to check.
              </h2>
              <p className="mt-4 text-base leading-7 text-[#526073]">
                PropertyPilot turns the weekly landlord sweep into a short loop:
                see what changed, take the next action, and keep the evidence.
              </p>
            </div>
            <div className="grid gap-3">
              {journeyCards.map((card, index) => (
                <article
                  className="marketing-journey-card rounded-[26px] border border-[#143569]/12 bg-[#f9f4eb]/82 p-5"
                  data-reveal="right"
                  key={card.title}
                  style={{ transitionDelay: `${index * 100}ms` }}
                >
                  <div className="flex gap-4">
                    <span className="font-mono text-sm font-black text-[#8d704d]">
                      {card.eyebrow}
                    </span>
                    <div>
                      <h3 className="text-xl font-semibold tracking-tight text-[#10233f]">
                        {card.title}
                      </h3>
                      <p className="mt-2 text-sm leading-6 text-[#526073]">
                        {card.text}
                      </p>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="px-5 py-16 sm:px-8">
        <div
          className="marketing-cta mx-auto max-w-5xl rounded-[36px] bg-[#143569] px-6 py-10 text-center text-white shadow-[0_30px_70px_rgba(20,53,105,0.25)] sm:px-10"
          data-reveal="up"
        >
          <p className="font-mono text-xs uppercase tracking-[0.32em] text-[#d8c5a6]">
            Ready when your next reminder is due
          </p>
          <h2 className="mx-auto mt-4 max-w-3xl font-serif text-4xl font-semibold tracking-[-0.045em] md:text-5xl">
            Give every property one clean control panel.
          </h2>
          <div className="mt-7 flex flex-col justify-center gap-3 sm:flex-row">
            <Link
              className="rounded-full bg-white px-7 py-4 text-sm font-bold uppercase tracking-[0.16em] text-[#143569]"
              href="/pricing"
            >
              View pricing
            </Link>
            <Link
              className="rounded-full border border-white/30 px-7 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-white/10"
              href="/signin?next=/app"
            >
              Enter app
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}