import React from 'react'
import type { Metadata } from 'next'
import { SpotForm } from '@/components/spots'
import './page.css'

export const metadata: Metadata = {
  title: 'Submeter Spot — OndeVoar.pt',
  description: 'Partilha um local fantástico para voar drones em Portugal.',
}

const TIPS = [
  {
    icon: (
      <svg width="20" height="20" 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>
    ),
    title: 'Coordenadas precisas',
    desc: 'Abre o Google Maps, clica com o botão direito no local exacto e copia as coordenadas.',
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
      </svg>
    ),
    title: 'Descrição útil',
    desc: 'Inclui acessos, estacionamento, horários recomendados e obstáculos conhecidos.',
  },
  {
    icon: (
      <svg width="20" height="20" 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>
    ),
    title: 'Verifica as restrições',
    desc: 'Confirma no mapa OndeVoar se a zona é livre, condicionada ou proibida antes de submeter.',
  },
  {
    icon: (
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
      </svg>
    ),
    title: 'Moderação em 48h',
    desc: 'A nossa equipa revê cada spot submetido. Recebes uma notificação quando for aprovado.',
  },
] as const

export default function NovoSpotPage() {
  return (
    <div className="novo-page">
      <div className="novo-layout">

        {/* Left: form */}
        <div className="novo-form-col">
          <div className="novo-form-header">
            <h1 className="novo-title">Submeter Novo Spot</h1>
            <p className="novo-subtitle">
              Partilha um local fantástico para voar drones. Será revisto pela nossa equipa antes de aparecer na plataforma.
            </p>
          </div>
          <SpotForm />
        </div>

        {/* Right: guide panel */}
        <aside className="novo-guide">
          <div className="novo-guide-card">
            <h2 className="novo-guide-title">Como submeter um bom spot</h2>
            <ul className="novo-guide-list">
              {TIPS.map((tip) => (
                <li key={tip.title} className="novo-guide-item">
                  <span className="novo-guide-icon">{tip.icon}</span>
                  <div>
                    <p className="novo-guide-item-title">{tip.title}</p>
                    <p className="novo-guide-item-desc">{tip.desc}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          <div className="novo-guide-card novo-guide-card--dark">
            <h3 className="novo-guide-dark-title">Regulamento EU 2019/947</h3>
            <p className="novo-guide-dark-desc">
              Só podes voar legalmente em zonas aprovadas para a categoria do teu drone. Verifica sempre as zonas ANAC e os NOTAMs activos antes de descolar.
            </p>
            <a href="/zonas-anac" className="novo-guide-link">Ver zonas ANAC →</a>
          </div>
        </aside>

      </div>
    </div>
  )
}