/**
 * LogistiqueHeroEN — English variant of the Logistics industry hero.
 *
 * Faithful copy of LogistiqueHero with EN strings. France-specific content
 * (CEE premiums) stripped; CTA sells the coating ("Request a quote").
 */

import { useState } from 'react';
import { ArrowRight, ShieldCheck, Thermometer, RefreshCw, Layers } from 'lucide-react';

const trustLogos = [
  { name: 'E.Leclerc', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-leclerc.svg' },
  { name: 'Carrefour Market', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-carrefour-market.svg' },
  { name: 'Nestlé', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-nestle.svg' },
  { name: 'SNCF', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-sncf.svg' },
  { name: 'Continental', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-continental.svg' },
  { name: 'Cora', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-cora.svg' },
  { name: 'Super U', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-super-u.svg' },
  { name: 'Thales', url: '/logos/logo-thales.svg' },
  { name: 'Valneva', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-valneva.svg' },
  { name: 'Somfy', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-somfy.svg' },
  { name: 'Servier', url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-servier.svg' },
  { name: "McDonald's", url: 'https://www.covalba.fr/hubfs/img-2024/logo/logo-mcdonalds.svg' },
];

const stats = [
  { icon: Thermometer, value: '−10°C', label: 'under the roof' },
  { icon: RefreshCw, value: 'No interruption', label: 'to your operations' },
  { icon: Layers, value: 'Steel deck · Bitumen', label: 'Membrane compatible' },
];

const sectors = [
  'Industry',
  'Logistics',
  'Pharma',
  'Aerospace / Defense',
  'Food processing',
  'Commercial buildings',
  'Public buildings',
  'Other',
];

const inputClass =
  'w-full px-4 py-3 rounded-xl bg-white/[0.07] border border-white/[0.12] text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-white/25 transition-all duration-300 text-sm font-body';

const selectClass =
  'w-full px-4 py-3 rounded-xl bg-white/[0.07] border border-white/[0.12] text-white focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-white/25 transition-all duration-300 appearance-none text-sm font-body';

export default function LogistiqueHeroEN() {
  const [form, setForm] = useState({ email: '', surface: '', sector: 'Logistics' });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const surfaceNum = parseFloat(form.surface) || 0;
  const estimMin = surfaceNum * 18;
  const estimMax = surfaceNum * 25;
  const fmt = (n: number) => new Intl.NumberFormat('en-US').format(n);

  return (
    <section
      aria-labelledby="logistique-hero-title"
      className="relative isolate flex flex-col overflow-hidden bg-navy text-cream min-h-[100svh]"
    >
      {/* ── PHOTO BG full-bleed ── */}
      <picture className="absolute inset-0 -z-10">
        <source media="(max-width: 767px)" srcSet="/images/industrie-logistique-hero-mobile.jpg" />
        <img
          src="/images/industrie-logistique-hero-desktop.jpg"
          alt="Aerial view of a logistics warehouse with a reflective white cool roof"
          className="size-full object-cover scale-[1.02]"
          loading="eager"
          decoding="async"
        />
      </picture>

      {/* Desktop : heavy navy left → photo breathes on the right */}
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 hidden lg:block bg-gradient-to-r from-navy/[0.92] via-navy/55 to-navy/25"
      />
      {/* Mobile : navy top + bottom, photo breathes in the middle */}
      <div
        aria-hidden="true"
        className="absolute inset-0 -z-10 lg:hidden bg-gradient-to-b from-navy/80 via-navy/15 to-navy/95"
      />
      {/* Soft transition toward the marquee */}
      <div
        aria-hidden="true"
        className="absolute inset-x-0 bottom-0 -z-10 h-[28%] bg-gradient-to-t from-navy via-navy/85 to-transparent"
      />

      {/* ── CONTENT — split 55/45 (text / form) ── */}
      <div className="container relative z-10 mx-auto px-6 lg:px-12 pt-24 lg:pt-28 pb-10 lg:pb-16 flex-1 flex items-center">
        <div className="w-full grid grid-cols-1 lg:grid-cols-[55fr_45fr] gap-10 lg:gap-12 items-center">
          {/* ── LEFT — text ── */}
          <div className="max-w-2xl space-y-6 lg:space-y-8">
            {/* Eyebrow */}
            <div className="flex items-center gap-3">
              <span className="h-px w-9 bg-teal-vivid" aria-hidden="true" />
              <span className="text-teal-vivid text-[11px] font-semibold font-body uppercase tracking-[0.22em]">
                Logistics cool roof
              </span>
            </div>

            {/* H1 */}
            <h1
              id="logistique-hero-title"
              className="font-satoshi font-bold text-white leading-[1.02]"
              style={{ fontSize: 'clamp(2.25rem, 4.6vw, 4rem)', letterSpacing: '-0.03em' }}
            >
              Keep your warehouses cool all summer long.
            </h1>

            {/* Sub */}
            <p
              className="font-satoshi font-medium text-cream/65 leading-[1.3] max-w-xl"
              style={{ fontSize: 'clamp(1rem, 1.5vw, 1.375rem)', letterSpacing: '-0.005em' }}
            >
              Better working conditions for your teams and protected goods, without relying on air
              conditioning and with no disruption to operations.
            </p>

            {/* Stats */}
            <ul
              className="flex flex-col sm:flex-row sm:flex-wrap gap-4 lg:gap-6 pt-1"
              aria-label="Key benefits"
            >
              {stats.map((s, i) => {
                const Icon = s.icon;
                return (
                  <li
                    key={i}
                    className={`flex items-start gap-3 ${
                      i !== 0 ? 'sm:pl-6 sm:border-l sm:border-white/10' : ''
                    }`}
                  >
                    <Icon className="w-[18px] h-[18px] text-teal-vivid shrink-0 mt-0.5" strokeWidth={1.5} />
                    <div className="leading-tight">
                      <p className="font-satoshi font-bold text-white text-[15px] lg:text-base">
                        {s.value}
                      </p>
                      <p className="text-cream/55 text-[12.5px] lg:text-[13px] font-body mt-1">
                        {s.label}
                      </p>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* ── RIGHT — Lead form (home Hero pattern) ── */}
          <div className="animate-hero-stats">
            <div className="rounded-[1.5rem] bg-white/[0.04] border border-white/[0.08] p-1.5 backdrop-blur-sm">
              <div className="rounded-[calc(1.5rem-6px)] bg-[#0b1a2b]/80 backdrop-blur-xl border border-white/[0.06] shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] p-4 lg:p-7">
                {!submitted ? (
                  <>
                    <h3 className="font-satoshi text-xl lg:text-2xl font-bold text-white mb-1 text-center">
                      Request a quote
                    </h3>
                    <p className="text-[12px] text-white/50 mb-4 font-body text-center">
                      Tailored response within 24h
                    </p>
                    <form onSubmit={handleSubmit} className="space-y-2.5 lg:space-y-3">
                      <div className="relative">
                        <select
                          value={form.sector}
                          onChange={(e) => setForm({ ...form, sector: e.target.value })}
                          required
                          className={selectClass}
                        >
                          <option value="" disabled className="text-foreground bg-card">
                            Industry sector
                          </option>
                          {sectors.map((s) => (
                            <option key={s} value={s} className="text-foreground bg-card">
                              {s}
                            </option>
                          ))}
                        </select>
                        <div className="pointer-events-none absolute inset-y-0 right-4 flex items-center">
                          <svg
                            className="w-4 h-4 text-white/50"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                          </svg>
                        </div>
                      </div>
                      <input
                        type="number"
                        placeholder="Approximate area (m²)"
                        required
                        min="1"
                        value={form.surface}
                        onChange={(e) => setForm({ ...form, surface: e.target.value })}
                        className={inputClass}
                      />
                      <input
                        type="email"
                        placeholder="Work email"
                        required
                        value={form.email}
                        onChange={(e) => setForm({ ...form, email: e.target.value })}
                        className={inputClass}
                      />

                      <button
                        type="submit"
                        className="group w-full cta-gradient text-white font-semibold py-3 rounded-full active:scale-[0.98] flex items-center justify-center gap-3 mt-1 hover:shadow-[0_8px_40px_rgba(153,20,55,0.35)]"
                      >
                        <span className="text-[15px]">Request my quote</span>
                        <span className="flex items-center justify-center w-8 h-8 rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
                          <ArrowRight className="w-4 h-4" />
                        </span>
                      </button>
                    </form>

                    <div className="flex items-center justify-center gap-4 mt-3 text-[11px] text-white/35 font-body">
                      <span>Free</span>
                      <span className="w-1 h-1 rounded-full bg-white/20" />
                      <span>No commitment</span>
                      <span className="w-1 h-1 rounded-full bg-white/20" />
                      <span>Response within 24h</span>
                    </div>
                  </>
                ) : (
                  <div className="text-center py-4">
                    <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-4">
                      <ShieldCheck className="w-6 h-6 text-primary" />
                    </div>
                    <p className="text-white/60 text-sm mb-1 font-body">
                      Estimate for {fmt(surfaceNum)} m²
                    </p>
                    <p className="font-satoshi text-2xl font-bold text-white mb-4">
                      €{fmt(estimMin)} – €{fmt(estimMax)}
                    </p>
                    <p className="text-white/50 text-[13px] font-body mb-4">
                      An expert will contact you within 24h with a detailed quote.
                    </p>
                    <button
                      onClick={() => setSubmitted(false)}
                      className="text-primary text-sm font-semibold hover:underline font-body"
                    >
                      Edit my request
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── MARQUEE LOGOS ── */}
      <div className="relative z-10 mt-auto">
        <div className="bg-navy/85 backdrop-blur-md py-5 overflow-hidden">
          <p className="hidden lg:block text-center text-white/35 text-[10px] font-body uppercase tracking-[0.2em] font-semibold mb-3">
            Companies already taking control of heat across their sites
          </p>
          <div className="flex animate-marquee">
            {[...trustLogos, ...trustLogos].map((logo, i) => (
              <div
                key={i}
                className="flex-shrink-0 mx-6 lg:mx-10 flex items-center justify-center h-9 w-24 lg:w-28"
              >
                <img
                  src={logo.url}
                  alt={logo.name}
                  className="max-h-7 lg:max-h-8 max-w-full w-auto object-contain brightness-0 invert opacity-40"
                  loading="lazy"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}