// SVG flag components — true-to-spec, used in Direct Contact and footer
const FlagUS = ({ size = 28 }) => (
  <svg width={size} height={size * 0.66} viewBox="0 0 60 40" className="rounded-sm border border-token flex-shrink-0 overflow-hidden block">
    <rect width="60" height="40" fill="#fff"/>
    {/* 13 stripes */}
    {Array.from({ length: 7 }).map((_, i) => (
      <rect key={i} x="0" y={i * (40/13) * 2} width="60" height={40/13} fill="#B22234"/>
    ))}
    {/* Canton */}
    <rect width="24" height={40 * 7/13} fill="#3C3B6E"/>
    {/* Stars (simplified — 9 dots) */}
    {Array.from({ length: 9 }).map((_, i) => {
      const col = i % 3;
      const row = Math.floor(i / 3);
      return <circle key={i} cx={4 + col * 8} cy={3 + row * 6} r="1.1" fill="#fff"/>;
    })}
  </svg>
);

const FlagIN = ({ size = 28 }) => (
  <svg width={size} height={size * 0.66} viewBox="0 0 60 40" className="rounded-sm border border-token flex-shrink-0 overflow-hidden block">
    <rect width="60" height="13.33" y="0"     fill="#FF9933"/>
    <rect width="60" height="13.33" y="13.33" fill="#fff"/>
    <rect width="60" height="13.33" y="26.66" fill="#138808"/>
    {/* Ashoka chakra */}
    <g transform="translate(30 20)">
      <circle r="4" fill="none" stroke="#000080" strokeWidth="0.7"/>
      <circle r="0.6" fill="#000080"/>
      {Array.from({ length: 24 }).map((_, i) => (
        <line key={i}
          x1="0" y1="0"
          x2={4 * Math.cos(i * Math.PI / 12)}
          y2={4 * Math.sin(i * Math.PI / 12)}
          stroke="#000080" strokeWidth="0.3"/>
      ))}
    </g>
  </svg>
);

const CTAFooter = () => {
  return (
    <>
      {/* Big CTA */}
      <section id="contact" className="relative py-24 md:py-36 border-t border-token overflow-hidden">
        <div className="absolute inset-0 grid-bg grid-bg-fade pointer-events-none opacity-60"/>
        <div className="absolute -bottom-40 left-1/2 -translate-x-1/2 w-[800px] h-[800px] rounded-full pointer-events-none opacity-[0.10]"
          style={{ background: 'conic-gradient(from 200deg, #E63329, #F5C518, #14A04A, #1B7BD6, #E63329)', filter: 'blur(80px)' }}
        />
        <div className="relative max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="max-w-3xl reveal">
            <Eyebrow>Start now</Eyebrow>
            <h2 className="display text-[48px] md:text-[80px] leading-[0.98] mt-6">
              Start your AI<br/>
              <span className="brand-gradient-text">transformation.</span>
            </h2>
            <p className="mt-6 text-[18px] md:text-[20px] text-muted max-w-xl leading-relaxed">
              Tell us where the friction is. We'll come back with an AIDD pilot scope, a measurable outcome, and a 6-week plan to ship it.
            </p>
          </div>

          <div className="mt-12 grid lg:grid-cols-12 gap-6 reveal">
            {/* Form */}
            <form className="lg:col-span-7 card p-7 md:p-8" onSubmit={(e)=>{e.preventDefault(); alert('Thanks — a Webever AI engineer will reach out within one business day.');}}>
              <div className="grid sm:grid-cols-2 gap-4">
                <Field label="Full name" placeholder="Avery Chen"/>
                <Field label="Work email" placeholder="avery@company.com" type="email"/>
                <Field label="Company" placeholder="Northwind Industries"/>
                <Field label="Role" placeholder="VP Operations"/>
              </div>
              <div className="mt-4">
                <label className="block font-mono text-[10px] tracking-[0.18em] uppercase text-muted mb-2">What are you trying to automate?</label>
                <textarea rows="4" placeholder="e.g., We process 8,000 vendor invoices/month manually across 3 ERPs..."
                  className="w-full bg-transparent border border-token rounded-lg px-3.5 py-2.5 text-[14px] focus:border-[var(--text)] outline-none transition-colors resize-none"/>
              </div>
              <div className="mt-6 flex items-center justify-between flex-wrap gap-3">
                <div className="text-[12px] text-muted">We respond within 1 business day.</div>
                <button type="submit" className="btn btn-primary text-[15px] px-5 py-3">
                  Get free consultation <I.Arrow size={14}/>
                </button>
              </div>
            </form>

            {/* Side: direct contact */}
            <div className="lg:col-span-5 flex flex-col gap-5">
              <div className="card p-6">
                <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted mb-4">Direct contact</div>

                <a href="tel:+16093180951" className="flex items-center gap-3 group">
                  <FlagUS size={28}/>
                  <div className="flex-1">
                    <div className="text-[11px] font-mono uppercase tracking-[0.14em] text-muted">USA</div>
                    <div className="text-[16px] font-medium group-hover:text-brand-blue transition-colors">+1 609-318-0951</div>
                  </div>
                </a>

                <div className="hr-token my-4"/>

                <a href="tel:+919328441339" className="flex items-center gap-3 group">
                  <FlagIN size={28}/>
                  <div className="flex-1">
                    <div className="text-[11px] font-mono uppercase tracking-[0.14em] text-muted">India</div>
                    <div className="text-[16px] font-medium group-hover:text-brand-green transition-colors">+91 93284 41339</div>
                  </div>
                </a>

                <div className="hr-token my-4"/>

                <a href="mailto:info@webevertech.com" className="flex items-center gap-3 group">
                  <div className="w-[28px] h-[20px] rounded-sm border border-token flex items-center justify-center text-brand-blue flex-shrink-0" style={{background:'var(--surface)'}}>
                    <I.Send size={12}/>
                  </div>
                  <div className="flex-1">
                    <div className="text-[11px] font-mono uppercase tracking-[0.14em] text-muted">Email</div>
                    <div className="text-[16px] font-medium group-hover:text-brand-blue transition-colors">info@webevertech.com</div>
                  </div>
                </a>
              </div>
              <ContactOption icon="Bot" title="Talk to an AI engineer" desc="Skip the form — book a 30-minute discovery directly with our solutions team." cta="Pick a time"/>
              <ContactOption icon="Globe" title="Partner with Webever" desc="Reseller, system integrator, or technology alliance — let's talk." cta="Apply"/>
            </div>
          </div>

          {/* Office locations */}
          <div className="mt-20 reveal">
            <div className="flex items-end justify-between mb-8 flex-wrap gap-3">
              <div>
                <Eyebrow>Global presence</Eyebrow>
                <h3 className="display text-[28px] md:text-[36px] mt-3">Three offices. One AIDD team.</h3>
              </div>
              <div className="font-mono text-[11px] tracking-[0.18em] uppercase text-muted">3 locations</div>
            </div>
            <div className="grid md:grid-cols-3 gap-5">
              <OfficeCard
                country="USA"
                flag="🇺🇸"
                color="#1B7BD6"
                city="Pleasantville, NJ"
                lines={['1000 W. Washington Ave.', 'Pleasantville, NJ – 08232', 'United States']}
              />
              <OfficeCard
                country="Canada"
                flag="🇨🇦"
                color="#E63329"
                city="Winnipeg, MB"
                lines={['428 Portage Ave, Suite 611', 'Winnipeg, MB R3C 0C9', 'Canada']}
              />
              <OfficeCard
                country="India"
                flag="🇮🇳"
                color="#14A04A"
                city="Ahmedabad, GJ"
                lines={['206, Samedh Complex, near Associate Petrol Pump,', 'Mithakhali, Navrangpura,', 'Ahmedabad, Gujarat 380009']}
              />
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-token pt-20 pb-10">
        <div className="max-w-[1240px] mx-auto px-6 md:px-10">
          <div className="grid md:grid-cols-12 gap-10">
            <div className="md:col-span-4">
              <img src="assets/logo.png" alt="Webever" className="h-12 w-auto"/>
              <p className="mt-5 text-[14px] text-muted max-w-xs leading-relaxed">
                AI engineering &amp; solutions firm. Outcome-driven systems built with AI-Driven Development.
              </p>
              <div className="mt-6 space-y-2 text-[13px]">
                <a href="tel:+16093180951" className="flex items-center gap-2 text-muted hover:text-[var(--text)] transition-colors">
                  <FlagUS size={18}/> +1 609-318-0951
                </a>
                <a href="tel:+919328441339" className="flex items-center gap-2 text-muted hover:text-[var(--text)] transition-colors">
                  <FlagIN size={18}/> +91 93284 41339
                </a>
                <a href="mailto:info@webevertech.com" className="flex items-center gap-2 text-muted hover:text-[var(--text)] transition-colors">
                  <I.Send size={14}/> info@webevertech.com
                </a>
              </div>
              <div className="mt-6 flex items-center gap-2 text-[11px] font-mono uppercase tracking-[0.18em] text-muted">
                <SwirlMark size={14}/> AIDD-native
              </div>
            </div>
            <FooterCol title="Solutions" links={['AI Chatbots','Smart Documents','Workflow Automation','HRMS','ERP','CRM + Ops']}/>
            <FooterCol title="Industries" links={['Manufacturing','Healthcare','Retail','Logistics','Hospitality','eCommerce']}/>
            <FooterCol title="Company"    links={['About','Case studies','Blog','Careers','Press','Contact']}/>
            <FooterCol title="Platform"   links={['AIDD framework','Architecture','Security','Compliance','Status','Docs']}/>
          </div>

          <div className="mt-16 pt-8 border-t border-token flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div className="text-[12px] font-mono text-muted">© 2026 Webever Technologies · All rights reserved</div>
            <div className="flex items-center gap-5 text-[12px] text-muted">
              <a href="#" className="hover:text-[var(--text)]">Privacy</a>
              <a href="#" className="hover:text-[var(--text)]">Terms</a>
              <a href="#" className="hover:text-[var(--text)]">DPA</a>
              <a href="#" className="hover:text-[var(--text)]">Security</a>
            </div>
          </div>
        </div>
      </footer>
    </>
  );
};

const Field = ({label, placeholder, type='text'}) => (
  <div>
    <label className="block font-mono text-[10px] tracking-[0.18em] uppercase text-muted mb-2">{label}</label>
    <input type={type} placeholder={placeholder}
      className="w-full bg-transparent border border-token rounded-lg px-3.5 py-2.5 text-[14px] focus:border-[var(--text)] outline-none transition-colors"/>
  </div>
);

const ContactOption = ({icon, title, desc, cta}) => {
  const IconCmp = I[icon];
  return (
    <a href="#" className="card p-6 group hover:-translate-y-0.5 transition-transform flex items-start gap-4">
      <div className="w-10 h-10 rounded-lg border border-token flex items-center justify-center text-muted flex-shrink-0">
        <IconCmp size={18}/>
      </div>
      <div className="flex-1">
        <div className="text-[15px] font-medium">{title}</div>
        <div className="mt-1 text-[13px] text-muted leading-relaxed">{desc}</div>
        <div className="mt-3 inline-flex items-center gap-1 text-[12px] font-mono uppercase tracking-[0.14em]">
          {cta} <I.ArrowUR size={12}/>
        </div>
      </div>
    </a>
  );
};

const FooterCol = ({title, links}) => (
  <div className="md:col-span-2">
    <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted mb-4">{title}</div>
    <ul className="space-y-2.5">
      {links.map(l => (
        <li key={l}><a href="#" className="text-[13.5px] hover:text-[var(--text)] text-muted transition-colors">{l}</a></li>
      ))}
    </ul>
  </div>
);

const OfficeCard = ({country, flag, color, city, lines}) => (
  <div className="card p-7 relative overflow-hidden group hover:-translate-y-0.5 transition-transform">
    <div className="absolute top-0 left-0 right-0 h-1" style={{background: color, opacity: 0.85}}/>
    <div className="flex items-center justify-between mb-6">
      <div className="flex items-center gap-2">
        <span className="text-[22px] leading-none">{flag}</span>
        <span className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted">{country} office</span>
      </div>
      <div className="w-8 h-8 rounded-lg border border-token flex items-center justify-center" style={{color}}>
        <I.Globe size={14}/>
      </div>
    </div>
    <h4 className="display text-[22px] leading-tight">{city}</h4>
    <div className="mt-4 text-[14px] text-muted leading-relaxed">
      {lines.map((l, i) => <div key={i}>{l}</div>)}
    </div>
  </div>
);

window.CTAFooter = CTAFooter;