import "./sme-initiative.css";
import { SmeInitiativeForm } from "./sme-initiative-form";

function HighlightIcon({ icon }: { icon: "badge" | "calendar" | "shield" | "users" }) {
  switch (icon) {
    case "badge":
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
          <path
            d="M4.4 8.8a3.6 3.6 0 0 1 4.4-4.4 3.6 3.6 0 0 1 6.4 0 3.6 3.6 0 0 1 4.4 4.4 3.6 3.6 0 0 1 0 6.4 3.6 3.6 0 0 1-4.4 4.4 3.6 3.6 0 0 1-6.4 0 3.6 3.6 0 0 1-4.4-4.4 3.6 3.6 0 0 1 0-6.4Z"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinejoin="round"
          />
          <path d="M9 12l2 2 4-4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case "calendar":
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
          <rect x="4" y="5.4" width="16" height="14.6" rx="1.8" fill="none" stroke="currentColor" strokeWidth="1.6" />
          <path d="M4 9.6h16M8.4 3.4v4M15.6 3.4v4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <circle cx="14.4" cy="14.6" r="3.2" fill="none" stroke="currentColor" strokeWidth="1.4" />
          <path d="M14.4 13.2v1.4l1 0.7" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case "shield":
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
          <path
            d="M12 3.2l7 2.6v6.1c0 4.2-2.8 7.3-7 8.9-4.2-1.6-7-4.7-7-8.9V5.8z"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.6"
            strokeLinejoin="round"
          />
          <path d="M8.6 12.1l2.2 2.2 4.6-4.8" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      );
    case "users":
      return (
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
          <path d="M3.6 19.4v-1.2a3.6 3.6 0 0 1 3.6-3.6h3.6a3.6 3.6 0 0 1 3.6 3.6v1.2" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
          <circle cx="9" cy="8.4" r="3.2" fill="none" stroke="currentColor" strokeWidth="1.6" />
          <path d="M14.8 5.2a3.2 3.2 0 0 1 0 6.2M20.4 19.4v-1.2a3.2 3.2 0 0 0-2.4-3.1" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
      );
  }
}

function CircleCheckIcon() {
  return (
    <svg viewBox="0 0 24 24" width="100%" height="100%" aria-hidden>
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.6" />
      <path d="M8.4 12.2l2.4 2.4 4.8-5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function MailIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
      <rect x="3.6" y="5.6" width="16.8" height="12.8" rx="1.8" fill="none" stroke="currentColor" strokeWidth="1.6" />
      <path d="M4.4 6.6l7.6 6 7.6-6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ArrowIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden>
      <path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const highlights = [
  {
    num: "01",
    icon: "badge",
    title: "Open to DIFC & ADGM Firms",
    desc: "All registered businesses under DIFC, DFSA, and ADGM regulation are eligible to apply.",
  },
  {
    num: "02",
    icon: "calendar",
    title: "12 Months, No Charge",
    desc: "Full platform access from day one. No trials, no feature limitations during the programme period.",
  },
  {
    num: "03",
    icon: "shield",
    title: "Subsidized Continuity",
    desc: "Firms graduating from the programme access preferential pricing to ensure continuity beyond the 12-month window.",
  },
  {
    num: "04",
    icon: "users",
    title: "20 Firms Only",
    desc: "Only 20 eligible firms with fewer than 20 active clients can avail this initiative.",
  },
] as const;

const eligibility = [
  {
    title: "Be a registered business under DIFC, DFSA, or ADGM",
    desc: "Your firm must hold a valid licence or registration with one of the UAE's recognised financial regulators.",
  },
  {
    title: "Have fewer than 20 active clients",
    desc: "The programme is designed for smaller independent firms. Up to 20 qualifying firms will be accepted.",
  },
  {
    title: "Be operating in compliance with applicable law and regulation",
    desc: "Your firm must be in good standing and conducting business in accordance with all relevant legal and regulatory requirements.",
  },
  {
    title: "Be a regulated, client-facing investment or advisory firm",
    desc: "Open exclusively to wealth management, asset management, multi-family office, capital advisory firms, or external asset managers.",
  },
];

export function SmeInitiative() {
  return (
    <>
      <section className="wwd-section sme-hero-section" id="sme-initiative">
        <div className="sme-hero-media" aria-hidden="true">
          <img src="/smepic.avif" alt="" />
        </div>
        <div className="wwd-inner">
          <div className="wwd-top-row">
            <span className="wwd-eyebrow">SME Initiative 2026</span>
          </div>
          <div className="wwd-header-row">
            <h1 className="wwd-headline">UAE Wealth &amp; Asset Management — SME Initiative 2026</h1>
            <div className="sme-hero-copy">
              <p className="sme-hero-badge">Full Platform Access, Complimentary for 12 Months</p>
              <p className="wwd-body" style={{ justifySelf: "start", maxWidth: "none", paddingTop: 0 }}>
                Oxyfinz is extending institutional-grade reporting and portfolio infrastructure to independent
                advisory firms navigating today&apos;s regional market conditions at no cost.
              </p>
              <a className="sme-cta" href="#apply" data-oxy-scroll="apply">
                Apply for access
                <ArrowIcon />
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="wwd-section wwd-section--follow">
        <div className="wwd-inner">
          <div className="wwd-top-row">
            <span className="wwd-eyebrow">About the programme</span>
          </div>
          <div className="wwd-header-row">
            <h2 className="wwd-headline">Built for the UAE&apos;s next phase of growth</h2>
            <p className="wwd-body">
              The UAE is entering a new era as a global wealth and asset management hub. With ADGM reporting 57%
              growth in assets under management and DIFC now home to over 500 asset and wealth management firms,
              the opportunity has never been greater.
            </p>
          </div>
          <div className="sme-about-copy">
            <p>
              But rapid market expansion is also creating pressure for small and independent firms to scale
              faster, meet rising client expectations, and operate with greater efficiency. As the market
              recovers, firms are expected to move quickly and build resilient operations, often without the
              budgets or resources available to larger institutions.
            </p>
            <p>
              This initiative is our way of supporting the ecosystem we call home. All qualifying firms receive
              full platform access for 12 months at no cost — the same institutional-grade reporting and
              portfolio infrastructure used by larger organisations across the region. No trial conditions. No
              limitations.
            </p>
          </div>
        </div>
      </section>

      <section className="wwd-section wwd-section--follow">
        <div className="wwd-inner">
          <div className="wwd-top-row">
            <span className="wwd-eyebrow">Key highlights</span>
          </div>
          <div className="wwd-header-row">
            <h2 className="wwd-headline">What the programme offers</h2>
          </div>
          <div className="sme-hl-grid">
            {highlights.map((item) => (
              <div className="sme-hl-card" key={item.num}>
                <span className="sme-hl-num">{item.num}</span>
                <span className="sme-hl-icon">
                  <HighlightIcon icon={item.icon} />
                </span>
                <h3 className="sme-hl-title">{item.title}</h3>
                <p className="sme-hl-desc">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="wwd-section wwd-section--follow">
        <div className="wwd-inner">
          <div className="wwd-top-row">
            <span className="wwd-eyebrow">Eligibility criteria</span>
          </div>
          <div className="wwd-header-row">
            <h2 className="wwd-headline">To qualify, your firm must</h2>
          </div>
          <div className="sme-elig-list">
            {eligibility.map((item) => (
              <div className="sme-elig-item" key={item.title}>
                <span className="sme-elig-icon">
                  <CircleCheckIcon />
                </span>
                <div>
                  <h3 className="sme-elig-title">{item.title}</h3>
                  <p className="sme-elig-desc">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="wwd-section wwd-section--follow sme-apply-section" id="apply">
        <div className="wwd-inner">
          <div className="wwd-top-row">
            <span className="wwd-eyebrow">Registration</span>
          </div>
          <div className="sme-apply-intro">
            <h2 className="wwd-headline">Apply for access</h2>
            <p className="wwd-body">
              Complete the form below and a member of the Oxyfinz team will be in touch within two business days
              to confirm your eligibility and next steps.
            </p>
            <a className="sme-mail-link" href="mailto:hello@oxyfinz.com">
              <MailIcon />
              hello@oxyfinz.com
            </a>
          </div>

          <SmeInitiativeForm />

          <p className="sme-disclaimer">
            The UAE Wealth &amp; Asset Management Data Resilience Initiative is offered by Oxyfinz at its sole
            discretion. Eligibility is subject to verification. Extension beyond the initial 12-month period is
            not guaranteed and will be assessed based on market conditions and operational factors.
          </p>
        </div>
      </section>
    </>
  );
}