// Industries marquee + Why Cardefi + Stats

const { Check: WCheck } = window.Icons;

function Industries() {
  const items = [
    'Financial Services',
    'Healthcare & Life Sciences',
    'Logistics & Supply Chain',
    'SaaS & Platforms',
    'E-commerce & Retail',
    'Manufacturing',
    'Insurance',
    'Legal & Compliance',
  ];

  // Doubled for seamless loop
  const loop = [...items, ...items];

  return (
    <section id="industries" className="relative py-24 lg:py-32" style={{background: 'var(--surface-1)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'}}>
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10 mb-12">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">
          <div className="lg:col-span-7">
            <div className="reveal eyebrow mb-5">Industries</div>
            <h2 className="reveal font-display text-[34px] sm:text-[42px] lg:text-[56px] leading-[1.02] tracking-[-0.04em] font-medium" data-delay="80">
              Deep context across
              <br />
              <span className="serif-em" style={{color: 'var(--ink-warm)'}}>regulated</span> and complex sectors.
            </h2>
          </div>
          <p className="lg:col-span-4 lg:col-start-9 reveal text-[15px] leading-[1.6]" style={{color: 'var(--muted)'}} data-delay="160">
            Compliance posture, data sensitivity, audit trails, and operating cadence —
            built into how we design, ship, and operate.
          </p>
        </div>
      </div>

      <div className="marquee">
        <div className="marquee-track">
          {loop.map((item, i) => (
            <div key={i} className="flex items-center gap-4 flex-shrink-0">
              <span className="font-display text-[40px] sm:text-[52px] lg:text-[64px] font-medium tracking-[-0.035em]"
                    style={{color: 'var(--ink)'}}>
                {item}
              </span>
              <span className="font-mono text-[22px]" style={{color: 'var(--accent-violet)'}}>✦</span>
            </div>
          ))}
        </div>
      </div>

      <div className="max-w-[1280px] mx-auto px-6 lg:px-10 mt-14 flex flex-wrap gap-2 reveal" data-delay="120">
        {items.map(i => (
          <span key={i} className="industry-pill">{i}</span>
        ))}
      </div>
    </section>
  );
}

function WhyCardefi() {
  const reasons = [
    {
      idx: '/01',
      title: 'Engineers, not slide-makers',
      body: "We do the work. Every engagement is led by senior engineers who write production code — not consultants who hand specs to someone else.",
      bullets: ['Hands-on architecture', 'Code review with your team', 'Production-ready output'],
    },
    {
      idx: '/02',
      title: 'Senior-only delivery teams',
      body: "No juniors-on-the-bench staffing. Every name on your engagement has shipped systems like yours before, in production, at scale.",
      bullets: ['10+ yrs avg. tenure', 'Same team start to finish', 'Direct access, no proxies'],
    },
    {
      idx: '/03',
      title: 'Outcome-based partnerships',
      body: "We commit to the outcome, not the hours. Engagements are structured around measurable business results — deployed software, KPI movement, transferred capability.",
      bullets: ['Milestone-tied scope', 'KPI ownership', 'Knowledge transfer built-in'],
    },
  ];

  return (
    <section id="why" className="relative py-28 lg:py-36">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="max-w-[820px] mb-16 lg:mb-20">
          <div className="reveal eyebrow mb-5">Why Cardefi</div>
          <h2 className="reveal font-display text-[36px] sm:text-[44px] lg:text-[60px] leading-[1.0] tracking-[-0.04em] font-medium" data-delay="80">
            Three things <span className="serif-em" style={{color: 'var(--ink-warm)'}}>we won&apos;t</span>
            <br />
            compromise on.
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-5">
          {reasons.map((r, i) => (
            <div key={r.idx} className="reveal relative p-7 lg:p-8 rounded-2xl flex flex-col h-full"
                 style={{background: 'var(--surface-1)', border: '1px solid var(--border)'}}
                 data-delay={i * 110}>
              <div className="font-mono text-[11px] tracking-[0.2em] mb-8" style={{color: 'var(--muted)'}}>{r.idx}</div>
              <h3 className="font-display text-[24px] font-semibold tracking-tight leading-[1.15] mb-4" style={{color: 'var(--ink)'}}>
                {r.title}
              </h3>
              <p className="text-[14.5px] leading-[1.6] mb-7" style={{color: 'var(--muted)'}}>
                {r.body}
              </p>
              <ul className="mt-auto space-y-2.5 pt-6 border-t" style={{borderColor: 'var(--border)'}}>
                {r.bullets.map(b => (
                  <li key={b} className="flex items-start gap-2.5 text-[13.5px]" style={{color: 'var(--ink)'}}>
                    <span className="mt-1 flex-shrink-0">
                      <WCheck size={14} stroke={2} className="" style={{color: 'var(--accent-violet)'}} />
                    </span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats() {
  // PLACEHOLDER NUMBERS — client to confirm/replace before launch.
  const stats = [
    { label: 'Years of combined senior engineering', value: 80, suffix: '+' },
    { label: 'Production systems delivered', value: 50, suffix: '+' },
    { label: 'AI workflows deployed', value: 24, suffix: '' },
    { label: 'Client retention', value: 98, suffix: '%' },
  ];

  return (
    <section className="relative py-20" style={{borderTop: '1px solid var(--border)', borderBottom: '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-4 gap-y-12 gap-x-8">
          {stats.map((s, i) => (
            <div key={s.label} className="reveal" data-delay={i * 100}>
              <div className="font-display text-[44px] sm:text-[52px] lg:text-[64px] font-medium tracking-[-0.04em] leading-none mb-3"
                   style={{color: 'var(--ink)'}}>
                <CountUp to={s.value} suffix={s.suffix} duration={1600} />
              </div>
              <div className="text-[13px] leading-[1.5] max-w-[200px]" style={{color: 'var(--muted)'}}>
                {s.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Industries = Industries;
window.WhyCardefi = WhyCardefi;
window.Stats = Stats;