.elementor-87 .elementor-element.elementor-element-0064c36{--display:flex;}/* Start custom CSS */<?php
/**
 * Plugin Name: NicheFinderHub – Homepage Niche Tool
 * Description: Adds a shortcode [niche_finder] that renders a hero, search bar, and a results box with demand & competition estimates.
 * Version: 1.0.0
 * Author: NicheFinderHub
 */

if (!defined('ABSPATH')) exit;

class NFH_NicheTool {
  public function __construct() {
    add_shortcode('niche_finder', [$this, 'render']);
    add_action('wp_enqueue_scripts', [$this, 'assets']);
  }

  public function assets() {
    // Minimal CSS
    $css = "
    .nfh-wrap{max-width:940px;margin:0 auto;padding:32px 20px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
    .nfh-hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 8px;color:#0f172a}
    .nfh-hero p{font-size:clamp(14px,2.2vw,18px);color:#475569;margin:0 0 22px}
    .nfh-search{display:flex;gap:10px;align-items:center;margin:14px 0 28px}
    .nfh-input{flex:1;padding:14px 16px;border:1px solid #cbd5e1;border-radius:10px;font-size:16px}
    .nfh-btn{padding:14px 18px;border:0;background:#2563eb;color:#fff;border-radius:10px;font-weight:600;cursor:pointer}
    .nfh-btn:hover{background:#1d4ed8}
    .nfh-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(2,6,23,.06)}
    .nfh-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    @media(max-width:820px){.nfh-row{grid-template-columns:1fr}}
    .nfh-meter{height:12px;background:#f1f5f9;border-radius:999px;overflow:hidden;margin:8px 0 6px}
    .nfh-bar{height:100%;width:0;background:#22c55e;transition:width .5s ease}
    .nfh-pill{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#0f172a;background:#e2e8f0}
    .nfh-list{margin:8px 0 0;padding-left:18px}
    .nfh-muted{color:#64748b}
    .nfh-badge{font-size:12px;padding:4px 8px;border-radius:8px;background:#eef2ff;color:#3730a3;font-weight:700}
    .nfh-hr{height:1px;background:#e2e8f0;margin:18px 0}
    ";
    wp_register_style('nfh-style', false);
    wp_enqueue_style('nfh-style');
    wp_add_inline_style('nfh-style', $css);

    // Minimal JS
    $js = "
    (function(){
      const avgCpcMap = {
        'ai':2.8,'crypto':3.5,'finance':3.2,'trading':3.1,'fitness':1.7,'keto':1.8,'pet':1.2,'garden':1.0,'beauty':1.6,'makeup':1.7,
        'blog':0.9,'youtube':1.1,'tiktok':1.2,'print on demand':1.4,'dropshipping':2.2,'eco':1.2,'sustain':1.3,'travel':1.5,'recipe':0.8
      };

      function estimateDemand(q){
        // Super simple heuristic: more general = higher demand; long-tail gets moderate demand
        const words = q.trim().split(/s+/).length;
        let base = 30 + Math.min(40, q.length); // 30–70
        if(words>=4) base -= 10;
        if(/2025|guide|best|how to|top|ideas|for/.test(q.toLowerCase())) base += 8;
        return Math.max(15, Math.min(95, Math.round(base)));
      }

      function estimateCompetition(q){
        const lq = q.toLowerCase();
        let score = 35; // base
        // Bump scores for notoriously competitive themes
        Object.keys(avgCpcMap).forEach(k=>{
          if(lq.includes(k)) score += Math.min(25, Math.round(avgCpcMap[k]*4));
        });
        // Modifiers that lower competition
        if(/fors+(students|beginners|moms|seniors|freelancers|pets)/.test(lq)) score -= 8;
        if(/near me|ins+2025|under|without|free|no/.test(lq)) score -= 5;
        // Long-tail reduces competition
        if(q.trim().split(/s+/).length >= 4) score -= 10;
        return Math.max(5, Math.min(95, score));
      }

      function label(comp){
        if(comp<35) return {txt:'LOW', color:'#22c55e'};
        if(comp<65) return {txt:'MEDIUM', color:'#f59e0b'};
        return {txt:'HIGH', color:'#ef4444'};
      }

      function longTails(q){
        const base = q.toLowerCase().replace(/s+/g,' ').trim();
        const parts = [
          `best ${base} ideas 2025`,
          `${base} for beginners`,
          `${base} without investment`,
          `${base} in usa 2025`,
          `${base} step by step guide`,
          `${base} for students`
        ];
        return [...new Set(parts)];
      }

      function competitorLinks(q){
        const enc = encodeURIComponent(q);
        return [
          {name:'Google SERP', url:`https://www.google.com/search?q=${enc}`},
          {name:'Reddit threads', url:`https://www.google.com/search?q=${enc}+site%3Areddit.com`},
          {name:'Quora questions', url:`https://www.google.com/search?q=${enc}+site%3Aquora.com`},
          {name:'YouTube results', url:`https://www.youtube.com/results?search_query=${enc}`}
        ];
      }

      function analyze(q){
        const demand = estimateDemand(q);
        const comp = estimateCompetition(q);
        const c = label(comp);
        const ideas = longTails(q);
        const links = competitorLinks(q);
        return {demand, comp, c, ideas, links};
      }

      document.addEventListener('click', function(e){
        if(e.target && e.target.matches('.nfh-run')){
          const input = e.target.closest('.nfh-search').querySelector('.nfh-input');
          const q = (input.value || '').trim();
          if(!q){ alert('Type a niche to analyze.'); return; }
          const r = analyze(q);

          const demandMeter = document.querySelector('.nfh-bar-demand');
          const compMeter = document.querySelector('.nfh-bar-comp');
          const compLabel = document.querySelector('.nfh-comp-label');
          const compBadge = document.querySelector('.nfh-comp-badge');
          const ideasList = document.querySelector('.nfh-ideas');
          const linksList = document.querySelector('.nfh-links');
          const queryEcho = document.querySelector('.nfh-query');

          demandMeter.style.width = r.demand + '%';
          compMeter.style.width = r.comp + '%';
          compMeter.style.background = r.c.color;
          compLabel.textContent = r.c.txt + ' COMPETITION';
          compBadge.textContent = r.comp + '/100';
          compBadge.style.background = r.c.color + '22';
          compBadge.style.color = r.c.color;
          queryEcho.textContent = q;

          ideasList.innerHTML = r.ideas.map(i=>`<li>${i}</li>`).join('');
          linksList.innerHTML = r.links.map(i=>`<li><a target='_blank' rel='noopener' href='${i.url}'>${i.name}</a></li>`).join('');

          document.querySelector('.nfh-results').style.display='block';
          document.querySelector('.nfh-hr').style.display='block';
        }
      });
    })();
    ";
    wp_register_script('nfh-js', false, [], null, true);
    wp_enqueue_script('nfh-js');
    wp_add_inline_script('nfh-js', $js);
  }

  public function render($atts=[], $content='') {
    ob_start(); ?>
      <section class="nfh-wrap">
        <div class="nfh-hero">
          <h1>Find Your Perfect Niche in Seconds</h1>
          <p>Type any idea and get a quick, data-inspired estimate of demand, a competition score, long-tail ideas, and competitor hints.</p>
        </div>

        <div class="nfh-search">
          <input class="nfh-input" type="text" placeholder="e.g., AI tools for students, keto meal prep blog, pet supplements" />
          <button class="nfh-btn nfh-run">Analyze</button>
        </div>

        <div class="nfh-hr" style="display:none"></div>

        <div class="nfh-card nfh-results" style="display:none">
          <div class="nfh-muted" style="margin-bottom:8px">You searched: <strong class="nfh-query"></strong></div>

          <div class="nfh-row">
            <div>
              <div class="nfh-badge">Demand Estimate</div>
              <div class="nfh-meter"><div class="nfh-bar nfh-bar-demand" style="width:0%"></div></div>
              <div class="nfh-muted">Rising interest signals more potential traffic.</div>
            </div>
            <div>
              <div class="nfh-badge">Competition Score <span class="nfh-comp-badge nfh-pill" style="margin-left:8px">0/100</span></div>
              <div class="nfh-meter"><div class="nfh-bar nfh-bar-comp" style="width:0%"></div></div>
              <div class="nfh-comp-label nfh-pill" style="margin-top:4px">COMPETITION</div>
            </div>
          </div>

          <div class="nfh-hr"></div>

          <div class="nfh-row">
            <div>
              <div class="nfh-badge">Long-Tail Opportunities</div>
              <ul class="nfh-list nfh-ideas"></ul>
            </div>
            <div>
              <div class="nfh-badge">Check Competitors (Open)</div>
              <ul class="nfh-list nfh-links"></ul>
            </div>
          </div>

          <div class="nfh-hr"></div>

          <div>
            <div class="nfh-badge">What to Do Next</div>
            <ul class="nfh-list">
              <li>Create an article targeting one long-tail idea above.</li>
              <li>Compare the first page results you opened and find content gaps.</li>
              <li>Add FAQs and internal links; publish, then request indexing in Search Console.</li>
            </ul>
          </div>
        </div>
      </section>
    <?php
    return ob_get_clean();
  }
}
new NFH_NicheTool();/* End custom CSS */