{/* Background continuity — starfield + violet wash */}

{/* ----- Left: vial ----- */}

c.src)} index={capIdx} transitionMs={500} controlAngle={angle} maxWidth={1200} aspectRatio="1536 / 1024" />

{/* ----- Right: configurator panel ----- */}

{/* Cap Color */}

Cap Color {String(capIdx + 1).padStart(2, '0')}/{String(colors.length).padStart(2, '0')}

{colors.map((c, i) => )}

{/* Bottle Size */}

Bottle Size

{sizes.map((s, i) => )}

{/* Custom Formula */}

Custom Formula {formula.length}/240

setFormula(e.target.value.slice(0, 240))}
              placeholder="Describe your active ingredients, scent profile, target benefits..." />
            
          </div>

{/* Phone Number */}
          <div className="fx-section">
            <div className="fx-label">
              <span>Phone Number</span>
            </div>
            <div className="fx-phone-wrap">
              <select
                className="fx-country"
                value={`${country}|${countryCodes.findIndex((c) => c.code === country)}`}
                onChange={(e) => setCountry(e.target.value.split('|')[0])}
                aria-label="Country code">
                
                {countryCodes.map((c, i) =>
                <React.Fragment key={`${c.code}-${c.name}`}>
                    {i === 6 && <option disabled>──────────</option>}
                    <option value={`${c.code}|${i}`}>
                      {c.flag}  {c.name}  {c.code}
                    </option>
                  </React.Fragment>
                )}
              </select>
              <input
                type="tel"
                className="fx-input fx-phone-input"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                placeholder="(555) 000-0000"
                inputMode="tel" />
              
            </div>
          </div>

{/* Email */}
          <div className="fx-section">
            <div className="fx-label">
              <span>Email Address</span>
            </div>
            <input
              type="email"
              className="fx-input"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@company.com"
              autoComplete="email"
              inputMode="email" />
            
          </div>

{/* Add-Ons */}
          <div className="fx-section">
            <div className="fx-label">
              <span>Add-Ons</span>
            </div>
            <div className="mt-2">
              {[
              { state: sticker, set: setSticker, name: 'Custom Sticker', sub: 'Holographic finish · brand mark' },
              { state: box, set: setBox, name: 'Premium Box', sub: 'Magnetic close · soft-touch black' },
              { state: leaflet, set: setLeaflet, name: 'Information Leaflet', sub: 'Multilingual · regulatory-ready' }].
              map((row) =>
              <div
                key={row.name}
                className={`fx-toggle ${row.state ? 'on' : ''}`}
                onClick={() => row.set(!row.state)}
                role="switch"
                aria-checked={row.state}
                tabIndex={0}>
                
                  <span>
                    <span style={{ display: 'block' }}>{row.name}</span>
                    <span style={{ display: 'block', fontSize: 11, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.04em', marginTop: 2 }}>{row.sub}</span>
                  </span>
                  <span className="fx-toggle-track" />
                </div>
              )}
            </div>
          </div>

{/* Submit */}
          <button
            type="button"
            className="fx-send mt-7"
            disabled={sendStatus === 'sending'}
            onClick={async () => {
              if (sendStatus === 'sending') return;
              const cap = colors[capIdx] || {};
              const size = sizes[sizeIdx] || '';
              const payload = {
                _subject: 'Customization request — ' + (cap.name || 'vial') + ' ' + size,
                _template: 'table',
                _captcha: 'false',
                'Cap color': cap.name || '(unset)',
                'Vial size': size,
                'Formula / active ingredient': formula || '(not provided)',
                'Mobile': country + ' ' + (phone || '(not provided)'),
                'Email': email || '(not provided)',
                'Custom sticker': sticker ? 'Yes' : 'No',
                'Outer box': box ? 'Yes' : 'No',
                'Leaflet': leaflet ? 'Yes' : 'No'
              };
              setSendStatus('sending');
              try {
                // FormSubmit AJAX endpoint — returns JSON so we can show real success/error.
                // First-time only: activate yourabsolutepharma@gmail.com via the confirmation email
                // FormSubmit sends after the first submission.
                const res = await fetch('https://formsubmit.co/ajax/yourabsolutepharma@gmail.com', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                  },
                  body: JSON.stringify(payload)
                });
                const data = await res.json().catch(() => ({}));
                if (res.ok && (data.success === 'true' || data.success === true)) {
                  setSendStatus('sent');
                  setTimeout(() => setSendStatus(''), 5000);
                } else {
                  console.error('FormSubmit error:', data);
                  setSendStatus('error');
                  setTimeout(() => setSendStatus(''), 5000);
                }
              } catch (err) {
                console.error('Submit failed:', err);
                // Last-resort fallback: open the visitor's email client pre-filled.
                const subject = payload._subject;
                const body = Object.entries(payload).
                filter(([k]) => !k.startsWith('_')).
                map(([k, v]) => k + ': ' + v).join('\n');
                window.location.href =
                'mailto:yourabsolutepharma@gmail.com?subject=' + encodeURIComponent(subject) +
                '&body=' + encodeURIComponent(body);
                setSendStatus('error');
                setTimeout(() => setSendStatus(''), 5000);
              }
            }}>
            
            <span>
              {sendStatus === 'sending' ? 'Sending…' :
              sendStatus === 'sent' ? 'Request sent — thank you!' :
              sendStatus === 'error' ? 'Could not send — try again' :
              'Send Customization'}
            </span>
            <span className="fx-send-arrow">
              <ArrowRight className="w-3.5 h-3.5" />
            </span>
          </button>
        </div>
      </div>
    </section>);

}

/* ---------------- About Section ---------------- */
function AnimatedText({ text }) {
  const ref = useRef(null);
  const [p, setP] = useState(0); // 0..1 progress

useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // start: when top hits 80% of viewport, end: when bottom hits 20%
      const start = vh * 0.8,end = -r.height + vh * 0.2;
      const y = r.top;
      const raw = (start - y) / (start - end);
      setP(Math.max(0, Math.min(1, raw)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

})}
    </p>);

}

function AboutSection() {
  return (
    <section
      id="about"
      className="relative w-full overflow-hidden"
      style={{ background: '#050508', paddingTop: 120, paddingBottom: 120, minHeight: '100vh' }}>
      
      <div className="absolute inset-0 stars opacity-50 pointer-events-none" />
      {/* Decorative drifting orbs (replaces the 3D corner images for our aesthetic) */}
      <span className="about-orb tl" />
      <span className="about-orb tr" />
      <span className="about-orb bl" />
      <span className="about-orb br" />

<div className="relative z-10 max-w-6xl mx-auto px-5 md:px-10 flex flex-col items-center text-center gap-14 md:gap-20">
        <h2 className="display-h glass">ABOUT US</h2>
        <AnimatedText
          text="Absolute Pharma is a veterinary pharmaceutical manufacturer and distributor headquartered in Korea, with an established presence across the Arabian Gulf, Africa, and the Americas. For over six years, we have been the partner distributors rely on when quality and consistency are non-negotiable." />
        
        <AnimatedText
          text="What began as a focused distribution operation has grown into a fully integrated manufacturing company. We established our own factory in Korea — giving us complete control over formulation, production, and quality — and expanded our product range to include veterinary medicines, energy supplements, and analgesics. That growth is reflected in our numbers: we scaled from 60,000 boxes produced annually to over 250,000, a milestone achieved through the trust of our partners worldwide." />
        
        <button
          type="button"
          className="contact-pill"
          onClick={() => {
            const el = document.getElementById('contact');
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>
          
          CONTACT US

</button>
      </div>
    </section>);

}

/* ---------------- Services Section ---------------- */
function ServicesSection() {
  const items = [
  { n: '01', name: 'Discovery & Consultation', desc: "We start by understanding your vision — the formulation, target species, market, and any regulatory requirements. A dedicated specialist guides you through every detail so we align from day one." },
  { n: '02', name: 'Custom Quotation', desc: 'Based on your requirements, we prepare a transparent, itemized quotation covering formulation, packaging, design, and production — no hidden costs, no surprises.' },
  { n: '03', name: 'Packaging & Identity Design', desc: "Our design team creates your product's full visual identity from scratch — label sticker, outer box, and leaflet — crafted to meet regulatory standards while standing out on the shelf." },
  { n: '04', name: '3D Product Visualization', desc: 'Before a single unit is manufactured, we render a photorealistic 3D model of your finished product — so you can see and approve exactly how your brand will look in the real world.' },
  { n: '05', name: 'Physical Samples', desc: 'We produce pre-production samples for your hands-on review and approval — ensuring the formulation, packaging, and finish meet your exact expectations before full manufacturing begins.' },
  { n: '06', name: 'Manufacturing', desc: 'Once you approve, our GMP-certified facilities handle full-scale production of your veterinary medicine — with strict quality control at every stage of the process.' },
  { n: '07', name: 'Delivery to Your Door', desc: 'We manage logistics end-to-end and ship your finished products directly to your location — safely packaged and ready for distribution.' }];

return (
    <section
      className="relative w-full overflow-hidden"
      style={{ background: '#050508', paddingTop: 120, paddingBottom: 140 }}>
      
      <div className="absolute inset-0 stars opacity-50 pointer-events-none" />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{ background: 'radial-gradient(60% 40% at 50% 30%, rgba(123,92,255,0.10) 0%, rgba(123,92,255,0) 70%)' }} />

<div className="relative z-10 max-w-6xl mx-auto px-5 md:px-10">
        <h2 className="display-h glass text-center mb-16 md:mb-24">Services</h2>
        <div>
          {items.map((s) =>
          <div key={s.n} className="svc-row">
              <div className="svc-num">{s.n}</div>
              <div>
                <div className="svc-name">{s.name}</div>
                <div className="svc-desc">{s.desc}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Projects Section (sticky stack) ---------------- */
function ProjectCard({ index, total, project }) {
  const ref = useRef(null);
  const [scale, setScale] = useState(1);

useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const targetScale = 1 - (total - 1 - index) * 0.03;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // progress: when card hits sticky pos until next card replaces it
      const stickyTop = 110; // matches top-[110px] in container
      const dist = stickyTop - r.top; // negative until reached
      // travel allows ~85vh of scrolling per card
      const travel = vh * 0.85;
      const t = Math.max(0, Math.min(1, dist / travel));
      // Linear interpolate from 1 down to targetScale
      setScale(1 - (1 - targetScale) * t);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [index, total]);

return (
    <div className="sticky proj-stack" style={{ top: 110 + index * 28, height: '85vh' }}>
      <div
        ref={ref}
        className="proj-card"
        style={{ transform: `scale(${scale})`, transformOrigin: 'top center', transition: 'transform 80ms linear' }}>
        
        {/* Top row */}
        <div className="flex flex-wrap items-center gap-4 md:gap-8 mb-5 md:mb-8">
          <div className="svc-num" style={{ fontSize: 'clamp(2.5rem, 7vw, 96px)' }}>{project.n}</div>
          <div className="flex-1 min-w-0">
            <div className="proj-cat">{project.cat}</div>
            <div className="proj-name mt-1">{project.name}</div>
          </div>
        </div>

{/* Image grid: 40% col w/ 2 stacked, 60% col w/ 1 tall */}
        <div className="grid grid-cols-1 md:grid-cols-[40%_1fr] gap-3 md:gap-4">
          <div className="flex flex-col gap-3 md:gap-4">
            <div className="proj-img-wrap" style={{ height: 'clamp(130px, 16vw, 230px)' }}>
              <img className="proj-bg" src={project.imgs[0]} alt="" aria-hidden="true" loading="lazy" draggable={false} />
              <img className="proj-fg" src={project.imgs[0]} alt="" loading="lazy" draggable={false} />
            </div>
            <div className="proj-img-wrap" style={{ height: 'clamp(160px, 22vw, 340px)' }}>
              <img className="proj-bg" src={project.imgs[1]} alt="" aria-hidden="true" loading="lazy" draggable={false} />
              <img className="proj-fg" src={project.imgs[1]} alt="" loading="lazy" draggable={false} />
            </div>
          </div>
          <div className="proj-img-wrap" style={{ height: 'clamp(310px, 38vw, 580px)' }}>
            {/\.(mp4|webm|mov)$/i.test(project.imgs[2]) ?
            <video
              className="proj-fg"
              src={project.imgs[2]}
              autoPlay
              loop
              muted
              playsInline
              preload="auto"
              disableRemotePlayback
              onLoadedMetadata={(e) => {e.currentTarget.muted = true;e.currentTarget.volume = 0;}} /> :

<React.Fragment>
                <img className="proj-bg" src={project.imgs[2]} alt="" aria-hidden="true" loading="lazy" draggable={false} />
                <img className="proj-fg" src={project.imgs[2]} alt="" loading="lazy" draggable={false} />
              </React.Fragment>
            }
          </div>
        </div>
      </div>
    </div>);

}

function ProjectsSection() {
  const projects = [
  {
    n: '01', name: 'TRI-PRED', cat: 'CICO Pharma',
    imgs: [
    'assets/tri-pred-1.jpg',
    'assets/tri-pred-2.png',
    'assets/tri-pred-hero.mp4']

},
  {
    n: '02', name: 'ATP FORTE', cat: 'CICO Pharma',
    imgs: [
    'assets/atp-forte-1.jpg',
    'assets/atp-forte-2.png',
    'assets/atp-forte-hero.webm']

},
  {
    n: '03', name: 'FLEU VITA', cat: 'CICO Pharma',
    imgs: [
    'assets/fleu-vita-1.jpg',
    'assets/fleu-vita-2.jpg',
    'assets/fleu-vita-hero.webm']

},
  {
    n: '04', name: 'DEXAPHENIL', cat: 'CICO Pharma',
    imgs: [
    'assets/dexaphenil-1.jpg',
    'assets/dexaphenil-2.jpg',
    'assets/dexaphenil-hero.webm']

},
  {
    n: '05', name: 'BOOSTER', cat: 'CICO Pharma',
    imgs: [
    'assets/booster-1.png',
    'assets/booster-2.png',
    'assets/booster-hero.mp4']

},
  {
    n: '06', name: 'IRON + B12', cat: 'CICO Pharma',
    imgs: [
    'assets/iron-b12-1.jpg',
    'assets/iron-b12-2.png',
    'assets/iron-b12-hero.webm']

}];

return (
    <section
      className="relative w-full overflow-hidden"
      style={{ background: '#050508', paddingTop: 80, paddingBottom: 160 }}>
      
      <div className="absolute inset-0 stars opacity-40 pointer-events-none" />
      <div className="relative z-10 max-w-7xl mx-auto px-5 md:px-10">
        <h2 className="display-h glass text-center mb-16 md:mb-24">Projects</h2>
        <div>
          {projects.map((p, i) =>
          <ProjectCard key={p.n} index={i} total={projects.length} project={p} />
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- From Vision Section ----------------
   Same liquid-glass + CycleWord vocabulary as CustomizeSection so it reads
   as part of the same family. "From vision to" is static, the second word
   cycles through six destinations. */
function FromVisionSection() {
  const words = ['reality', 'legacy', 'perfection', 'greatness', 'success', 'power'];
  const { index, exiting } = useChapterCycle(words.length, 2500, 600);

return (
    <section
      className="relative w-full bg-black overflow-hidden"
      style={{ paddingTop: 80, paddingBottom: 120 }}>
      
      {/* Background continuity — starfield + violet wash */}
      <div className="absolute inset-0 stars opacity-50 pointer-events-none" />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
          'radial-gradient(60% 40% at 50% 50%, rgba(139,92,246,0.10) 0%, rgba(139,92,246,0) 70%)'
        }} />

<div className="relative z-10 max-w-7xl mx-auto px-5 md:px-8 flex flex-col items-center text-center">
        <h2
          className="font-medium tracking-tighter text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl"
          style={{ lineHeight: 0.95 }}>
          
          <span className="relative inline-block">
            <span aria-hidden="true" className="text-bloom text-bloom-white" />
            <span className="relative liquid-glass">From vision to</span>
          </span>
          <span className="block mt-3 md:mt-4">
            <CycleWord
              words={words}
              index={index}
              exiting={exiting}
              transitionMs={600}
              className="liquid-glass-purple" />
            
          </span>
        </h2>

{/* Subtle horizontal divider — same vocabulary as the Customize section */}
        <div
          className="mt-10 md:mt-14 h-px w-24"
          style={{
            background:
            'linear-gradient(90deg, transparent 0%, rgba(196,181,253,0.45) 50%, transparent 100%)'
          }} />
        
      </div>
    </section>);

}

/* ---------------- Partnerships Section ----------------
   Stats row + italic quote + gradient-bordered glow cards.
   Keeps the violet palette in play across the rest of the site. */
function PartnershipsSection() {
  const stats = [
  { v: '6+', l: 'Years serving global markets' },
  { v: '250K+', l: 'Boxes produced annually' },
  { v: '6', l: 'Continents reached' },
  { v: '1', l: 'Dedicated factory in Korea' }];

const cards = [
  {
    title: 'Certified quality',
    desc: 'Every product leaves our Korean facility meeting rigorous international pharmaceutical standards.',
    c: ['#6D28D9', '#C4B5FD', '#8B5CF6'],
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round" className="pn-icon">
          <circle cx="12" cy="9" r="5" />
          <path d="M9 13l-1.5 7L12 18l4.5 2L15 13" />
        </svg>

},
  {
    title: 'Custom solutions',
    desc: 'From private-label formulations to tailored packaging, we adapt to your market\u2019s needs.',
    c: ['#4C1D95', '#A78BFA', '#7C3AED'],
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round" className="pn-icon">
          <line x1="4" y1="7" x2="20" y2="7" />
          <line x1="4" y1="12" x2="20" y2="12" />
          <line x1="4" y1="17" x2="20" y2="17" />
          <circle cx="9" cy="7" r="2" fill="#0a0a14" />
          <circle cx="15" cy="12" r="2" fill="#0a0a14" />
          <circle cx="8" cy="17" r="2" fill="#0a0a14" />
        </svg>

},
  {
    title: 'Strategic alliances',
    desc: 'We actively pursue partnerships with allied nations to foster mutual growth and market expansion.',
    c: ['#5B21B6', '#DDD6FE', '#8B5CF6'],
    feature: true,
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round" className="pn-icon">
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18" />
          <path d="M12 3a14 14 0 010 18M12 3a14 14 0 000 18" />
        </svg>

},
  {
    title: 'Prestigious partnerships',
    desc: 'Trusted partner in elite horse and camel racing events across Arab nations and beyond.',
    c: ['#5B21B6', '#C4B5FD', '#8B5CF6'],
    icon:
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"
    strokeLinecap="round" strokeLinejoin="round" className="pn-icon">
          <path d="M7 4h10v4a5 5 0 01-10 0V4z" />
          <path d="M7 6H4v2a3 3 0 003 3" />
          <path d="M17 6h3v2a3 3 0 01-3 3" />
          <path d="M10 13v3M14 13v3" />
          <path d="M8 19h8" />
        </svg>

}];

return (
    <section
      className="relative w-full overflow-hidden"
      style={{ background: '#050508', paddingTop: 40, paddingBottom: 160 }}>
      
      <div className="absolute inset-0 stars opacity-40 pointer-events-none" />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
          'radial-gradient(70% 50% at 50% 30%, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0) 70%)'
        }} />

<div className="relative z-10 max-w-7xl mx-auto px-5 md:px-10">
        {/* Stats */}
        <div className="pn-stats">
          {stats.map((s, i) =>
          <div key={i} className="pn-stat">
              <div className="pn-stat-num">{s.v}</div>
              <div className="pn-stat-label">{s.l}</div>
            </div>
          )}
        </div>

{/* Divider */}
        <div
          className="my-14 md:my-20 h-px w-full"
          style={{
            background:
            'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%)'
          }} />

{/* Italic quote */}
        <p className="pn-quote">
          We don’t just manufacture medicines — we build long-term partnerships with distributors who share our commitment to animal health and market excellence.
        </p>

{/* Cards */}
        <div className="pn-cards mt-14 md:mt-20">
          {cards.map((c, i) =>
          <div
            key={i}
            className={'pn-card' + (c.feature ? ' is-feature' : '')}
            style={{ '--c1': c.c[0], '--c2': c.c[1], '--c3': c.c[2] }}>
            
              <div className="pn-surface" />
              <div className="pn-body">
                {c.icon}
                <div className="pn-title">{c.title}</div>
                <div className="pn-desc">{c.desc}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- Contact Section ---------------- */
const COUNTRY_CODES = [
{ c: 'AE', n: 'United Arab Emirates', d: '+971', f: '🇦🇪' },
{ c: 'SA', n: 'Saudi Arabia', d: '+966', f: '🇸🇦' },
{ c: 'QA', n: 'Qatar', d: '+974', f: '🇶🇦' },
{ c: 'KW', n: 'Kuwait', d: '+965', f: '🇰🇼' },
{ c: 'BH', n: 'Bahrain', d: '+973', f: '🇧🇭' },
{ c: 'OM', n: 'Oman', d: '+968', f: '🇴🇲' },
{ c: 'EG', n: 'Egypt', d: '+20', f: '🇪🇬' },
{ c: 'JO', n: 'Jordan', d: '+962', f: '🇯🇴' },
{ c: 'LB', n: 'Lebanon', d: '+961', f: '🇱🇧' },
{ c: 'IQ', n: 'Iraq', d: '+964', f: '🇮🇶' },
{ c: 'YE', n: 'Yemen', d: '+967', f: '🇾🇪' },
{ c: 'SY', n: 'Syria', d: '+963', f: '🇸🇾' },
{ c: 'PS', n: 'Palestine', d: '+970', f: '🇵🇸' },
{ c: 'TR', n: 'Türkiye', d: '+90', f: '🇹🇷' },
{ c: 'IR', n: 'Iran', d: '+98', f: '🇮🇷' },
{ c: 'IL', n: 'Israel', d: '+972', f: '🇮🇱' },
{ c: 'KR', n: 'South Korea', d: '+82', f: '🇰🇷' },
{ c: 'KP', n: 'North Korea', d: '+850', f: '🇰🇵' },
{ c: 'JP', n: 'Japan', d: '+81', f: '🇯🇵' },
{ c: 'CN', n: 'China', d: '+86', f: '🇨🇳' },
{ c: 'HK', n: 'Hong Kong', d: '+852', f: '🇭🇰' },
{ c: 'TW', n: 'Taiwan', d: '+886', f: '🇹🇼' },
{ c: 'SG', n: 'Singapore', d: '+65', f: '🇸🇬' },
{ c: 'MY', n: 'Malaysia', d: '+60', f: '🇲🇾' },
{ c: 'ID', n: 'Indonesia', d: '+62', f: '🇮🇩' },
{ c: 'PH', n: 'Philippines', d: '+63', f: '🇵🇭' },
{ c: 'TH', n: 'Thailand', d: '+66', f: '🇹🇭' },
{ c: 'VN', n: 'Vietnam', d: '+84', f: '🇻🇳' },
{ c: 'IN', n: 'India', d: '+91', f: '🇮🇳' },
{ c: 'PK', n: 'Pakistan', d: '+92', f: '🇵🇰' },
{ c: 'BD', n: 'Bangladesh', d: '+880', f: '🇧🇩' },
{ c: 'LK', n: 'Sri Lanka', d: '+94', f: '🇱🇰' },
{ c: 'NP', n: 'Nepal', d: '+977', f: '🇳🇵' },
{ c: 'AF', n: 'Afghanistan', d: '+93', f: '🇦🇫' },
{ c: 'KZ', n: 'Kazakhstan', d: '+7', f: '🇰🇿' },
{ c: 'UZ', n: 'Uzbekistan', d: '+998', f: '🇺🇿' },
{ c: 'AZ', n: 'Azerbaijan', d: '+994', f: '🇦🇿' },
{ c: 'GE', n: 'Georgia', d: '+995', f: '🇬🇪' },
{ c: 'AM', n: 'Armenia', d: '+374', f: '🇦🇲' },
{ c: 'RU', n: 'Russia', d: '+7', f: '🇷🇺' },
{ c: 'UA', n: 'Ukraine', d: '+380', f: '🇺🇦' },
{ c: 'GB', n: 'United Kingdom', d: '+44', f: '🇬🇧' },
{ c: 'IE', n: 'Ireland', d: '+353', f: '🇮🇪' },
{ c: 'FR', n: 'France', d: '+33', f: '🇫🇷' },
{ c: 'DE', n: 'Germany', d: '+49', f: '🇩🇪' },
{ c: 'IT', n: 'Italy', d: '+39', f: '🇮🇹' },
{ c: 'ES', n: 'Spain', d: '+34', f: '🇪🇸' },
{ c: 'PT', n: 'Portugal', d: '+351', f: '🇵🇹' },
{ c: 'NL', n: 'Netherlands', d: '+31', f: '🇳🇱' },
{ c: 'BE', n: 'Belgium', d: '+32', f: '🇧🇪' },
{ c: 'LU', n: 'Luxembourg', d: '+352', f: '🇱🇺' },
{ c: 'CH', n: 'Switzerland', d: '+41', f: '🇨🇭' },
{ c: 'AT', n: 'Austria', d: '+43', f: '🇦🇹' },
{ c: 'SE', n: 'Sweden', d: '+46', f: '🇸🇪' },
{ c: 'NO', n: 'Norway', d: '+47', f: '🇳🇴' },
{ c: 'DK', n: 'Denmark', d: '+45', f: '🇩🇰' },
{ c: 'FI', n: 'Finland', d: '+358', f: '🇫🇮' },
{ c: 'IS', n: 'Iceland', d: '+354', f: '🇮🇸' },
{ c: 'PL', n: 'Poland', d: '+48', f: '🇵🇱' },
{ c: 'CZ', n: 'Czechia', d: '+420', f: '🇨🇿' },
{ c: 'SK', n: 'Slovakia', d: '+421', f: '🇸🇰' },
{ c: 'HU', n: 'Hungary', d: '+36', f: '🇭🇺' },
{ c: 'RO', n: 'Romania', d: '+40', f: '🇷🇴' },
{ c: 'BG', n: 'Bulgaria', d: '+359', f: '🇧🇬' },
{ c: 'GR', n: 'Greece', d: '+30', f: '🇬🇷' },
{ c: 'HR', n: 'Croatia', d: '+385', f: '🇭🇷' },
{ c: 'RS', n: 'Serbia', d: '+381', f: '🇷🇸' },
{ c: 'SI', n: 'Slovenia', d: '+386', f: '🇸🇮' },
{ c: 'EE', n: 'Estonia', d: '+372', f: '🇪🇪' },
{ c: 'LV', n: 'Latvia', d: '+371', f: '🇱🇻' },
{ c: 'LT', n: 'Lithuania', d: '+370', f: '🇱🇹' },
{ c: 'CY', n: 'Cyprus', d: '+357', f: '🇨🇾' },
{ c: 'MT', n: 'Malta', d: '+356', f: '🇲🇹' },
{ c: 'US', n: 'United States', d: '+1', f: '🇺🇸' },
{ c: 'CA', n: 'Canada', d: '+1', f: '🇨🇦' },
{ c: 'MX', n: 'Mexico', d: '+52', f: '🇲🇽' },
{ c: 'BR', n: 'Brazil', d: '+55', f: '🇧🇷' },
{ c: 'AR', n: 'Argentina', d: '+54', f: '🇦🇷' },
{ c: 'CL', n: 'Chile', d: '+56', f: '🇨🇱' },
{ c: 'CO', n: 'Colombia', d: '+57', f: '🇨🇴' },
{ c: 'PE', n: 'Peru', d: '+51', f: '🇵🇪' },
{ c: 'VE', n: 'Venezuela', d: '+58', f: '🇻🇪' },
{ c: 'EC', n: 'Ecuador', d: '+593', f: '🇪🇨' },
{ c: 'UY', n: 'Uruguay', d: '+598', f: '🇺🇾' },
{ c: 'PY', n: 'Paraguay', d: '+595', f: '🇵🇾' },
{ c: 'BO', n: 'Bolivia', d: '+591', f: '🇧🇴' },
{ c: 'ZA', n: 'South Africa', d: '+27', f: '🇿🇦' },
{ c: 'NG', n: 'Nigeria', d: '+234', f: '🇳🇬' },
{ c: 'KE', n: 'Kenya', d: '+254', f: '🇰🇪' },
{ c: 'GH', n: 'Ghana', d: '+233', f: '🇬🇭' },
{ c: 'ET', n: 'Ethiopia', d: '+251', f: '🇪🇹' },
{ c: 'TZ', n: 'Tanzania', d: '+255', f: '🇹🇿' },
{ c: 'UG', n: 'Uganda', d: '+256', f: '🇺🇬' },
{ c: 'RW', n: 'Rwanda', d: '+250', f: '🇷🇼' },
{ c: 'SN', n: 'Senegal', d: '+221', f: '🇸🇳' },
{ c: 'CI', n: 'Côte d\u2019Ivoire', d: '+225', f: '🇨🇮' },
{ c: 'MA', n: 'Morocco', d: '+212', f: '🇲🇦' },
{ c: 'DZ', n: 'Algeria', d: '+213', f: '🇩🇿' },
{ c: 'TN', n: 'Tunisia', d: '+216', f: '🇹🇳' },
{ c: 'LY', n: 'Libya', d: '+218', f: '🇱🇾' },
{ c: 'SD', n: 'Sudan', d: '+249', f: '🇸🇩' },
{ c: 'AU', n: 'Australia', d: '+61', f: '🇦🇺' },
{ c: 'NZ', n: 'New Zealand', d: '+64', f: '🇳🇿' }];

function ContactSection() {
  const [form, setForm] = React.useState({
    first: '', last: '', email: '',
    phoneCountry: 'AE', phone: '',
    company: '', role: '', message: '', agree: false
  });
  const [status, setStatus] = React.useState(''); // '', 'sending', 'sent', 'error'
  const set = (k) => (e) => setForm({
    ...form,
    [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value
  });

const benefits = [
  'GMP-Certified Manufacturing',
  'Custom Veterinary Formulations',
  'Global Distribution Network',
  'End-to-End Logistics',
  'Six+ Years of Industry Trust'];

return (
    <section
      id="contact"
      className="relative w-full overflow-hidden"
      style={{ background: '#050508', paddingTop: 120, paddingBottom: 160 }}>
      
      <div className="absolute inset-0 stars opacity-40 pointer-events-none" />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
          'radial-gradient(60% 50% at 30% 30%, rgba(139,92,246,0.10) 0%, rgba(139,92,246,0) 70%)'
        }} />

<div className="relative z-10 max-w-7xl mx-auto px-5 md:px-10">
        <h2 className="display-h glass text-center mb-16 md:mb-24">Contact Us</h2>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-14 lg:gap-20">
          {/* Left column */}
          <div className="flex flex-col gap-10">
            <div className="flex flex-col gap-5">
              <h3 className="ct-h">Get in Touch with Us</h3>
              <p className="ct-sub">
                We’re here to help. Whether you’re a distributor exploring private-label opportunities, a pharmacy sourcing veterinary supplies, or a partner looking to expand into new markets — we’d love to talk.
              </p>
            </div>

<ul className="ct-list">
              {benefits.map((b, i) =>
              <li key={i}>
                  <span className="ct-check" aria-hidden="true">
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor"
                  strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="4 12 10 18 20 6" />
                    </svg>
                  </span>
                  <span>{b}</span>
                </li>
              )}
            </ul>

<div className="flex flex-col gap-5">
              <div className="ct-info-h">General Contact Info</div>
              <p className="ct-sub" style={{ marginTop: -4 }}>
                Our team responds within one business day. For urgent distribution or manufacturing inquiries, please call directly.
              </p>
              <div className="flex flex-col gap-3 mt-2">
                <div className="ct-info-row"><b>Phone:</b> +82 10 46 94 92 61</div>
                <div className="ct-info-row"><b>Email:</b> yourabsolutepharma@gmail.com</div>
                <div className="ct-info-row">
                  <b>Headquarters:</b> Absolute Pharma Co., Ltd. — Chuncheon-si, Gyeonggi-do South Korea
                </div>
              </div>
            </div>
          </div>

{/* Right column — form */}
          <form
            className="ct-form"
            onSubmit={async (e) => {
              e.preventDefault();
              if (status === 'sending') return;
              const country = COUNTRY_CODES.find((x) => x.c === form.phoneCountry) || {};
              const fullName = [form.first, form.last].filter(Boolean).join(' ');
              const payload = {
                _subject: 'Contact request — ' + (fullName || 'Absolute Pharma'),
                _template: 'table',
                _captcha: 'false',
                'Name': fullName || '(not provided)',
                'Email': form.email || '(not provided)',
                'Mobile': (country.d || '') + ' ' + (form.phone || '(not provided)') + ' (' + (country.n || form.phoneCountry) + ')',
                'Company': form.company || '(not provided)',
                'Role': form.role || '(not selected)',
                'Terms agreed': form.agree ? 'Yes' : 'No',
                'Message': form.message || '(none)'
              };
              setStatus('sending');
              try {
                const res = await fetch('https://formsubmit.co/ajax/yourabsolutepharma@gmail.com', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                  },
                  body: JSON.stringify(payload)
                });
                const data = await res.json().catch(() => ({}));
                if (res.ok && (data.success === 'true' || data.success === true)) {
                  setStatus('sent');
                  setForm((f) => ({ ...f, message: '' }));
                  setTimeout(() => setStatus(''), 5000);
                } else {
                  console.error('FormSubmit error:', data);
                  setStatus('error');
                  setTimeout(() => setStatus(''), 5000);
                }
              } catch (err) {
                console.error('Submit failed:', err);
                const subject = payload._subject;
                const body = Object.entries(payload).
                filter(([k]) => !k.startsWith('_')).
                map(([k, v]) => k + ': ' + v).join('\n');
                window.location.href =
                'mailto:yourabsolutepharma@gmail.com?subject=' + encodeURIComponent(subject) +
                '&body=' + encodeURIComponent(body);
                setStatus('error');
                setTimeout(() => setStatus(''), 5000);
              }
            }}>
            
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div>
                <label className="ct-label">First Name</label>
                <input className="ct-input" type="text" placeholder="First name"
                value={form.first} onChange={set('first')} />
              </div>
              <div>
                <label className="ct-label">Last Name</label>
                <input className="ct-input" type="text" placeholder="Last name"
                value={form.last} onChange={set('last')} />
              </div>
            </div>

<div>
              <label className="ct-label">Email Address</label>
              <input className="ct-input" type="email" placeholder="you@company.com"
              value={form.email} onChange={set('email')} />
            </div>

<div>
              <label className="ct-label">Mobile Number</label>
              <div className="ct-phone">
                <select
                  className="ct-phone-cc"
                  value={form.phoneCountry}
                  onChange={set('phoneCountry')}
                  aria-label="Country code">
                  
                  {COUNTRY_CODES.map((c) =>
                  <option key={c.c} value={c.c}>{c.f} {c.n} ({c.d})</option>
                  )}
                </select>
                <span className="ct-phone-dial">
                  {(COUNTRY_CODES.find((x) => x.c === form.phoneCountry) || {}).d}
                </span>
                <input
                  className="ct-phone-num"
                  type="tel"
                  placeholder="50 123 4567"
                  value={form.phone}
                  onChange={set('phone')} />
                
              </div>
            </div>

<div>
              <label className="ct-label">Company Name</label>
              <input className="ct-input" type="text" placeholder="Company name"
              value={form.company} onChange={set('company')} />
            </div>

<div>
              <label className="ct-label">Which best describes you?</label>
              <select
                className={'ct-select' + (form.role ? ' has-value' : '')}
                value={form.role}
                onChange={set('role')}>
                
                <option value="">Select one</option>
                <option value="distributor">Distributor / Wholesaler</option>
                <option value="pharmacy">Pharmacy / Clinic</option>
                <option value="manufacturer">Manufacturer / Private Label</option>
                <option value="government">Government / Institution</option>
                <option value="other">Other</option>
              </select>
            </div>

<div>
              <label className="ct-label">Message</label>
              <textarea className="ct-textarea" rows={5}
              placeholder="Tell us about your product, volume, and target markets…"
              value={form.message} onChange={set('message')} />
            </div>

<label className="ct-terms">
              <input type="checkbox" checked={form.agree} onChange={set('agree')} />
              <span>
                I agree to Absolute Pharma’s <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a> <span style={{ color: '#C4B5FD' }}>*</span>
              </span>
            </label>

<button type="submit" className="ct-submit" disabled={status === 'sending'}>
              {status === 'sending' ? 'Sending…' :
              status === 'sent' ? 'Thank you — sent ✓' :
              status === 'error' ? 'Could not send — try again' :
              'Submit'}
            </button>
          </form>
        </div>
      </div>
    </section>);

}

/* ---------------- Footer ---------------- */
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="ft">
      <div className="ft-line" />
      <div className="ft-inner">
        <div className="ft-brand">
          <span className="ft-mark">YAP</span>
          <span className="ft-sep" aria-hidden="true">·</span>
          <span className="ft-name">Your Absolute Pharma</span>
        </div>
        <div className="ft-meta">
          © {year} Your Absolute Pharma (YAP). All rights reserved.
        </div>
      </div>
    </footer>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);