// BentoOffer — 6-block "What we offer" bento. Apple-clean white cards on a deep
// navy section. Each block is a compact visual mockup of the service; no body copy.

// ─── Mini visual blocks ─────────────────────────────────

const TaxAdvisoryMock = () => (
  <div className="bento-mock bento-mock-tax">
    <div className="bento-form">
      <div className="bento-form-head">
        <span className="bento-form-tag">LHDN · Form C</span>
        <span className="bento-form-yr">YA 2025</span>
      </div>
      <div className="bento-form-fields">
        {[
          { l: "Chargeable income", v: "RM 248,400.00" },
          { l: "Tax rate",          v: "17%" },
          { l: "Tax payable",       v: "RM 42,228.00" }
        ].map((f, i) => (
          <div key={i} className="bento-form-field">
            <span>{f.l}</span><b>{f.v}</b>
          </div>
        ))}
      </div>
      <div className="bento-form-stamp">FILED</div>
    </div>
  </div>
);

const PayrollMock = () => (
  <div className="bento-mock bento-mock-payroll">
    {[
      { n: "Aishah R.",   r: "Designer",   s: "RM 6,200" },
      { n: "Ben Wong",    r: "Engineer",   s: "RM 9,800" },
      { n: "Priya N.",    r: "Marketing",  s: "RM 5,400" }
    ].map((p, i) => (
      <div key={i} className="bento-pay-row">
        <div className="bento-pay-avatar" style={{ background: ["#5BA8E8","#E5B65A","#A78BFA"][i] }}>
          {p.n[0]}
        </div>
        <div className="bento-pay-body">
          <div className="bento-pay-name">{p.n}</div>
          <div className="bento-pay-role">{p.r}</div>
        </div>
        <div className="bento-pay-amt">{p.s}</div>
      </div>
    ))}
    <div className="bento-pay-tags">
      <span>EPF</span><span>SOCSO</span><span>EIS</span><span>PCB</span>
    </div>
  </div>
);

const ConsultingMock = () => {
  // Mini revenue trend line — 12 datapoints climbing
  const pts = [22, 30, 26, 38, 44, 42, 56, 60, 68, 74, 88, 96];
  const max = 100;
  const w = 280;
  const h = 110;
  const stepX = w / (pts.length - 1);
  const path = pts.map((y, i) => `${i === 0 ? "M" : "L"} ${i * stepX} ${h - (y / max) * h}`).join(" ");
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <div className="bento-mock bento-mock-consult">
      <div className="bento-consult-head">
        <div>
          <div className="bento-consult-label">Revenue · YTD</div>
          <div className="bento-consult-value">RM 1.24M</div>
        </div>
        <span className="bento-consult-delta">▲ 28.4%</span>
      </div>
      <svg viewBox={`0 0 ${w} ${h}`} className="bento-consult-chart" preserveAspectRatio="none">
        <defs>
          <linearGradient id="bento-consult-fill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#5BA8E8" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#5BA8E8" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={area} fill="url(#bento-consult-fill)" />
        <path d={path} fill="none" stroke="#1F5EA0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        {pts.map((y, i) => i === pts.length - 1 && (
          <circle key={i} cx={i * stepX} cy={h - (y / max) * h} r="3.5" fill="#1F5EA0" stroke="#fff" strokeWidth="1.5" />
        ))}
      </svg>
      <div className="bento-consult-axis">
        <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
      </div>
    </div>
  );
};

const BookkeepingMock = () => (
  <div className="bento-mock bento-mock-books">
    <div className="bento-mock-ledger">
      <div className="bento-ledger-head">
        <span>Date</span><span>Vendor</span><span>Cat.</span><span>RM</span>
      </div>
      {[
        { d: "14 May", v: "Maxis Bhd",      c: "Telco",   n: "—198.00",    t: "out" },
        { d: "12 May", v: "Stripe payout",  c: "Income",  n: "+12,480.00", t: "in" },
        { d: "10 May", v: "Grab Business",  c: "Travel",  n: "—64.20",     t: "out" },
        { d: "08 May", v: "TNB Berhad",     c: "Utility", n: "—312.50",    t: "out" }
      ].map((r, i) => (
        <div key={i} className="bento-ledger-row">
          <span>{r.d}</span>
          <span className="bento-ledger-v">{r.v}</span>
          <span className="bento-ledger-c">{r.c}</span>
          <span className={`bento-ledger-n bento-ledger-${r.t}`}>{r.n}</span>
        </div>
      ))}
    </div>
  </div>
);

const SecretarialMock = () => (
  <div className="bento-mock bento-mock-setup">
    <div className="bento-cert">
      <div className="bento-cert-corner bento-cert-tl" />
      <div className="bento-cert-corner bento-cert-tr" />
      <div className="bento-cert-corner bento-cert-bl" />
      <div className="bento-cert-corner bento-cert-br" />
      <div className="bento-cert-head">
        <div className="bento-cert-crest">
          <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.4">
            <circle cx="16" cy="16" r="11" />
            <path d="M11 16l4 4 7-8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <div className="bento-cert-org">SSM · Companies Commission of Malaysia</div>
      </div>
      <div className="bento-cert-title">Certificate of Incorporation</div>
      <div className="bento-cert-lines">
        <span style={{ width: "68%" }} />
        <span style={{ width: "84%" }} />
        <span style={{ width: "52%" }} />
      </div>
      <div className="bento-cert-foot">
        <div className="bento-cert-co">YOUR COMPANY SDN. BHD.</div>
        <div className="bento-cert-no">Co. No. 202401012345-X</div>
      </div>
      <div className="bento-cert-seal">
        <svg viewBox="0 0 60 60" width="56" height="56" fill="none">
          <circle cx="30" cy="30" r="26" stroke="currentColor" strokeWidth="1.2" strokeDasharray="2 3" />
          <circle cx="30" cy="30" r="18" stroke="currentColor" strokeWidth="1" />
          <text x="30" y="27" textAnchor="middle" fontSize="6" fill="currentColor" fontFamily="Mona Sans, sans-serif" fontWeight="600" letterSpacing="0.1em">SSM</text>
          <text x="30" y="36" textAnchor="middle" fontSize="4" fill="currentColor" fontFamily="Mona Sans, sans-serif" letterSpacing="0.05em">VERIFIED</text>
        </svg>
      </div>
    </div>
  </div>
);

const FinancialPlanningMock = () => {
  // Donut + breakdown legend
  const segments = [
    { label: "Operations", pct: 42, color: "#1F5EA0" },
    { label: "Payroll",    pct: 26, color: "#5BA8E8" },
    { label: "Reserves",   pct: 18, color: "#9AD0F5" },
    { label: "Taxes",      pct: 14, color: "#0E1F33" }
  ];
  const r = 36;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className="bento-mock bento-mock-fp">
      <svg viewBox="0 0 100 100" className="bento-fp-donut">
        {segments.map((s, i) => {
          const dash = (s.pct / 100) * c;
          const el = (
            <circle
              key={i}
              cx="50" cy="50" r={r}
              fill="none"
              stroke={s.color}
              strokeWidth="14"
              strokeDasharray={`${dash} ${c - dash}`}
              strokeDashoffset={-offset}
              transform="rotate(-90 50 50)"
            />
          );
          offset += dash;
          return el;
        })}
        <text x="50" y="48" textAnchor="middle" fontSize="11" fontWeight="700" fill="#0E1F33" fontFamily="Mona Sans, sans-serif">RM 480k</text>
        <text x="50" y="60" textAnchor="middle" fontSize="6" fill="rgba(14,31,51,0.55)" letterSpacing="0.1em" fontFamily="Mona Sans, sans-serif">FY 2025 ALLOC.</text>
      </svg>
      <div className="bento-fp-legend">
        {segments.map((s, i) => (
          <div key={i} className="bento-fp-row">
            <span className="bento-fp-swatch" style={{ background: s.color }} />
            <span className="bento-fp-label">{s.label}</span>
            <span className="bento-fp-pct">{s.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── Bento blocks ─────────────────────────────────────────

const BLOCKS = [
  {
    id: "tax",
    title: "Tax advisory",
    desc: "Personal and business tax support, including e-filing, SST, customs duties, and tax calculations.",
    Mock: TaxAdvisoryMock
  },
  {
    id: "payroll",
    title: "Payroll processing",
    desc: "Accurate payroll, salary calculations, EPF, SOCSO, EIS, PCB, Zakat, and statutory contributions, handled on time.",
    Mock: PayrollMock
  },
  {
    id: "consulting",
    title: "Business consulting",
    desc: "Tailored support for business setup, MOF registration, M&A guidance, valuations, ESG reporting, and operational improvement.",
    Mock: ConsultingMock
  },
  {
    id: "books",
    title: "Bookkeeping & accounting services",
    desc: "Accurate, up-to-date financial records, reports, and submissions, handled with the right tools so you can focus on growing your business.",
    Mock: BookkeepingMock
  },
  {
    id: "secretary",
    title: "Secretarial services",
    desc: "Company incorporation, statutory records, share administration, filings, meetings, and compliance, all managed seamlessly.",
    Mock: SecretarialMock
  },
  {
    id: "fp",
    title: "Financial planning",
    desc: "Budgeting, cash flow planning, and risk assessment to help you make better business decisions.",
    Mock: FinancialPlanningMock
  }
];

const BentoBlock = ({ block }) => {
  const { title, desc, Mock } = block;
  return (
    <div className="bento-block">
      <div className="bento-block-mock"><Mock /></div>
      <div className="bento-block-foot">
        <span className="bento-block-bullet" />
        <div className="bento-block-title">{title}</div>
      </div>
      <div className="bento-block-hover">
        <div className="bento-block-hover-title">{title}</div>
        <div className="bento-block-hover-desc">{desc}</div>
      </div>
    </div>
  );
};

const BentoOffer = () => (
  <section className="bento-section" id="offer">
    <div className="bento-inner">
      <div className="bento-head">
        <div className="section-eyebrow">What we offer</div>
        <h2 className="section-title">Your back office, <em>handled.</em></h2>
      </div>
      <div className="bento-grid">
        {BLOCKS.map((b) => <BentoBlock key={b.id} block={b} />)}
      </div>
    </div>
  </section>
);

window.BentoOffer = BentoOffer;