import type { Metadata } from 'next'
import Link from 'next/link'
import styles from './press.module.css'

const releaseUrl =
  'https://news.prfree.org/@greenlenspro/greenlens-publishes-a-step-by-step-guide-to-troubleshooting-common-houseplant-problems-0ochpt6gr315'
const routineReleaseUrl =
  'https://news.newswirebiz.com/@greenlenspro/greenlens-shares-a-5-step-plant-care-routine-for-when-houseplants-start-showing-stress-39kipufgt3xh'
const openPrReleaseUrl =
  'https://www.openpr.de/news/1319466/Zimmerpflanzen-retten-statt-raten-6-Fragen-vor-jedem-Pflege-Schritt.html'

export const metadata: Metadata = {
  title: 'Press | GreenLens',
  description: 'Latest GreenLens news, press releases, and company announcements.',
  alternates: { canonical: '/press' },
}

export default function PressPage() {
  return (
    <main className={styles.page}>
      <section className={styles.hero}>
        <div className={styles.contour} aria-hidden="true" />
        <div className={styles.heroInner}>
          <header className={styles.nav}>
            <Link href="/" className={styles.brand} aria-label="GreenLens home">
              <span className={styles.brandMark} aria-hidden="true">
                <LeafIcon />
              </span>
              GreenLens
            </Link>
            <nav aria-label="Press navigation" className={styles.navLinks}>
              <Link href="/">Home</Link>
              <Link href="/support">Support</Link>
              <a href="https://apps.apple.com/de/app/plant-doctor-greenlens-pro/id6759843546?l=en-GB" target="_blank" rel="noreferrer">
                Get the app
              </a>
            </nav>
          </header>

          <div className={styles.heroCopy}>
            <p className={styles.kicker}>GreenLens press office</p>
            <h1>Newsroom</h1>
            <div className={styles.rule} />
            <p>Latest updates, product news, and practical plant-care resources from the GreenLens team.</p>
          </div>
        </div>
      </section>

      <section className={styles.releases} aria-labelledby="latest-release">
        <div className={styles.content}>
          <div className={styles.sectionHeading}>
            <span className={styles.sectionIcon} aria-hidden="true"><LeafIcon /></span>
            <h2 id="latest-release">Latest releases</h2>
            <span className={styles.headingLine} aria-hidden="true" />
          </div>

          <div className={styles.releaseList}>
            <ReleaseCard
              title="Zimmerpflanzen retten statt raten: 6 Fragen vor jedem Pflege-Schritt"
              lede="Der deutschsprachige Ratgeber zeigt, wie Pflanzenfans Symptome einordnen, vor einer Veränderung die wichtigsten Hinweise prüfen und mit ruhigen, nachvollziehbaren Schritten handeln können."
              points={[
                'Sichtbare Veränderungen genauer beschreiben statt sofort zu reagieren.',
                'Wasser, Licht und jüngste Änderungen am Standort prüfen.',
                'Hinweise auf Schädlinge oder Krankheiten früh erkennen.',
                'Mit kleinen Anpassungen arbeiten und die Entwicklung dokumentieren.',
              ]}
              href={openPrReleaseUrl}
              date="July 30, 2026"
            />
            <ReleaseCard
              title="GreenLens Shares a 5-Step Plant Care Routine for When Houseplants Start Showing Stress"
              lede="A practical five-step routine helps indoor plant owners assess common warning signs before changing watering, light, fertilizer, or treatments."
              points={[
                'Define the symptom before treating it.',
                'Review recent changes in the plant’s environment.',
                'Check the root zone, drainage, and available light.',
                'Make one low-risk adjustment and document the response.',
              ]}
              href={routineReleaseUrl}
            />
            <ReleaseCard
              title="GreenLens Publishes a Step-by-Step Guide to Troubleshooting Common Houseplant Problems"
              lede="The new guide gives indoor plant owners a practical way to assess yellow leaves, brown tips, wilting, pests, light, and watering before making a care change."
              points={[
                'Read symptom patterns before reacting to a single leaf.',
                'Check watering, drainage, light, and recent changes one at a time.',
                'Build a simple photo-and-notes history to spot recurring patterns.',
                'Know when a plant issue needs professional or urgent attention.',
              ]}
              href={releaseUrl}
            />
          </div>
        </div>
      </section>
    </main>
  )
}

function ReleaseCard({
  title,
  lede,
  points,
  href,
  date = 'July 29, 2026',
}: {
  title: string
  lede: string
  points: string[]
  href: string
  date?: string
}) {
  return (
    <article className={styles.releaseCard}>
      <div className={styles.releaseMeta}>
        <time dateTime={date === 'July 30, 2026' ? '2026-07-30' : '2026-07-29'}>{date}</time>
        <span>Press release</span>
      </div>

      <h3>{title}</h3>
      <p className={styles.lede}>{lede}</p>

      <div className={styles.keyPoints}>
        <h4>What the guide covers</h4>
        <ul>
          {points.map((point) => <li key={point}><LeafBullet /> {point}</li>)}
        </ul>
      </div>

      <div className={styles.releaseFooter}>
        <p>Source: <strong>GreenLens Press Office</strong></p>
        <a href={href} target="_blank" rel="noreferrer" className={styles.releaseLink}>
          Read full release <span aria-hidden="true">→</span>
        </a>
      </div>
    </article>
  )
}

function LeafIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M19.5 3.5C12.1 3.6 6.4 7.2 5.1 13.1c-.8 3.7 1.4 6.6 4.8 6.6 6.3 0 9.9-7.7 9.6-16.2Z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round" />
      <path d="M4.4 20.5c3.8-4.6 7.7-7.8 12.4-10.1M10.2 14.5l.7 4.2M13.9 10.5l3.1 1" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
    </svg>
  )
}

function LeafBullet() {
  return <span className={styles.bullet} aria-hidden="true"><LeafIcon /></span>
}