/* ===== Stats, Testimonials, Pricing, FAQ, CTA, Footer ===== */

const STATS = [
  { value: 1200, suffix: '+', label: 'Limbs fitted across Malaysia' },
  { value: 7,    suffix: ' days', label: 'Average scan-to-fit time' },
  { value: 96,   suffix: '%', label: 'Patients active after 6 months' },
  { value: 18,   suffix: ' hrs', label: 'Battery on a single charge' },
];

function Stat({ value, suffix, label }) {
  const [ref, inView] = useInView({ once: true, threshold: 0.4 });
  const v = useCountUp(value, inView);
  const display = Number.isInteger(value) ? Math.round(v) : v.toFixed(0);
  return (
    <div ref={ref} data-reveal>
      <div className="text-[2.6rem] sm:text-[3.4rem] font-medium tracking-tight text-gray-900 leading-none tabular-nums">
        {display}<span className="text-[1.4rem] sm:text-[1.8rem] text-blue-500 align-top">{suffix}</span>
      </div>
      <p className="text-[13px] text-gray-500 mt-3 max-w-[170px]">{label}</p>
    </div>
  );
}

function Stats() {
  return (
    <section className="bg-[#f0f0ee] py-20 sm:py-28 border-y border-black/5">
      <div className="max-w-7xl mx-auto px-6 sm:px-12 lg:px-20 grid grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
        {STATS.map((s) => <Stat key={s.label} {...s} />)}
      </div>
    </section>
  );
}

const STORIES = [
  { quote: "For the first time in three years, I tied my own child's shoelaces. That's the mobility SendiBionik gave back.", name: 'Nurul A.', role: 'Below elbow, Butterworth', label: 'portrait' },
  { quote: "The fit was so precise that by the second week I forgot I was wearing it. So much lighter than my old one.", name: 'Wei Jian', role: 'Transradial, George Town', label: 'portrait' },
  { quote: "I'm back working at the shop. The grip holds tools exactly the way I tune it in the app.", name: 'Mr. Rahman', role: 'Partial hand, Bukit Mertajam', label: 'portrait' },
];

function Testimonials() {
  const [i, setI] = useState(0);
  const go = (d) => setI((p) => (p + d + STORIES.length) % STORIES.length);
  const s = STORIES[i];
  return (
    <section id="help" className="bg-[#101010] py-24 sm:py-32 overflow-hidden">
      <div className="max-w-6xl mx-auto px-6 sm:px-12 lg:px-20">
        <p className="text-[11px] uppercase tracking-[0.25em] text-white/40 mb-12" data-reveal>Real stories</p>
        <div className="grid lg:grid-cols-[1fr_1.4fr] gap-10 lg:gap-16 items-center">
          <div data-reveal="left">
            <Striped label={s.label} variant="dark" className="w-full aspect-[4/5] rounded-3xl border border-white/10" />
          </div>
          <div data-reveal="right">
            <blockquote className="text-[1.5rem] sm:text-[2.1rem] leading-[1.25] font-medium text-white tracking-tight">
              <span className="text-[#d97757]">“</span>{s.quote}<span className="text-[#d97757]">”</span>
            </blockquote>
            <div className="mt-8 flex items-center justify-between">
              <div>
                <div className="text-[15px] font-medium text-white">{s.name}</div>
                <div className="text-[13px] text-white/45">{s.role}</div>
              </div>
              <div className="flex gap-2">
                <button onClick={() => go(-1)} aria-label="Previous" className="w-11 h-11 rounded-full border border-white/20 text-white flex items-center justify-center hover:bg-white hover:text-black transition-colors">←</button>
                <button onClick={() => go(1)} aria-label="Next" className="w-11 h-11 rounded-full border border-white/20 text-white flex items-center justify-center hover:bg-white hover:text-black transition-colors">→</button>
              </div>
            </div>
            <div className="mt-6 flex gap-1.5">
              {STORIES.map((_, k) => (
                <span key={k} className="h-1 rounded-full transition-all duration-300" style={{ width: k === i ? 28 : 8, background: k === i ? '#d97757' : 'rgba(255,255,255,0.2)' }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const PLANS = [
  {
    name: 'Essential',
    price: 'RM4,800',
    note: 'one-time · interest-free instalments',
    desc: 'A body-powered limb tuned for your daily life.',
    features: ['Custom 3D-printed socket', 'Mechanical grip', '1-year warranty', '2 free re-tunings'],
    accent: false,
  },
  {
    name: 'Smart',
    price: 'RM12,900',
    note: 'one-time · interest-free instalments',
    desc: 'Our flagship myoelectric, the SendiBionik One.',
    features: ['Everything in Essential', 'Myoelectric grip control', 'Companion app + modes', '3-year warranty', 'Lifetime support'],
    accent: true,
  },
  {
    name: 'Care+',
    price: 'Custom',
    note: 'for clinics & NGOs',
    desc: 'Bulk fittings, training and on-site support.',
    features: ['Bulk pricing', 'On-site fitting camps', 'Prosthetist training', 'Dedicated service lead'],
    accent: false,
  },
];

function Pricing() {
  return (
    <section id="support" className="bg-[#f0f0ee] py-24 sm:py-32">
      <div className="max-w-7xl mx-auto px-6 sm:px-12 lg:px-20">
        <div className="max-w-2xl mb-14 sm:mb-20" data-reveal>
          <p className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-5">Fitting plans</p>
          <h2 className="text-[2rem] sm:text-[2.8rem] leading-[1.05] font-medium tracking-tight text-gray-900">
            Mobility within reach of every family.
          </h2>
        </div>
        <div className="grid md:grid-cols-3 gap-5">
          {PLANS.map((p, i) => (
            <div
              key={p.name}
              data-reveal
              data-reveal-delay={i * 110}
              className={`rounded-3xl p-8 border transition-transform duration-300 hover:-translate-y-1 ${p.accent ? 'bg-[#101010] border-black/10 text-white' : 'bg-white border-black/8'}`}
            >
              <div className="flex items-center justify-between mb-1">
                <h3 className={`text-[15px] font-medium ${p.accent ? 'text-white' : 'text-gray-900'}`}>{p.name}</h3>
                {p.accent && <span className="text-[10px] font-semibold px-2.5 py-1 rounded-full bg-[#d97757] text-white">Most chosen</span>}
              </div>
              <div className={`text-[2.4rem] font-medium tracking-tight mt-4 ${p.accent ? 'text-white' : 'text-gray-900'}`}>{p.price}</div>
              <div className={`text-[12px] mb-5 ${p.accent ? 'text-white/40' : 'text-gray-400'}`}>{p.note}</div>
              <p className={`text-[13.5px] mb-6 leading-relaxed ${p.accent ? 'text-white/60' : 'text-gray-500'}`}>{p.desc}</p>
              <ul className="space-y-3 mb-8">
                {p.features.map((f) => (
                  <li key={f} className={`flex items-start gap-2.5 text-[13.5px] ${p.accent ? 'text-white/80' : 'text-gray-600'}`}>
                    <i data-lucide="check" className={`w-4 h-4 mt-0.5 shrink-0 ${p.accent ? 'text-[#d97757]' : 'text-blue-500'}`}></i>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a
                href="#fitting"
                className={`inline-flex w-full items-center justify-center gap-2 text-[13px] font-medium rounded-full px-5 py-3 transition-all duration-200 group ${
                  p.accent
                    ? 'bg-white text-gray-900 hover:bg-[#d97757] hover:text-white'
                    : 'border border-blue-400 text-blue-500 hover:bg-blue-500 hover:text-white hover:border-blue-500'
                }`}
              >
                {p.price === 'Custom' ? 'Contact Us' : 'Book a Scan'}
                <span className="transition-transform duration-200 group-hover:translate-x-0.5">→</span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQS = [
  { q: 'Does SOCSO or insurance cover SendiBionik?', a: 'Yes. We help you file claims under SOCSO and most private insurers, and offer interest-free instalments so you do not have to pay in full upfront.' },
  { q: 'How long does the whole process take?', a: 'From the first phone scan to walking out fitted takes around 7 days on average. Complex cases may take a little longer.' },
  { q: 'What if my residual limb changes over time?', a: 'Residual limbs do change, especially in the first year. Re-tuning is free, and new sockets are heavily subsidised when you need one.' },
  { q: 'Do I need to visit a clinic?', a: 'Just once — for the fitting and final tuning in Penang. Scans are done at home with our app, guided by a specialist over video call.' },
  { q: 'Are these smart prosthetics hard to learn?', a: 'Most patients are doing everyday tasks within the first session. The app guides you through training, and support is only a tap away.' },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="bg-[#f0f0ee] py-24 sm:py-32 border-t border-black/5">
      <div className="max-w-3xl mx-auto px-6 sm:px-12">
        <div className="mb-12 text-center" data-reveal>
          <p className="text-[11px] uppercase tracking-[0.25em] text-gray-400 mb-5">FAQ</p>
          <h2 className="text-[2rem] sm:text-[2.6rem] leading-[1.05] font-medium tracking-tight text-gray-900">
            Everything you've been wondering.
          </h2>
        </div>
        <div className="divide-y divide-black/10 border-y border-black/10">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} data-reveal>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  className="w-full flex items-center justify-between gap-6 py-6 text-left group"
                >
                  <span className={`text-[16px] sm:text-[18px] font-medium transition-colors ${isOpen ? 'text-gray-900' : 'text-gray-700 group-hover:text-gray-900'}`}>{f.q}</span>
                  <span
                    className="shrink-0 w-8 h-8 rounded-full border border-black/15 flex items-center justify-center text-gray-500 transition-transform duration-300"
                    style={{ transform: isOpen ? 'rotate(45deg)' : 'none' }}
                  >+</span>
                </button>
                <div className={`faq-body ${isOpen ? 'open' : ''}`}>
                  <div>
                    <p className="text-[14.5px] text-gray-500 leading-relaxed pb-6 max-w-xl">{f.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="fitting" className="bg-[#f0f0ee] px-6 sm:px-12 pb-12 sm:pb-16">
      <div className="relative max-w-7xl mx-auto rounded-[2.5rem] bg-[#101010] overflow-hidden px-8 sm:px-16 py-20 sm:py-28">
        <div className="absolute -right-20 -top-20 w-80 h-80 rounded-full bg-blue-500/20 blur-3xl floaty pointer-events-none" />
        <div className="absolute -left-16 -bottom-16 w-72 h-72 rounded-full bg-[#d97757]/20 blur-3xl floaty pointer-events-none" style={{ animationDelay: '1.5s' }} />
        <div className="relative max-w-xl" data-reveal>
          <h2 className="text-[2.2rem] sm:text-[3.2rem] leading-[1.05] font-medium tracking-tight text-white mb-6">
            Your free fitting starts with a 90-second scan.
          </h2>
          <p className="text-[15px] text-white/55 mb-10 max-w-md leading-relaxed">
            No cost, no pressure. Book a slot and our specialist will guide you from home, step by step.
          </p>
          <div className="flex flex-col sm:flex-row gap-3">
            <a href="https://wa.me/60146869468" className="sheen inline-flex items-center justify-center gap-2 text-[14px] font-medium rounded-full px-7 py-3.5 bg-white text-gray-900 hover:bg-[#d97757] hover:text-white transition-colors duration-200 group">
              WhatsApp Us
              <span className="transition-transform duration-200 group-hover:translate-x-0.5">→</span>
            </a>
            <a href="#products" className="inline-flex items-center justify-center gap-2 text-[14px] font-medium rounded-full px-7 py-3.5 border border-white/25 text-white hover:bg-white/10 transition-colors duration-200">
              Explore SendiBionik One
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: 'Products', links: ['SendiBionik One', 'Essential', 'Care+', 'Companion app'] },
    { h: 'Company', links: ['Our story', 'Press', 'Careers', 'Contact'] },
    { h: 'Support', links: ['Book a scan', 'Help centre', 'Warranty', 'Find a clinic'] },
  ];
  return (
    <footer className="bg-[#f0f0ee] px-6 sm:px-12 lg:px-20 pb-10">
      <div className="max-w-7xl mx-auto border-t border-black/10 pt-14">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">
          <div>
            <div className="flex items-center gap-2.5 mb-4">
              <span className="flex items-center justify-center rounded-full w-9 h-9" style={{ backgroundColor: '#EDEDED' }}><Logo /></span>
              <span className="text-[15px] font-semibold tracking-tight text-gray-900">SendiBionik</span>
            </div>
            <p className="text-[13px] text-gray-400 leading-relaxed max-w-[220px]">Smart prosthetics for people who keep fighting. Designed in Penang.</p>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <h4 className="text-[12px] uppercase tracking-[0.15em] text-gray-400 mb-4">{c.h}</h4>
              <ul className="space-y-2.5">
                {c.links.map((l) => (
                  <li key={l}><a href="#" className="text-[13.5px] text-gray-600 hover:text-gray-900 transition-colors">{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 pt-8 border-t border-black/10">
          <p className="text-[12px] text-gray-400">© 2026 SendiBionik Sdn Bhd. Designed in Penang.</p>
          <div className="flex gap-6">
            {['Privacy', 'Terms', 'Accessibility'].map((l) => (
              <a key={l} href="#" className="text-[12px] text-gray-400 hover:text-gray-700 transition-colors">{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Stats, Testimonials, Pricing, FAQ, CTA, Footer });
