import type { Metadata } from 'next';
import Link from 'next/link';
import Footer from '@/components/Footer';
import WebsiteHandover from '@/components/WebsiteHandover';
import { CoachSamCase, ReedSources } from '@/components/personal/ProjectDetails';
import BuildingWalkthrough from '@/components/BuildingWalkthrough';
import BuildingCaseStudy from '@/components/BuildingCaseStudy';
import BuildingConversion from '@/components/BuildingConversion';
import JsonLd from '@/components/JsonLd';
import { text, space, link, sectionHead, measureTight } from '@/lib/design';

export const metadata: Metadata = {
  title: 'Building',
  description:
    'What Sam Millan is building right now, what each project does and what stage it is at. Smaller experiments stay off the page until they ship.',
  alternates: { canonical: 'https://sammillan.com/building' },
  openGraph: {
    title: 'Building · Sam Millan',
    description: 'The projects, what they do and what stage they are at.',
    url: 'https://sammillan.com/building',
    images: ['/opengraph-image'],
  },
};

const buildingSchema = {
  '@context': 'https://schema.org',
  '@type': 'CollectionPage',
  name: 'Building · Sam Millan',
  url: 'https://sammillan.com/building',
  description: 'Projects and products Sam Millan is building.',
  isPartOf: { '@type': 'WebSite', name: 'Sam Millan', url: 'https://sammillan.com' },
};

export default function BuildingPage() {
  return (
    <>
      <JsonLd data={buildingSchema} />
      <main className="main-wide simple-editorial building-editorial domain-page domain-scope domain-craft px-6 pb-8" style={{ paddingTop: space[7] }}>

        <header className="simple-page-head">
          <h1 style={{ ...text.h1, marginBottom: space[4] }}>Building</h1>
          <p style={{ ...text.lead, marginBottom: space[3] }}>
            One agency, and the work behind it. Nothing appears here until it is real, evidenced and
            useful to somebody beyond me.
          </p>
          <p style={{ ...text.small, maxWidth: measureTight }}>
            The coaching practice has its own home over at{' '}
            <Link href="/coaching" style={link}>Coach Sam</Link>.
          </p>
        </header>

        <BuildingCaseStudy />

        <ReedSources />
        <BuildingWalkthrough />
        <CoachSamCase />
        <WebsiteHandover />
        <BuildingConversion />

        <section className="simple-closing">
          <h2 style={sectionHead}>Working in the open</h2>
          <p style={{ ...text.body, marginBottom: space[4] }}>
            I write up what I build as I build it, including the parts that did not work. The
            essays are usually more useful than the products.
          </p>
          <p>
            <Link href="/writing" style={link}>Read the writing →</Link>
          </p>
        </section>

      </main>
      <Footer />
    </>
  );
}