import React from 'react'
import Link from 'next/link'
import type { Metadata } from 'next'
import './page.css'

export const metadata: Metadata = {
  title: 'Comunidade — OndeVoar.pt',
  description: 'Junta-te à comunidade portuguesa de pilotos de drones. Partilha spots, troca dicas e voa com outros entusiastas.',
}

const CARDS = [
  {
    href: '/spots/novo',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
      </svg>
    ),
    iconClass: 'com-card__icon--blue',
    title: 'Submeter um spot',
    desc: 'Conheces um local incrível para voar drones em Portugal? Partilha-o. Cada spot aprovado ajuda outros pilotos a descobrir novos destinos.',
    cta: 'Submeter spot →',
  },
  {
    href: '/spots',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
      </svg>
    ),
    iconClass: 'com-card__icon--green',
    title: 'Escrever uma review',
    desc: 'Visitaste um spot? A tua experiência real — acessos, condições, obstáculos — ajuda outros pilotos a decidir se vale a pena a viagem.',
    cta: 'Ver spots →',
  },
  {
    href: '/contacto',
    icon: (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
        <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
      </svg>
    ),
    iconClass: 'com-card__icon--amber',
    title: 'Reportar problemas',
    desc: 'Encontraste um spot desactualizado, uma zona incorrecta ou algum dado errado? Avisa-nos — a tua ajuda mantém a plataforma fiável para todos.',
    cta: 'Contactar →',
  },
] as const

export default function ComunidadePage() {
  return (
    <div className="com-page">

      {/* Hero */}
      <section className="com-hero">
        <div className="com-hero__inner">
          <div>
            <span className="com-hero__eyebrow">Comunidade</span>
            <h1 className="com-hero__title">
              Feita por pilotos,<br />
              <span>para pilotos</span>
            </h1>
            <p className="com-hero__desc">
              A OndeVoar.pt é construída colectivamente. Cada spot submetido,
              cada review escrita e cada correcção reportada torna a plataforma
              melhor para toda a comunidade portuguesa de drones.
            </p>
            <div className="com-hero__actions">
              <Link href="/spots/novo" className="com-hero__cta-primary">
                Submeter spot
              </Link>
              <Link href="/spots" className="com-hero__cta-ghost">
                Explorar spots
              </Link>
            </div>
          </div>

          <div className="com-hero__stats">
            <div>
              <div className="com-hero__stat-num">500+</div>
              <div className="com-hero__stat-label">Pilotos registados</div>
            </div>
            <div className="com-hero__stat-divider" />
            <div>
              <div className="com-hero__stat-num">120+</div>
              <div className="com-hero__stat-label">Spots partilhados</div>
            </div>
            <div className="com-hero__stat-divider" />
            <div>
              <div className="com-hero__stat-num">2400+</div>
              <div className="com-hero__stat-label">Zonas mapeadas</div>
            </div>
          </div>
        </div>
      </section>

      {/* Body */}
      <div className="com-body">

        <h2 className="com-section-title">Como participar agora</h2>
        <p className="com-section-sub">Três formas de contribuir hoje mesmo, sem esperar pelo fórum.</p>

        <div className="com-cards">
          {CARDS.map((c) => (
            <Link key={c.href} href={c.href} className="com-card">
              <div className={`com-card__icon ${c.iconClass}`}>{c.icon}</div>
              <h3 className="com-card__title">{c.title}</h3>
              <p className="com-card__desc">{c.desc}</p>
              <span className="com-card__link">{c.cta}</span>
            </Link>
          ))}
        </div>

        {/* Coming soon */}
        <div className="com-coming">
          <div>
            <span className="com-coming__badge">Em breve</span>
            <h3 className="com-coming__title">Muito mais está a chegar</h3>
            <ul className="com-coming__list">
              <li>Fórum dedicado por região e categoria de drone</li>
              <li>Perfis públicos de piloto com histórico de spots</li>
              <li>Desafios fotográficos e de vídeo da comunidade</li>
              <li>Sistema de reputação e badges de contribuição</li>
              <li>Grupos de voo por distrito</li>
            </ul>
          </div>
          <Link href="/contacto" className="com-coming__cta">
            Dar sugestões
          </Link>
        </div>

      </div>
    </div>
  )
}