// ─────────────────────────────────────────────────────────
//  Tender Command — Government & private procurement
//  Interactive pipeline demo · TenderStack method
// ─────────────────────────────────────────────────────────

const { useState: useStateT, useEffect: useEffectT } = React;

const TRACKS = {
  india: {
    label: 'India',
    tag: 'GeM · CPP · eProc · State portals · Indian RFP',
    intro: 'Central, state, PSU, and private procurement across India — from GeM catalog bids and NIC eProc to multi-crore EPC tenders and enterprise RFPs. BOQ alignment, MSME/Udyam compliance, EMD/BG workflows, digitised annexures, and L1 tracking — built for Indian evaluator formats.',
    stages: [
      {
        id: 'scan',
        code: '01',
        title: 'Notice & eligibility scan',
        desc: 'Portal ingestion, category mapping, turnover/EMD gates, and a go/no-go score before a single hour is spent on drafting.',
        panel: {
          title: 'Live · GeM notice parser',
          lines: [
            { k: 'Tender ID', v: 'GEM/2026/B/4829103' },
            { k: 'Category', v: 'IT · Web platform + CMS' },
            { k: 'EMD', v: '₹2,40,000 · BG eligible' },
            { k: 'Eligibility', v: 'PASS · MSME + turnover OK' },
            { k: 'Go score', v: '87 / 100 · RECOMMEND BID' },
          ],
          log: [
            '> scraping tender PDF + corrigendum stack…',
            '> cross-check MSME/Udyam against annexure-II…',
            '> EMD calculator synced to BOQ line 14…',
          ],
        },
        deliverables: ['Go/no-go memo', 'Deadline calendar', 'EMD & BG checklist'],
      },
      {
        id: 'tech',
        code: '02',
        title: 'Technical bid assembly',
        desc: 'SOW-mapped response, architecture deck, past-performance dossier, and BOQ line-item justification — formatted to evaluator skim patterns.',
        panel: {
          title: 'Live · Technical pack builder',
          lines: [
            { k: 'Sections', v: '12 / 12 complete' },
            { k: 'Past work', v: '4 refs · JK Realtors + 3 SaaS' },
            { k: 'Architecture', v: 'Edge + headless · 18 slides' },
            { k: 'BOQ map', v: '100% lines annotated' },
            { k: 'Page count', v: '248 pp · within limit' },
          ],
          log: [
            '> binding annexure-VII experience certificates…',
            '> auto-indexing table of contents…',
            '> watermark + page lock for PDF export…',
          ],
        },
        deliverables: ['Technical volume', 'Architecture narrative', 'Reference pack'],
      },
      {
        id: 'comp',
        code: '03',
        title: 'Compliance matrix',
        desc: 'Clause-by-clause mapping — every mandatory document, statutory declaration, and format rule checked before upload.',
        panel: {
          title: 'Live · Compliance grid',
          lines: [
            { k: 'Mandatory docs', v: '34 / 34 attached' },
            { k: 'Statutory', v: 'GST · PAN · IEC · Udyam' },
            { k: 'Format rules', v: 'Font · margin · signatory OK' },
            { k: 'Red flags', v: '0 open · 2 resolved' },
            { k: 'Matrix status', v: 'GREEN · ready to seal' },
          ],
          log: [
            '> validating digital signature chain…',
            '> notarisation slot booked · 14:30 IST…',
            '> checksum manifest generated…',
          ],
        },
        deliverables: ['Compliance matrix', 'Annexure binder', 'Signatory map'],
      },
      {
        id: 'submit',
        code: '04',
        title: 'Submission & hash lock',
        desc: 'Encrypted upload, hash verification, dual-signoff workflow, and timestamped receipt archived to your data room.',
        panel: {
          title: 'Live · Submission console',
          lines: [
            { k: 'Portal', v: 'GeM · seller dashboard' },
            { k: 'Upload', v: 'Technical + Financial sealed' },
            { k: 'Hash', v: 'SHA-256 verified ✓' },
            { k: 'Receipt', v: 'TXN-8849201 · 18:04 IST' },
            { k: 'Backup', v: 'Drive + offline copy' },
          ],
          log: [
            '> uploading financial envelope (password sealed)…',
            '> portal ACK received · receipt saved…',
            '> Slack alert → bid team + legal…',
          ],
        },
        deliverables: ['Submission receipt', 'Hash manifest', 'War-room log'],
      },
      {
        id: 'award',
        code: '05',
        title: 'Evaluation & award track',
        desc: 'Clarification rounds, price negotiation prep, L1 monitoring, and contract onboarding — so wins convert to signed POs.',
        panel: {
          title: 'Live · Post-bid tracker',
          lines: [
            { k: 'Stage', v: 'Technical eval · Round 2' },
            { k: 'Clarification', v: 'Due in 36h' },
            { k: 'L1 gap', v: '−4.2% · within band' },
            { k: 'Legal', v: 'Draft SLA under review' },
            { k: 'Forecast', v: 'Award window · 12 days' },
          ],
          log: [
            '> drafting clarification response v3…',
            '> pricing sensitivity model updated…',
            '> contract playbook shared with client…',
          ],
        },
        deliverables: ['Clarification pack', 'Negotiation brief', 'Contract checklist'],
      },
    ],
  },
  international: {
    label: 'International',
    tag: 'UNGM · World Bank · TED EU · SAM.gov · GCC · Global RFP',
    intro: 'Worldwide public and private procurement — multilateral development banks, UN agencies, EU/UK/US federal & state portals, GCC government contracts, and cross-border enterprise RFPs. Multi-currency commercial models, local-content rules, data-residency clauses, and timezone-aligned submission windows.',
    stages: [
      {
        id: 'scan',
        code: '01',
        title: 'Global notice & eligibility',
        desc: 'Portal ingestion across regions — UNGM, World Bank STEP, EU TED, SAM.gov, UK Contracts Finder, GCC eProc — with jurisdiction rules, currency gates, and go/no-go before drafting.',
        panel: {
          title: 'Live · Global tender scanner',
          lines: [
            { k: 'Tender ID', v: 'WB-IT-2026-44821' },
            { k: 'Portal', v: 'World Bank · STEP' },
            { k: 'Region', v: 'Multilateral · cross-border OK' },
            { k: 'Currency', v: 'USD · EMD $12,000' },
            { k: 'Go score', v: '84 / 100 · RECOMMEND BID' },
          ],
          log: [
            '> parsing IFB + addenda in EN/FR…',
            '> local-content threshold check · GCC…',
            '> FX exposure model · USD/INR/EUR…',
          ],
        },
        deliverables: ['Global go/no-go memo', 'Jurisdiction map', 'FX & EMD calendar'],
      },
      {
        id: 'tech',
        code: '02',
        title: 'International technical pack',
        desc: 'IFB/SOW-mapped response, ISO-aligned methodology, multilingual executive summary, and reference dossier formatted to donor or agency evaluation grids.',
        panel: {
          title: 'Live · Global technical builder',
          lines: [
            { k: 'Volumes', v: 'Technical + Financial · sealed' },
            { k: 'References', v: '6 · 3 countries · verifiable' },
            { k: 'Methodology', v: 'PMI + agile hybrid · 24 pp' },
            { k: 'Languages', v: 'EN primary · AR summary' },
            { k: 'Eval grid', v: '100% criteria mapped' },
          ],
          log: [
            '> binding past-performance attestations…',
            '> CVs + org chart per TOR clause 4.2…',
            '> data residency appendix drafted…',
          ],
        },
        deliverables: ['Technical volume', 'Methodology narrative', 'Global reference pack'],
      },
      {
        id: 'comp',
        code: '03',
        title: 'Cross-border compliance',
        desc: 'Sanctions screening, anti-bribery declarations, GDPR/data-localisation, insurance certificates, and agency-specific mandatory forms — clause by clause.',
        panel: {
          title: 'Live · International compliance',
          lines: [
            { k: 'Sanctions', v: 'CLEAR · OFAC + UN list' },
            { k: 'Data', v: 'GDPR · DPA template attached' },
            { k: 'Insurance', v: 'PI · WC · cross-border' },
            { k: 'Declarations', v: '28 / 28 signed' },
            { k: 'Matrix', v: 'GREEN · audit-ready' },
          ],
          log: [
            '> apostille checklist for MEA docs…',
            '> bidder responsibility matrix v2…',
            '> legal review · US + EU counsel…',
          ],
        },
        deliverables: ['Compliance matrix', 'Legal declarations', 'Insurance binder'],
      },
      {
        id: 'submit',
        code: '04',
        title: 'Multi-portal submission',
        desc: 'Timezone-staggered uploads, encrypted financial envelopes, dual-currency pricing, hash verification, and archived receipts across donor or government portals.',
        panel: {
          title: 'Live · Global submission hub',
          lines: [
            { k: 'Portal', v: 'UNGM · vendor portal' },
            { k: 'Deadline', v: '23:59 CET · synced' },
            { k: 'Financial', v: 'USD + EUR scenarios' },
            { k: 'Receipt', v: 'ACK-UN-992841 · saved' },
            { k: 'Backup', v: 'Data room + offline' },
          ],
          log: [
            '> uploading sealed financial envelope…',
            '> portal ACK + timestamp archived…',
            '> war-room alert → bid + legal + FX…',
          ],
        },
        deliverables: ['Submission receipts', 'Hash manifest', 'Portal audit log'],
      },
      {
        id: 'award',
        code: '05',
        title: 'Evaluation & contract award',
        desc: 'Clarification rounds across time zones, BAFO prep, contract negotiation (FIDIC, World Bank standard forms), and onboarding for cross-border delivery.',
        panel: {
          title: 'Live · Global award tracker',
          lines: [
            { k: 'Stage', v: 'Technical eval · shortlist' },
            { k: 'Clarification', v: 'Due · 48h · GMT+4' },
            { k: 'BAFO', v: 'Draft · −6% band' },
            { k: 'Contract', v: 'World Bank SSS · redlines' },
            { k: 'Kickoff', v: 'Provisional · +21 days' },
          ],
          log: [
            '> drafting multi-timezone clarification…',
            '> contract playbook · FIDIC vs agency form…',
            '> mobilisation plan · India + client site…',
          ],
        },
        deliverables: ['Clarification pack', 'BAFO model', 'Contract onboarding kit'],
      },
    ],
  },
};

const COVERAGE = [
  {
    region: 'India',
    items: ['GeM', 'CPP Portal', 'NIC eProc', 'State e-tender cells', 'PSU portals', 'Indian enterprise RFP'],
  },
  {
    region: 'Middle East & Africa',
    items: ['GCC federal eProc', 'Dubai DM', 'Saudi Etimad', 'AfDB', 'African state tenders'],
  },
  {
    region: 'Europe & UK',
    items: ['EU TED', 'Contracts Finder UK', 'Find a Tender', 'National gov portals'],
  },
  {
    region: 'Americas',
    items: ['SAM.gov', 'US state & local RFP', 'Canada BUYANDSELL', 'LatAm gov procurement'],
  },
  {
    region: 'Asia-Pacific',
    items: ['ADB', 'ASEAN portals', 'Australia AusTender', 'Singapore GeBIZ'],
  },
  {
    region: 'Multilateral & UN',
    items: ['UNGM', 'World Bank', 'IMF', 'UNDP · UNICEF · WHO IT bids'],
  },
];

const METHOD = [
  {
    title: 'TenderStack™ pipeline',
    body: 'One orchestration layer for every bid — India or international, government portal or private RFP. Same data room, regional compliance rulesets, full submission audit trail.',
  },
  {
    title: 'Evaluator-first drafting',
    body: 'Responses mapped to how evaluators score in each market: Indian annexure order, World Bank TOR grids, EU award criteria — evidence up front, not buried on page 180.',
  },
  {
    title: 'India + global dual capacity',
    body: 'Run a GeM technical bid and a UNGM or SAM.gov submission in parallel — shared asset library, separate jurisdiction rules, timezone-aware deadline war rooms.',
  },
  {
    title: 'Post-submission ops',
    body: 'Clarifications, L1/BAFO tracking, and contract onboarding across IST, GMT, and EST — wins convert to signed POs, not portal silence.',
  },
];

function TenderPanel({ stage, trackKey }) {
  const [tick, setTick] = useStateT(0);
  useEffectT(() => {
    setTick(0);
    const id = setInterval(() => setTick(t => t + 1), 2200);
    return () => clearInterval(id);
  }, [stage.id, trackKey]);

  const logLine = stage.panel.log[tick % stage.panel.log.length];

  return (
    <div className="tender-panel">
      <div className="tender-panel-head">
        <span className="tender-panel-dot"/>
        <span>{stage.panel.title}</span>
      </div>
      <div className="tender-panel-grid">
        {stage.panel.lines.map(row => (
          <div key={row.k} className="tender-panel-row">
            <span className="k">{row.k}</span>
            <span className="v">{row.v}</span>
          </div>
        ))}
      </div>
      <div className="tender-panel-log">
        <code>{logLine}</code>
      </div>
    </div>
  );
}

function Tenders() {
  const [track, setTrack] = useStateT('india');
  const [stageIdx, setStageIdx] = useStateT(0);
  const active = TRACKS[track];
  const stage = active.stages[stageIdx];

  useEffectT(() => { setStageIdx(0); }, [track]);

  return (
    <section className="section shell tender-section" data-screen-label="Tenders">
      <div className="tender-header">
        <div>
          <div className="kicker">§Procurement · India &amp; international tenders</div>
          <h2 style={{
            fontFamily:'var(--serif)', fontWeight:400,
            fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
            letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'22ch',
            textWrap:'balance',
          }}>
            India to worldwide.<br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>One bid pipeline.</span>
          </h2>
          <p className="tender-lede">
            WebBrandify supports <strong>government and private tender deals across India</strong> (GeM, CPP, eProc, state portals, PSU, enterprise RFP)
            and <strong>international procurement worldwide</strong> (UN, World Bank, EU, UK, US, GCC, APAC, and global private RFPs).
            From notice scan to signed contract — one operator, full audit trail, timezone-aware submissions.
          </p>
        </div>
        <div className="tender-stats">
          {[
            ['Coverage', 'India + 40+ countries'],
            ['Portals', 'Gov + private'],
            ['Currencies', 'INR · USD · EUR · GBP'],
            ['Support', '24/7 deadline ops'],
          ].map(([k, v]) => (
            <div key={k} className="tender-stat">
              <span className="l">{k}</span>
              <span className="v">{v}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="tender-method">
        {METHOD.map(m => (
          <div key={m.title} className="tender-method-card">
            <h4>{m.title}</h4>
            <p>{m.body}</p>
          </div>
        ))}
      </div>

      <div className="tender-demo">
        <div className="tender-demo-bar">
          <span className="kicker">§Live demo · TenderStack pipeline</span>
          <div className="tender-track-toggle">
            {Object.entries(TRACKS).map(([key, t]) => (
              <button
                key={key}
                type="button"
                className={`tender-track-btn magnetic-trigger ${track === key ? 'active' : ''}`}
                onClick={() => setTrack(key)}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        <p className="tender-track-intro">{active.intro}</p>
        <p className="tender-track-tag">{active.tag}</p>

        <div className="tender-pipeline">
          {active.stages.map((s, i) => (
            <button
              key={s.id}
              type="button"
              className={`tender-stage magnetic-trigger ${i === stageIdx ? 'active' : ''} ${i < stageIdx ? 'done' : ''}`}
              onClick={() => setStageIdx(i)}
            >
              <span className="code">{s.code}</span>
              <span className="title">{s.title}</span>
              {i < active.stages.length - 1 && <span className="connector" aria-hidden="true"/>}
            </button>
          ))}
        </div>

        <div className="tender-detail-grid">
          <div className="tender-detail-copy">
            <h3>{stage.title}</h3>
            <p>{stage.desc}</p>
            <ul className="tender-deliv">
              {stage.deliverables.map(d => <li key={d}>{d}</li>)}
            </ul>
            <a href="#booking" className="tender-cta magnetic-trigger">
              <span>Discuss a live tender →</span>
            </a>
          </div>
          <TenderPanel stage={stage} trackKey={track} />
        </div>
      </div>

      <div className="tender-coverage">
        <div className="kicker">§Worldwide coverage · Portals &amp; channels</div>
        <div className="tender-coverage-grid">
          {COVERAGE.map(c => (
            <div key={c.region} className="tender-coverage-card">
              <h4>{c.region}</h4>
              <ul>
                {c.items.map(item => <li key={item}>{item}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="tender-footnote">
        <span>India:</span> GeM · CPP · NIC eProc · state cells · PSU · private RFP &nbsp;·&nbsp;
        <span>International:</span> UNGM · World Bank · TED · SAM.gov · GCC · APAC · global enterprise RFP
      </div>
    </section>
  );
}

window.Tenders = Tenders;