import type { Metadata } from "next";
import SiteHeader from "../components/SiteHeader";
import {
  PERSON_ID,
  SITE_URL,
  WEBSITE_ID,
  overcomersEntity,
  personEntity,
  websiteEntity,
} from "../lib/site";

export const metadata: Metadata = {
  title: "How-To Guides for Modern Life",
  description:
    "Free, practical how-to guides from Toshin Samuels covering self-publishing, music, business, credit, employment, AI, websites, taxes, real estate, and online reputation.",
  alternates: { canonical: "/guides" },
  openGraph: {
    title: "How-To Guides for Modern Life | Toshin Samuels",
    description:
      "Clear, practical guidance for the things life expects people to know but rarely teaches.",
    url: `${SITE_URL}/guides`,
    siteName: "Toshin Samuels",
    type: "website",
  },
  twitter: {
    card: "summary",
    title: "How-To Guides for Modern Life | Toshin Samuels",
    description:
      "Clear, practical guidance for the things life expects people to know but rarely teaches.",
  },
};

const guides = [
  {
    title: "Self-Publishing",
    description:
      "Take a manuscript through editing, formatting, cover preparation, ISBN decisions, distribution, pricing, proofing, and publication without giving away unnecessary control.",
  },
  {
    title: "Releasing Your Own Music",
    description:
      "Move from a finished recording to distribution, artist profiles, metadata, rights, royalties, release planning, and promotion without fake-stream or playlist scams.",
  },
  {
    title: "Starting a Business",
    description:
      "Test an idea, choose a structure, handle basic formation and records, understand real costs, and work toward a first legitimate customer.",
  },
  {
    title: "Rebuilding Your Credit",
    description:
      "Read your reports, correct inaccurate information, respond to identity theft, reduce damage, build positive history, and avoid credit-repair promises that cannot be guaranteed.",
  },
  {
    title: "Rebuilding Your Online Reputation",
    description:
      "Correct what is false, add what is true, build credible current work, protect privacy, and strengthen how your name is understood without falsifying the past.",
  },
  {
    title: "Employment",
    description:
      "Build or rebuild a résumé, LinkedIn profile, interview plan, skills pathway, remote-work search, or return-to-work strategy after a difficult chapter.",
  },
  {
    title: "Artificial Intelligence",
    description:
      "Use AI for research, writing, learning, creative work, planning, and automation while protecting privacy and verifying confident-sounding answers.",
  },
  {
    title: "Building a Website",
    description:
      "Go from a domain name to a working website with clear choices about platforms, hosting, email, security, accessibility, search visibility, and maintenance.",
  },
  {
    title: "Filing Your Own Taxes",
    description:
      "Understand the records, filing process, free routes, common costs, and warning signs that mean it is time to involve a qualified tax professional.",
  },
  {
    title: "Buying Real Estate",
    description:
      "Understand the path from search and financing through inspection, insurance, title, negotiation, reserves, closing, and the fine print people often overlook.",
  },
];

const structuredData = {
  "@context": "https://schema.org",
  "@graph": [
    websiteEntity,
    personEntity,
    overcomersEntity,
    {
      "@type": "CollectionPage",
      "@id": `${SITE_URL}/guides#webpage`,
      url: `${SITE_URL}/guides`,
      name: "How-To Guides for Modern Life",
      description:
        "A developing collection of free practical guides for modern systems and major life tasks.",
      isPartOf: { "@id": WEBSITE_ID },
      author: { "@id": PERSON_ID },
      mainEntity: {
        "@type": "ItemList",
        itemListElement: guides.map((guide, index) => ({
          "@type": "ListItem",
          position: index + 1,
          name: guide.title,
          description: guide.description,
        })),
      },
    },
  ],
};

const method = [
  {
    title: "Start With the System",
    description:
      "Understand what you are actually trying to do, what the process requires, and what can go wrong before spending money.",
  },
  {
    title: "Show the Free Route",
    description:
      "Identify credible no-cost tools, official resources, and steps a person can reasonably complete independently.",
  },
  {
    title: "Explain the Real Cost",
    description:
      "Separate necessary expenses from optional services, unnecessary upsells, and costly shortcuts.",
  },
  {
    title: "Flag the Scams",
    description:
      "Call out deceptive promises, unsafe payment requests, false guarantees, and situations that deserve independent verification.",
  },
  {
    title: "Mark the Professional Checkpoint",
    description:
      "Be clear about the point where qualified legal, financial, tax, technical, or other professional help may protect more than it costs.",
  },
  {
    title: "Keep It Current",
    description:
      "Link to primary sources and display reviewed-through dates when rules, platforms, prices, or procedures may change.",
  },
];

export default function GuidesPage() {
  return (
    <main className="dark-page">
      <SiteHeader />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />

      <div className="dark-shell">
        <section className="dark-page-hero">
          <p className="dark-eyebrow">How-To Guides for Modern Life</p>
          <h1 className="dark-page-title">
            The things life expects you to know—but rarely teaches.
          </h1>
          <p className="dark-page-intro">
            These free guides are being developed to make complicated systems
            easier to understand. Each subject will focus on clear steps,
            honest costs, official resources, common mistakes, scam warnings,
            and the point at which professional help may be worth seeking.
          </p>
        </section>

        <section aria-labelledby="guide-subjects">
          <p className="dark-eyebrow">Choose a subject</p>
          <h2 id="guide-subjects" className="sr-only">
            How-To guide subjects
          </h2>

          <div className="guide-grid">
            {guides.map((guide) => (
              <article className="guide-card" key={guide.title}>
                <div>
                  <p className="dark-eyebrow">How-To</p>
                  <h2>{guide.title}</h2>
                  <p>{guide.description}</p>
                </div>
                <span className="guide-status">Guide in development</span>
              </article>
            ))}
          </div>
        </section>

        <section className="guide-method" aria-labelledby="how-guides-work">
          <p className="dark-eyebrow">The standard behind every guide</p>
          <h2 id="how-guides-work">
            Learn the process. Avoid the traps. Know what comes next.
          </h2>
          <p className="dark-page-intro">
            A how-to guide should do more than give directions. It should help
            you understand the system well enough to make informed decisions,
            recognize unnecessary costs, and know when doing it yourself is no
            longer the safest choice.
          </p>

          <div className="guide-method-list">
            {method.map((item) => (
              <article key={item.title}>
                <h3>{item.title}</h3>
                <p>{item.description}</p>
              </article>
            ))}
          </div>
        </section>

        <footer
          style={{
            padding: "45px 0 80px",
            borderTop: "1px solid rgba(255,255,255,.11)",
            color: "#aeb5ad",
            fontSize: 14,
            lineHeight: 1.7,
          }}
        >
          <p>
            The guides will provide general education and starting points, not
            individualized legal, financial, tax, medical, investment, or other
            professional advice. Time-sensitive information will be linked to
            the relevant official source whenever possible.
          </p>
        </footer>
      </div>
    </main>
  );
}
