'use client'

import Image from 'next/image'
import Link from 'next/link'
import { useLang } from '@/context/LangContext'
import { hasAndroidStoreUrl, hasIosStoreUrl, siteConfig } from '@/lib/site'

export default function CTA() {
  const { t } = useLang()

  return (
    <section className="cta-section" id="cta" aria-labelledby="cta-heading">
      <div className="container">
        <div className="cta-card">
          <div className="cta-card-glow" aria-hidden="true" />

          <div className="cta-content">
            <p className="tag" style={{ color: 'var(--green-light)' }}>{t.cta.tag}</p>
            <h2 id="cta-heading">
              {t.cta.h2a}<br />
              <em>{t.cta.h2em}</em>
            </h2>
            <p>{t.cta.desc}</p>

            <div className="store-row">
              <a
                href={hasIosStoreUrl ? siteConfig.iosAppStoreUrl : '/support'}
                className="store-btn"
                id="cta-appstore"
                aria-label="App Store or support"
              >
                <svg className="store-btn-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
                </svg>
                <div>
                  <span className="store-btn-small">{hasIosStoreUrl ? t.cta.apple : t.cta.support}</span>
                  <span className="store-btn-big">{hasIosStoreUrl ? 'App Store' : t.cta.supportLabel}</span>
                </div>
              </a>
              <a
                href={hasAndroidStoreUrl ? siteConfig.androidPlayStoreUrl : `mailto:${siteConfig.supportEmail}`}
                className="store-btn"
                id="cta-googleplay"
                aria-label="Google Play or contact"
              >
                <svg className="store-btn-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M3.18 23.76c.33.18.7.24 1.08.17L14.84 12 11.17 8.33 3.18 23.76zm17.16-12.38-3.32-1.89-3.78 3.78 3.78 3.78 3.34-1.9c.95-.54.95-1.92-.02-2.77zM2.01 1.11C1.7 1.44 1.5 1.97 1.5 2.67v18.66c0 .7.2 1.23.51 1.56l.08.08L12.16 12v-.22L2.09 1.03l-.08.08zm9.16 10.67 2.67 2.67-10.5 5.97 7.83-8.64z" />
                </svg>
                <div>
                  <span className="store-btn-small">{hasAndroidStoreUrl ? t.cta.google : t.cta.contact}</span>
                  <span className="store-btn-big">{hasAndroidStoreUrl ? 'Google Play' : t.cta.email}</span>
                </div>
              </a>
            </div>
            <p className="cta-footnote">
              {hasIosStoreUrl || hasAndroidStoreUrl ? t.cta.liveNote : t.cta.comingSoon} <Link href="/support">Support</Link>
            </p>
          </div>

          <div className="cta-visual" aria-hidden="true">
            <Image
              src="/plant-collection.png"
              alt=""
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              style={{ objectFit: 'cover' }}
            />
            <div className="cta-visual-overlay" />
          </div>
        </div>
      </div>
    </section>
  )
}