import { homepage as c } from "../content/homepage";
import { dailyRhythms, programGroups } from "../content/programs";
import imageManifest from "../content/image-manifest.json";
import { institution } from "../config/institution";
import { ResponsiveImage } from "../components/ResponsiveImage";

export const dynamic = "force-static";
export const metadata = { alternates: { canonical: "/" } };

const paths = [
  {
    number: "01",
    title: "Infância e Juventude",
    text: "Dos primeiros meses à adolescência",
    href: "/servicos#infancia",
  },
  {
    number: "02",
    title: "Terceira Idade",
    text: "No Centro e no conforto de casa",
    href: "/servicos#terceira-idade",
  },
  {
    number: "03",
    title: "Família e Comunidade",
    text: "Apoio social, voluntariado e proximidade",
    href: "/servicos#comunidade",
  },
];

export default function Home() {
  const heroImage = imageManifest["hero-comunidade-ia"] || [];
  const buildingImage = imageManifest["entrada-centro"] || [];
  const academicImage = imageManifest["sala-centro-academico"] || [];
  const playgroundImage = imageManifest["edificio-sede"] || [];

  return (
    <main id="conteudo">
      <section className="impact-hero">
        <div className="hero-background" aria-hidden="true">
          <ResponsiveImage
            variants={heroImage}
            alt=""
            sizes="100vw"
            priority
          />
        </div>
        <div className="shell impact-hero-inner">
          <div className="impact-copy reveal">
            <p className="eyebrow">{c.eyebrow}</p>
            <h1>{c.title}</h1>
            <p className="lead">{c.introduction}</p>
            <div className="hero-actions">
              <a className="button button-accent" href="#respostas">
                {c.cta} <span aria-hidden="true">↓</span>
              </a>
              <a className="hero-contact" href="/contactos">
                Falar com a equipa <span aria-hidden="true">↗</span>
              </a>
            </div>
          </div>
          <div className="hero-seal reveal reveal-delay" aria-label="Mais de cinquenta anos">
            <strong>50+</strong>
            <span>anos de presença na comunidade</span>
          </div>
        </div>
        <a className="scroll-cue" href="#orientacao">
          <span>Conhecer o Centro</span>
          <b aria-hidden="true">↓</b>
        </a>
      </section>

      <section className="pathways" id="orientacao" aria-label="Escolher um percurso">
        <div className="shell pathways-grid">
          <p>Como podemos ajudar?</p>
          {paths.map((path) => (
            <a href={path.href} key={path.title}>
              <span>{path.number}</span>
              <div>
                <strong>{path.title}</strong>
                <small>{path.text}</small>
              </div>
              <b aria-hidden="true">↗</b>
            </a>
          ))}
        </div>
      </section>

      <section className="section legacy-section">
        <div className="shell legacy-grid">
          <div className="legacy-number" aria-hidden="true">
            <span>+</span>50
          </div>
          <div className="legacy-copy">
            <p className="eyebrow">Uma história feita de proximidade</p>
            <h2>{c.aboutTitle}</h2>
            <p className="lead">{c.about}</p>
            <p>
              Ao longo das diferentes fases da vida, o Centro aproxima pessoas,
              famílias, profissionais, voluntários e parceiros para construir
              respostas concretas às necessidades da comunidade.
            </p>
            <a className="text-link" href="/instituicao">
              Conhecer a nossa história <span aria-hidden="true">↗</span>
            </a>
          </div>
          <dl className="legacy-facts">
            <div>
              <dt>2</dt>
              <dd>polos no Feijó e Laranjeiro</dd>
            </div>
            <div>
              <dt>3</dt>
              <dd>gerações acompanhadas</dd>
            </div>
            <div>
              <dt>1</dt>
              <dd>comunidade ligada pela proximidade</dd>
            </div>
          </dl>
        </div>
      </section>

      <section className="section programs-section" id="respostas">
        <div className="shell section-heading programs-heading">
          <div>
            <p className="eyebrow">Respostas sociais</p>
            <h2>Presentes onde a vida acontece.</h2>
          </div>
          <div>
            <p>
              Da educação nos primeiros anos ao apoio em casa, cada resposta
              nasce de uma necessidade real e de uma relação próxima com as
              pessoas.
            </p>
            <a className="text-link" href="/servicos">
              Ver todas as respostas <span aria-hidden="true">↗</span>
            </a>
          </div>
        </div>
        <div className="shell program-showcase">
          {programGroups.map((group) => (
            <article className="program-feature" key={group.id}>
              <div className="program-index">
                <span>{group.number}</span>
                <small>{group.eyebrow}</small>
              </div>
              <h3>{group.title}</h3>
              <p>{group.summary}</p>
              <ul>
                {group.items.slice(0, 4).map((item) => (
                  <li key={item.title}>{item.title}</li>
                ))}
              </ul>
              <a href={`/servicos#${group.id}`}>
                Explorar resposta <span aria-hidden="true">↗</span>
              </a>
            </article>
          ))}
        </div>
      </section>

      <section className="section real-place-section">
        <div className="shell real-place-heading">
          <div>
            <p className="eyebrow">Um lugar real, perto de si</p>
            <h2>Espaços que acolhem, ligam e fazem crescer.</h2>
          </div>
          <p>
            Na sede do Feijó e na extensão do Laranjeiro, o dia faz-se de
            aprendizagem, convívio, refeições, atividades e acompanhamento.
          </p>
        </div>
        <div className="shell photo-story">
          <figure className="photo-main">
            <ResponsiveImage
              variants={buildingImage}
              alt="Entrada principal da sede do Centro Comunitário"
              sizes="(max-width: 800px) 100vw, 58vw"
            />
            <figcaption>Sede · Feijó</figcaption>
          </figure>
          <figure className="photo-secondary">
            <ResponsiveImage
              variants={academicImage}
              alt="Sala do Centro Académico preparada para apoio ao estudo"
              sizes="(max-width: 800px) 100vw, 34vw"
            />
            <figcaption>Centro Académico</figcaption>
          </figure>
          <figure className="photo-tertiary">
            <ResponsiveImage
              variants={playgroundImage}
              alt="Exterior da sede com espaço de recreio"
              sizes="(max-width: 800px) 100vw, 34vw"
            />
            <figcaption>Espaço exterior</figcaption>
          </figure>
        </div>
      </section>

      <section className="section daily-section">
        <div className="shell daily-grid">
          <div className="daily-intro">
            <p className="eyebrow">O dia no Centro</p>
            <h2>Rotinas que dão segurança. Atividades que dão vida.</h2>
            <p>
              Os horários abaixo refletem a rotina publicada no site atual e
              ajudam a compreender o funcionamento de cada resposta.
            </p>
          </div>
          <div className="daily-list">
            {dailyRhythms.map((rhythm, index) => (
              <article key={rhythm.title}>
                <span>{String(index + 1).padStart(2, "0")}</span>
                <div>
                  <h3>{rhythm.title}</h3>
                  <p>{rhythm.text}</p>
                </div>
                <strong>{rhythm.hours}</strong>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section support-section">
        <div className="shell support-grid">
          <div>
            <p className="eyebrow">Participar e apoiar</p>
            <h2>Uma instituição comunitária cresce com toda a comunidade.</h2>
          </div>
          <div>
            <p className="lead">
              Colaboradores, famílias, voluntários, parceiros e doadores tornam
              possível uma ação social próxima em todas as fases da vida.
            </p>
            <div className="support-actions">
              <a className="button button-accent" href="/contactos">
                Quero ajudar <span aria-hidden="true">↗</span>
              </a>
              <a className="text-link" href="/instituicao">
                Conhecer a missão
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section shell registration-callout">
        <div>
          <p className="eyebrow">Inscrição infantil · percurso digital</p>
          <h2>{c.registrationTitle}</h2>
        </div>
        <div>
          <p>{c.registration}</p>
          <a className="button button-accent" href="/inscricoes">
            Preparar a inscrição <span aria-hidden="true">↗</span>
          </a>
        </div>
      </section>

      <section className="contact-ribbon">
        <div className="shell contact-ribbon-inner">
          <p>
            <strong>Não sabe por onde começar?</strong>
            A nossa equipa ajuda a encontrar a resposta certa.
          </p>
          <div>
            <a href={`tel:${institution.phone.replaceAll(" ", "")}`}>
              {institution.phone}
            </a>
            <a href="/contactos">Todos os contactos →</a>
          </div>
        </div>
      </section>

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "NGO",
            name: institution.name,
            url: process.env.APP_URL || "http://localhost:3000",
            email: institution.email,
            telephone: institution.phone,
            address: {
              "@type": "PostalAddress",
              streetAddress: institution.address,
              postalCode: institution.postalCode,
              addressLocality: institution.locality,
              addressCountry: "PT",
            },
          }).replace(/</g, "\u003c"),
        }}
      />
    </main>
  );
}