// Testimonial + CTA + Contact + Footer

const { Arrow: FArrow, ArrowUpRight: FArrowUR, Check: FCheck, Mail: FMail, MapPin: FMapPin, Clock: FClock, Linkedin: FLinkedin, X: FX, Github: FGithub } = window.Icons;

function Testimonial() {
  return (
    <section className="relative py-32 lg:py-44 overflow-hidden">
      {/* Subtle background flourish */}
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[500px] rounded-full"
             style={{background: 'radial-gradient(ellipse at center, rgba(139,92,246,0.07), transparent 60%)', filter: 'blur(60px)'}}></div>
      </div>

      <div className="relative max-w-[1100px] mx-auto px-6 lg:px-10">
        <div className="reveal flex items-center justify-center gap-3 mb-12">
          <div className="h-px w-12" style={{background: 'var(--hairline)'}}></div>
          <span className="font-mono text-[10.5px] uppercase tracking-[0.22em]" style={{color: 'var(--muted)'}}>
            In their words
          </span>
          <div className="h-px w-12" style={{background: 'var(--hairline)'}}></div>
        </div>

        <blockquote className="reveal text-center" data-delay="80">
          <span className="font-serif italic text-[42px] sm:text-[58px] lg:text-[78px] leading-[1.05] tracking-[-0.025em] block"
                style={{color: 'var(--ink)'}}>
            <span className="not-italic font-display" style={{color: 'var(--accent-violet)'}}>“</span>
            They behaved like part of our team from day one. We&apos;ve worked with all the
            usual names — none of them would have <span style={{color: 'var(--ink-warm)'}}>shipped this</span>,
            this well, in this window.
            <span className="not-italic font-display" style={{color: 'var(--accent-violet)'}}>”</span>
          </span>
        </blockquote>

        <div className="reveal mt-12 flex items-center justify-center gap-4" data-delay="200">
          <div className="w-12 h-12 rounded-full flex items-center justify-center font-display text-[15px] font-semibold"
               style={{background: 'var(--grad)', color: 'white'}}>
            MR
          </div>
          <div className="text-left">
            <div className="font-display text-[15px] font-semibold" style={{color: 'var(--ink)'}}>VP of Engineering</div>
            <div className="font-mono text-[11px] uppercase tracking-[0.18em] mt-0.5" style={{color: 'var(--muted)'}}>
              Specialty Lender · 9-figure ARR
            </div>
          </div>
        </div>

        {/* TODO: Replace with real attributed testimonial once client provides quote + permission */}
      </div>
    </section>
  );
}

function CTASection() {
  const magRef = useMagnetic(0.15);
  return (
    <section className="relative pb-20 lg:pb-28 pt-4">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="cta-bg px-8 py-16 sm:px-14 sm:py-20 lg:px-20 lg:py-28 text-center">
          <div className="reveal flex items-center justify-center gap-3 mb-8" data-delay="0">
            <span className="font-mono text-[10.5px] uppercase tracking-[0.22em]" style={{color: 'rgba(245,244,238,0.65)'}}>
              — Let&apos;s build —
            </span>
          </div>
          <h2 className="reveal font-display text-[42px] sm:text-[58px] lg:text-[84px] leading-[0.96] tracking-[-0.045em] font-medium mb-7 max-w-[920px] mx-auto"
              style={{color: 'white'}} data-delay="80">
            Let&apos;s build what <span className="serif-em" style={{color: '#F5F4EE'}}>comes next.</span>
          </h2>
          <p className="reveal text-[16px] lg:text-[19px] max-w-[600px] mx-auto mb-12 leading-[1.5]"
             style={{color: 'rgba(245,244,238,0.75)'}} data-delay="160">
            A 30-minute consultation. No pitch. We map your highest-leverage opportunity
            and tell you what we&apos;d build — whether or not it&apos;s us building it.
          </p>
          <div className="reveal flex flex-wrap items-center justify-center gap-3" data-delay="240">
            <a ref={magRef} href="#contact"
               className="inline-flex items-center gap-2 px-7 py-3.5 rounded-full font-medium text-[15px]"
               style={{background: 'white', color: '#0A0B0F', transition: 'transform 200ms ease'}}>
              Book a consultation <FArrow size={16} />
            </a>
            <a href="mailto:info@cardefisolutions.com"
               className="inline-flex items-center gap-2 px-7 py-3.5 rounded-full font-medium text-[15px] border"
               style={{borderColor: 'rgba(255,255,255,0.25)', color: 'white'}}>
              info@cardefisolutions.com
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [state, setState] = useState({ name: '', email: '', company: '', message: '' });
  const [status, setStatus] = useState('idle'); // idle | sending | success | error
  const [errors, setErrors] = useState({});
  const [submitError, setSubmitError] = useState('');

  const validate = () => {
    const e = {};
    if (!state.name.trim()) e.name = 'Required';
    if (!state.email.trim()) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(state.email)) e.email = 'Invalid email';
    if (!state.message.trim()) e.message = 'Tell us a bit about your project';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setStatus('sending');
    setSubmitError('');
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          access_key: '7913ea58-59c3-44c5-91e1-42f2a8283f50',
          from_name: 'Cardefi Solutions Website',
          subject: `New inquiry from ${state.name}${state.company ? ` · ${state.company}` : ''}`,
          name: state.name,
          email: state.email,
          company: state.company,
          message: state.message,
        }),
      });
      const data = await res.json();
      if (data.success) {
        setStatus('success');
      } else {
        setStatus('error');
        setSubmitError(data.message || 'Something went wrong. Please email us directly.');
      }
    } catch (err) {
      setStatus('error');
      setSubmitError('Network error. Please email us directly.');
    }
  };

  if (status === 'success') {
    return (
      <div className="rounded-2xl p-10 lg:p-12 text-center"
           style={{background: 'var(--surface-1)', border: '1px solid var(--border)'}}>
        <div className="mx-auto w-14 h-14 rounded-full flex items-center justify-center mb-6"
             style={{background: 'var(--grad)'}}>
          <FCheck size={26} stroke={2} className="text-white" />
        </div>
        <h3 className="font-display text-[24px] font-semibold tracking-tight mb-3" style={{color: 'var(--ink)'}}>
          Message received.
        </h3>
        <p className="text-[14.5px] leading-[1.6] max-w-[400px] mx-auto" style={{color: 'var(--muted)'}}>
          Thanks, {state.name.split(' ')[0]}. A senior engineer will be in touch within one business day — usually faster.
        </p>
        <button
          onClick={() => { setState({ name: '', email: '', company: '', message: '' }); setStatus('idle'); }}
          className="mt-7 font-mono text-[11px] uppercase tracking-[0.18em]"
          style={{color: 'var(--accent-violet)'}}
        >
          Send another →
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={submit} noValidate className="rounded-2xl p-7 lg:p-9 space-y-5"
          style={{background: 'var(--surface-1)', border: '1px solid var(--border)'}}>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label className="block font-mono text-[10px] uppercase tracking-[0.18em] mb-2" style={{color: 'var(--muted)'}}>
            Name <span style={{color: 'var(--accent-violet)'}}>*</span>
          </label>
          <input
            type="text"
            className="input"
            value={state.name}
            onChange={e => setState({ ...state, name: e.target.value })}
            placeholder="Jane Doe"
            aria-invalid={!!errors.name}
            style={errors.name ? { borderColor: '#ef4444' } : {}}
          />
          {errors.name && <p className="text-[11px] mt-1.5" style={{color: '#ef4444'}}>{errors.name}</p>}
        </div>
        <div>
          <label className="block font-mono text-[10px] uppercase tracking-[0.18em] mb-2" style={{color: 'var(--muted)'}}>
            Email <span style={{color: 'var(--accent-violet)'}}>*</span>
          </label>
          <input
            type="email"
            className="input"
            value={state.email}
            onChange={e => setState({ ...state, email: e.target.value })}
            placeholder="jane@company.com"
            aria-invalid={!!errors.email}
            style={errors.email ? { borderColor: '#ef4444' } : {}}
          />
          {errors.email && <p className="text-[11px] mt-1.5" style={{color: '#ef4444'}}>{errors.email}</p>}
        </div>
      </div>

      <div>
        <label className="block font-mono text-[10px] uppercase tracking-[0.18em] mb-2" style={{color: 'var(--muted)'}}>
          Company
        </label>
        <input
          type="text"
          className="input"
          value={state.company}
          onChange={e => setState({ ...state, company: e.target.value })}
          placeholder="Company name"
        />
      </div>

      <div>
        <label className="block font-mono text-[10px] uppercase tracking-[0.18em] mb-2" style={{color: 'var(--muted)'}}>
          What are you exploring? <span style={{color: 'var(--accent-violet)'}}>*</span>
        </label>
        <textarea
          className="input"
          rows={5}
          value={state.message}
          onChange={e => setState({ ...state, message: e.target.value })}
          placeholder="A few sentences on the problem, timeline, and where you are today…"
          aria-invalid={!!errors.message}
          style={errors.message ? { borderColor: '#ef4444' } : {}}
        />
        {errors.message && <p className="text-[11px] mt-1.5" style={{color: '#ef4444'}}>{errors.message}</p>}
      </div>

      {status === 'error' && submitError && (
        <div className="rounded-lg px-4 py-3 text-[13px]"
             style={{background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)', color: '#fca5a5'}}>
          {submitError}
        </div>
      )}

      <div className="pt-2 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <p className="font-mono text-[10.5px] uppercase tracking-[0.18em]" style={{color: 'var(--dim)'}}>
          We reply within one business day
        </p>
        <button
          type="submit"
          disabled={status === 'sending'}
          className="btn-gradient disabled:opacity-60 disabled:cursor-not-allowed"
        >
          {status === 'sending' ? 'Sending…' : 'Send message'}
          {status !== 'sending' && <FArrow size={15} />}
        </button>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <section id="contact" className="relative py-28 lg:py-36" style={{background: 'var(--surface-1)', borderTop: '1px solid var(--border)'}}>
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
          <div className="lg:col-span-5">
            <div className="reveal eyebrow mb-5">Contact</div>
            <h2 className="reveal font-display text-[36px] sm:text-[44px] lg:text-[60px] leading-[1.0] tracking-[-0.04em] font-medium mb-8"
                data-delay="80">
              Let&apos;s talk about
              <br />
              what you&apos;re <span className="serif-em" style={{color: 'var(--ink-warm)'}}>building.</span>
            </h2>
            <p className="reveal text-[15.5px] leading-[1.65] mb-12 max-w-[440px]"
               style={{color: 'var(--muted)'}} data-delay="160">
              Whether it&apos;s an exploration call, a scoped pilot, or a long-term partnership — start
              the conversation and a senior engineer will respond personally.
            </p>

            <ul className="space-y-6 reveal" data-delay="240">
              <li className="flex gap-4">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                     style={{background: 'var(--bg)', border: '1px solid var(--border)'}}>
                  <FMail size={16} stroke={1.5} />
                </div>
                <div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.18em] mb-1.5" style={{color: 'var(--dim)'}}>Email</div>
                  <a href="mailto:info@cardefisolutions.com" className="text-[15px] hover:underline" style={{color: 'var(--ink)'}}>
                    info@cardefisolutions.com
                  </a>
                </div>
              </li>
              <li className="flex gap-4">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                     style={{background: 'var(--bg)', border: '1px solid var(--border)'}}>
                  <FMapPin size={16} stroke={1.5} />
                </div>
                <div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.18em] mb-1.5" style={{color: 'var(--dim)'}}>Location</div>
                  <div className="text-[15px]" style={{color: 'var(--ink)'}}>New Jersey, USA</div>
                  <div className="text-[13px] mt-0.5" style={{color: 'var(--muted)'}}>Serving clients across North America &amp; EMEA</div>
                </div>
              </li>
              <li className="flex gap-4">
                <div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                     style={{background: 'var(--bg)', border: '1px solid var(--border)'}}>
                  <FClock size={16} stroke={1.5} />
                </div>
                <div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.18em] mb-1.5" style={{color: 'var(--dim)'}}>Response time</div>
                  <div className="text-[15px]" style={{color: 'var(--ink)'}}>Within one business day</div>
                  <div className="text-[13px] mt-0.5" style={{color: 'var(--muted)'}}>Mon–Fri · 9:00–18:00 ET</div>
                </div>
              </li>
            </ul>
          </div>

          <div className="lg:col-span-7 reveal" data-delay="120">
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    {
      title: 'Services',
      links: ['AI Strategy', 'AI Agents', 'Custom Software', 'Cloud & Infrastructure', 'Modernization', 'Data Platforms'],
    },
    {
      title: 'Company',
      links: ['About', 'Approach', 'Industries', 'Insights', 'Contact'],
    },
    {
      title: 'Contact',
      links: ['info@cardefisolutions.com', 'New Jersey, USA', 'LinkedIn', 'Book a call'],
    },
  ];

  return (
    <footer className="relative pt-20 pb-10" style={{borderTop: '1px solid var(--border)'}}>
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-2 lg:grid-cols-12 gap-10 mb-16">
          <div className="col-span-2 lg:col-span-5">
            <Logo size={38} />
            <p className="mt-6 text-[14.5px] leading-[1.6] max-w-[340px]" style={{color: 'var(--muted)'}}>
              The senior engineering firm building software, cloud, and AI for operators who can&apos;t afford it to be wrong.
            </p>
            <div className="mt-7 flex items-center gap-2">
              {[
                { icon: FLinkedin, label: 'LinkedIn', href: '#' },
                { icon: FX, label: 'X / Twitter', href: '#' },
                { icon: FGithub, label: 'GitHub', href: '#' },
              ].map(s => (
                <a key={s.label} href={s.href} aria-label={s.label}
                   className="w-9 h-9 rounded-full flex items-center justify-center transition-colors"
                   style={{border: '1px solid var(--border)', color: 'var(--muted)'}}
                   onMouseEnter={e => { e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--hairline)'; }}
                   onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--border)'; }}>
                  <s.icon size={15} />
                </a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.title} className="lg:col-span-2">
              <div className="font-mono text-[10px] uppercase tracking-[0.2em] mb-5" style={{color: 'var(--dim)'}}>
                {c.title}
              </div>
              <ul className="space-y-3">
                {c.links.map(l => (
                  <li key={l}>
                    <a href="#" className="text-[13.5px] transition-colors" style={{color: 'var(--muted)'}}
                       onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'}
                       onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}>
                      {l}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
          <div className="col-span-2 lg:col-span-1"></div>
        </div>

        {/* Big wordmark lockup */}
        <div className="relative overflow-hidden mb-10" aria-hidden="true">
          <div className="font-display font-medium whitespace-nowrap text-center select-none leading-[0.85] tracking-[-0.055em]"
               style={{
                 fontSize: 'clamp(80px, 18vw, 240px)',
                 background: 'linear-gradient(180deg, var(--ink) 0%, transparent 100%)',
                 WebkitBackgroundClip: 'text',
                 backgroundClip: 'text',
                 color: 'transparent',
                 opacity: 0.14,
               }}>
            Cardefi
          </div>
          <div className="absolute inset-x-0 bottom-2 lg:bottom-4 flex items-center justify-center gap-3 sm:gap-5">
            <span className="hidden sm:block h-px w-12 sm:w-24" style={{background: 'var(--hairline)'}}></span>
            <span className="font-mono text-[9.5px] sm:text-[11px] uppercase tracking-[0.38em]" style={{color: 'var(--muted)'}}>
              Solutions
            </span>
            <span className="hidden sm:block h-px w-12 sm:w-24" style={{background: 'var(--hairline)'}}></span>
          </div>
        </div>

        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-8 border-t"
             style={{borderColor: 'var(--border)'}}>
          <div className="font-mono text-[11px]" style={{color: 'var(--dim)'}}>
            © 2026 Cardefi Solutions LLC · All rights reserved.
          </div>
          <div className="flex items-center gap-6 font-mono text-[11px]" style={{color: 'var(--dim)'}}>
            <a href="#" className="hover:text-white transition-colors">Privacy</a>
            <a href="#" className="hover:text-white transition-colors">Terms</a>
            <span className="flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{background: 'var(--accent-cyan)'}}></span>
              Available for new projects
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Testimonial = Testimonial;
window.CTASection = CTASection;
window.Contact = Contact;
window.Footer = Footer;