/* GCCReady — Tools hub. Surfaces 13 prebuilt interactive calculators / quizzes / scorecards
 * that live as standalone HTML at /tools-static/<name>.html.
 *
 * Each tool is a self-contained HTML+CSS+JS page rebranded with GCCReady chrome.
 * The React hub provides discovery, grouping, and SEO/AEO authority signals.
 */

const TOOL_GROUPS = [
  {
    title: 'Decide what to do',
    eyebrow: 'Direction & fit',
    sub: 'Pick the right credential, validate your eligibility, and see if the math works.',
    tools: [
      { slug:'credential-selector-quiz', icon:'help-circle', tag:'10 questions',
        title:'Credential Selector Quiz',
        body:'CPA, CMA, ACCA, EA, CFA — which one fits your profile, budget, timeline?' },
      { slug:'cpa-eligibility-checker', icon:'shield-check', tag:'2 minutes',
        title:'CPA Eligibility Checker',
        body:'State-by-state evaluation of your degree + credits. Tells you exactly which US states accept you.' },
      { slug:'cpa-roi-calculator', icon:'trending-up', tag:'Live calc',
        title:'CPA ROI Calculator',
        body:'Cost vs salary. Payback period, 5-year projection, lifetime earnings analysis.' },
      { slug:'cpa-exam-cost-calculator', icon:'coins', tag:'All-in pricing',
        title:'CPA Exam Cost Calculator',
        body:'Exam fees, evaluation fees, review courses, travel — total cost in INR.' },
      { slug:'cpa-salary-benchmark', icon:'bar-chart', tag:'P25 / P50 / P75',
        title:'CPA Salary Benchmark',
        body:'Compensation by experience, city and company type. India market data.' },
    ],
  },
  {
    title: 'Score yourself',
    eyebrow: 'Readiness & gaps',
    sub: 'Take an honest snapshot of where you are. Get a personalised improvement plan.',
    tools: [
      { slug:'cpa-readiness-scorecard', icon:'qr', tag:'20 questions',
        title:'CPA Readiness Scorecard',
        body:'5-dimension self-assessment. Get a score, dimension breakdown, and improvement areas.' },
      { slug:'interview-prep-assessment', icon:'users', tag:'15 questions',
        title:'Interview Readiness Assessment',
        body:'Technical + behavioural + communication self-check. Spot weak areas before the loop.' },
      { slug:'career-path-simulator', icon:'rocket', tag:'Quiz + paths',
        title:'Career Path Simulator',
        body:'Skills, interests, geography → top 3 career paths with action steps.' },
    ],
  },
  {
    title: 'Plan & execute',
    eyebrow: 'Make a plan',
    sub: 'Generators that produce a real timeline and a concrete weekly plan.',
    tools: [
      { slug:'cpa-study-plan-generator', icon:'calendar', tag:'Week-by-week',
        title:'CPA Study Plan Generator',
        body:'Pick exam, hours/week, target date — get a week-by-week plan with topics + milestones.' },
      { slug:'freelance-rate-calculator', icon:'coins', tag:'Hourly + monthly',
        title:'Freelance Rate Calculator',
        body:'Skills, experience, target income → recommended hourly rate and progression plan.' },
    ],
  },
  {
    title: 'Compute & practice',
    eyebrow: 'Workshop tools',
    sub: 'Hands-on practice on real-world finance and tax computations.',
    tools: [
      { slug:'gst-computation-tool', icon:'calculator', tag:'Practice',
        title:'GST Computation Practice',
        body:'Transaction details → ITC, net liability, GSTR-3B summary. India compliance practice.' },
      { slug:'resume-scorer', icon:'file-check', tag:'ATS check',
        title:'Resume Score Checker',
        body:'Paste resume text → ATS score, keyword analysis, completeness, improvement tips.' },
    ],
  },
  {
    title: 'For TPOs & placement cells',
    eyebrow: 'Institutional tools',
    sub: 'Diagnostic tooling for college placement teams.',
    tools: [
      { slug:'batch-readiness-report', icon:'briefcase', tag:'Cohort',
        title:'Batch Readiness Report',
        body:'Roll up student-level Skill Badge scores into a batch-level readiness dashboard.' },
    ],
  },
];

const ALL_TOOLS = TOOL_GROUPS.flatMap((g) => g.tools);

function ToolsHubPage() {
  const [query, setQuery] = React.useState('');
  const q = query.trim().toLowerCase();
  const filterFn = (t) => !q || t.title.toLowerCase().includes(q) || t.body.toLowerCase().includes(q) || t.tag.toLowerCase().includes(q);

  return (
    <>
      <PageHead
        title={`Free Tools — ${ALL_TOOLS.length} Calculators, Scorecards & Quizzes`}
        description={`${ALL_TOOLS.length} interactive tools from GCCReady — CPA ROI, eligibility, salary benchmark, readiness scorecard, study plan generator, GST/tax practice, resume score, interview readiness. Free.`}
        canonical="/tools"
        schema={[
          schemaCollection({
            name:'GCCReady Tools',
            description:`${ALL_TOOLS.length} free interactive tools for GCC career planning`,
            url:'/tools',
            items: ALL_TOOLS.map((t) => ({ name: t.title, url:`/tools-static/${t.slug}.html` })),
          }),
          schemaBreadcrumb([{label:'Home',href:'/'},{label:'Tools',href:'/tools'}]),
          schemaFAQ([
            { q:'Are GCCReady tools free?', a:'Yes. All 13 tools are free to use. No login required.' },
            { q:'How do these tools work?', a:'Each tool is interactive — you input your details, the tool computes and shows results instantly. No data leaves your browser unless you choose to share results.' },
            { q:'Which tool should I use first?', a:'If you\'re unsure about a credential, start with the Credential Selector Quiz. If you\'ve picked a credential, run the ROI Calculator. If you\'re close to interviews, try the Interview Readiness Assessment.' },
          ]),
        ]}
      />

      <HeroDark>
        <div style={{maxWidth:980}}>
          <Pill tone="dark" icon="sparkles">{ALL_TOOLS.length} free tools</Pill>
          <h1 className="gr-h1" style={{color:'#fff', marginTop:18, fontSize:62, lineHeight:1.04}}>
            Stop guessing.<br/>
            <span style={{color:'#F59E0B'}}>Calculate.</span>
          </h1>
          <p className="gr-lead" style={{color:'rgba(255,255,255,.78)', marginTop:18, maxWidth:680}}>
            Calculators, quizzes, scorecards and generators built for India's commerce, finance and AI-curious students. Each one outputs a personalised number, plan, or score — not generic advice.
          </p>
        </div>
      </HeroDark>

      <section className="gr-section" style={{padding:'40px 0 24px'}}>
        <div className="gr-container">
          <div style={{position:'relative', maxWidth:560}}>
            <div style={{position:'absolute', left:18, top:'50%', transform:'translateY(-50%)', color:'var(--gr-fg-4)', pointerEvents:'none'}}>
              <Icon name="search" size={18}/>
            </div>
            <input
              type="search"
              placeholder={`Search ${ALL_TOOLS.length} tools…`}
              value={query}
              onChange={(e)=>setQuery(e.target.value)}
              style={{
                width:'100%', padding:'14px 18px 14px 50px',
                font:'500 15px/1.4 Inter',
                border:'1.5px solid var(--gr-border)', borderRadius:14,
                background:'#fff', color:'var(--gr-fg-1)',
              }}
            />
          </div>
        </div>
      </section>

      {TOOL_GROUPS.map((group, i) => {
        const tools = group.tools.filter(filterFn);
        if (tools.length === 0 && q) return null;
        return (
          <section key={i} className="gr-section" style={{
            padding:'56px 0',
            background: i % 2 === 0 ? '#fff' : 'var(--gr-bg-cream)',
          }}>
            <div className="gr-container">
              <SectionTitle eyebrow={group.eyebrow} title={group.title} sub={group.sub}/>
              <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(300px, 1fr))', gap:18}}>
                {tools.map((t) => <ToolCard key={t.slug} tool={t}/>)}
              </div>
            </div>
          </section>
        );
      })}

      <CTABand
        title="Tools tell you what's possible. Skill Badge tells you what's next."
        sub="A 5-minute self-assessment maps your degree + target role to the right cert and role pod. Free."
        primaryLabel="Get your Skill Badge"
        primaryHref="#/skill-badge"
      />
    </>
  );
}

function ToolCard({ tool }) {
  return (
    <a href={`tools-static/${tool.slug}.html`}
       className="gr-card"
       style={{
         padding:24, textDecoration:'none', color:'var(--gr-fg-1)',
         display:'flex', flexDirection:'column', gap:12,
         transition:'all .2s ease', cursor:'pointer',
       }}
       onMouseEnter={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-gold-200)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-md)'; ev.currentTarget.style.transform='translateY(-2px)'; }}
       onMouseLeave={(ev)=>{ ev.currentTarget.style.borderColor='var(--gr-border)'; ev.currentTarget.style.boxShadow='var(--gr-shadow-xs)'; ev.currentTarget.style.transform='none'; }}
    >
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12}}>
        <div style={{
          width:46, height:46, borderRadius:13,
          background:'var(--gr-gold-50)', color:'var(--gr-gold-700)',
          display:'grid', placeItems:'center',
        }}><Icon name={tool.icon} size={20}/></div>
        <Pill tone="navy">{tool.tag}</Pill>
      </div>
      <h3 style={{
        font:'700 18px/1.3 "DM Sans"', letterSpacing:'-0.01em',
        color:'var(--gr-navy)', margin:'4px 0 0',
      }}>{tool.title}</h3>
      <p style={{
        font:'400 14px/1.55 Inter', color:'var(--gr-fg-2)', margin:0,
        display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden',
      }}>{tool.body}</p>
      <div style={{
        marginTop:'auto', font:'700 13px/1 Inter', color:'var(--gr-gold-700)',
        display:'inline-flex', alignItems:'center', gap:6, paddingTop:6,
      }}>
        Open tool <Icon name="arrow-right" size={13}/>
      </div>
    </a>
  );
}

Object.assign(window, { ToolsHubPage });