// Pricing — Malaysian Sdn. Bhd. incorporation comparison.
// Two plan cards on top + categorized feature comparison table.

const { useState: useStateP } = React;

// ─── Plan data ──────────────────────────────────────────
const INC_PLANS = {
  locals: [
    {
      id: "incsec",
      name: "Incorporation + Secretary",
      desc: "Perfect if you want us to register your business and take care of annual filings with SSM.",
      priceWas: 2480,
      price: 1580
    },
    {
      id: "full",
      name: "Full Compliance",
      desc: "If you want your first year covered, from company formation to expert support and filing.",
      priceFrom: 3850,
      featured: true
    }
  ],
  foreigners: [
    {
      id: "incsec",
      name: "Incorporation + Secretary",
      desc: "We handle SSM registration plus the resident director arrangement required for foreign founders.",
      priceWas: 6800,
      price: 5400
    },
    {
      id: "full",
      name: "Full Compliance",
      desc: "End-to-end coverage for your Malaysian Sdn. Bhd., including local director, bookkeeping and tax.",
      priceFrom: 9600,
      featured: true
    }
  ]
};

// ─── Comparison table data ──────────────────────────────
const C = "check";       // ✓
const X = "dash";        // —
const TXT = "text";      // arbitrary text

const COMPARISON = [
  {
    title: "Incorporation",
    rows: [
      { label: "Registration preparation and filing, including RM 1,010 SSM fee", incsec: C, full: C },
      { label: "Company constitution",                                            incsec: C, full: C },
      { label: "All post-incorporation documents (share certificates, registers, minutes book)", incsec: C, full: C },
      { label: "SSM name search and reservation",                                 incsec: C, full: C },
      { label: "SSM business profile set-up",                                     incsec: C, full: C },
      { label: "Assistance in connecting with our banking partners",              incsec: C, full: C }
    ]
  },
  {
    title: "Corporate secretary",
    rows: [
      { label: "Expert support via in-app chat",                                  incsec: C, full: C },
      { label: "Preparation and filing of Annual Return, including RM 150 SSM fee", incsec: C, full: C },
      { label: "Holding of Annual General Meeting (AGM)",                         incsec: C, full: C },
      { label: "Appointments and resignations of directors, officers, or auditors", incsec: C, full: C },
      { label: "Unlimited changes in company name, address, business activity",   incsec: C, full: C },
      { label: "Shares management of up to 50 shareholders",                      incsec: C, full: C }
    ]
  },
  {
    title: "Bookkeeping",
    rows: [
      { label: "Unlimited bookkeeping",                                           incsec: X, full: C },
      { label: "Automatic reconciliations",                                       incsec: X, full: C },
      { label: "Quarterly management reports",                                    incsec: X, full: C }
    ]
  },
  {
    title: "Financial software",
    rows: [
      { label: "Create, send and follow up on invoices",                          incsec: X, full: C },
      { label: "Expense tracking with receipt capture",                           incsec: X, full: C },
      { label: "Multi-currency support",                                          incsec: X, full: C }
    ]
  },
  {
    title: "Accounting and tax",
    sub: "Up to RM 100,000 expected revenue for first financial year",
    rows: [
      { label: "Filing and bookkeeping support via in-app chat",                  incsec: X, full: C },
      { label: "Support SLA 6 business hours",                                    incsec: X, full: C },
      { label: "Management reports reviewed by accountant annually",              incsec: X, full: C },
      { label: "Annual LHDN corporate tax filing (Form C)",                       incsec: X, full: C },
      { label: "SST registration & filing (if applicable)",                       incsec: X, full: C }
    ]
  },
  {
    title: "Visa & immigration",
    sub: "For founders, key hires and dependents — included with Full Compliance",
    rows: [
      { label: "Employment Pass (EP) advisory & application support",             incsec: X, full: C },
      { label: "Dependent's Pass for spouse and children",                        incsec: X, full: C },
      { label: "Professional Visit Pass for short-term consultants",              incsec: X, full: C },
      { label: "Annual EP renewals tracked and filed",                            incsec: X, full: C },
      { label: "MM2H residence advisory",                                         incsec: X, full: C }
    ]
  }
];

// ─── Bits ───────────────────────────────────────────────
const Tick = () => (
  <svg viewBox="0 0 16 16" width="20" height="20" aria-label="Included">
    <path d="M3 8.5l3.5 3.5L13 5" fill="none" stroke="#0E1F33" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const Dash = () => (
  <svg viewBox="0 0 16 16" width="20" height="20" aria-label="Not included">
    <path d="M5 8h6" fill="none" stroke="#0E1F33" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

const Cell = ({ kind, children }) => (
  <div className="cmp-cell">
    {kind === C ? <Tick /> : kind === X ? <Dash /> : <span>{children}</span>}
  </div>
);

// ─── Plan card ──────────────────────────────────────────
const waLink = (planName) =>
  `https://wa.me/60102049494?text=${encodeURIComponent(`Hi Seckira, I'm interested in the ${planName} plan.`)}`;

const IncPlanCard = ({ plan }) => (
  <div className={`inc-card ${plan.featured ? "inc-card-featured" : ""}`}>
    <div className="inc-card-name">{plan.name}</div>
    <div className="inc-card-desc">{plan.desc}</div>
    <a className="inc-card-cta" href={waLink(plan.name)} target="_blank" rel="noopener noreferrer">
      Get this plan
      <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
        <path d="M3 8h10m-4-4 4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </a>
  </div>
);

// ─── Pricing section ────────────────────────────────────
const Pricing = () => {
  const [mode, setMode] = useStateP("locals");
  const plans = INC_PLANS[mode];

  return (
    <section className="pricing-inc" id="pricing">
      <div className="pricing-inc-inner">
        <div className="pricing-inc-head">
          <h2 className="pricing-inc-title">
            <span>Company incorporation</span><br />
            <span>plans to <em>fit your business</em></span>
          </h2>
          <p className="pricing-inc-lead">
            The cost of incorporating a Sdn. Bhd. depends on whether you're a Malaysian resident or not.
            Foreign founders need at least one resident director, so incorporation costs more.
            Not sure which plan to choose? This breakdown should help.
          </p>
        </div>

        <div className="pricing-inc-toolbar">
          <div className="pricing-inc-toggle" role="tablist" aria-label="Residency">
            <div className={`pricing-inc-toggle-indicator pricing-inc-toggle-${mode}`} />
            <button
              role="tab"
              aria-selected={mode === "locals"}
              className={`pricing-inc-toggle-opt ${mode === "locals" ? "on" : ""}`}
              onClick={() => setMode("locals")}>
              For locals
            </button>
            <button
              role="tab"
              aria-selected={mode === "foreigners"}
              className={`pricing-inc-toggle-opt ${mode === "foreigners" ? "on" : ""}`}
              onClick={() => setMode("foreigners")}>
              For foreigners
            </button>
          </div>
        </div>

        {/* Comparison table */}
        <div className="cmp-table">
          {/* Plan card header row (sticky) */}
          <div className="cmp-header">
            <div className="cmp-header-spacer" />
            {plans.map(p => (
              <div key={p.id} className="cmp-header-plan">
                <IncPlanCard plan={p} />
              </div>
            ))}
          </div>

          {COMPARISON.map((section, si) => (
            <div key={si} className="cmp-section">
              <div className="cmp-section-head">
                <div className="cmp-section-title">{section.title}</div>
                {section.sub && <div className="cmp-section-sub">{section.sub}</div>}
              </div>
              <div className="cmp-section-rows">
                {section.rows.map((row, ri) => (
                  <div key={ri} className="cmp-row">
                    <div className="cmp-row-label">{row.label}</div>
                    <Cell kind={row.incsec} />
                    <Cell kind={row.full} />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Pricing = Pricing;