// BrandRocket homepage — middle sections (creative showcase, goals, innovation, growth grid)
const { useState: useState2 } = React;

/* ==================== CREATIVE SHOWCASE ==================== */
function CreativeShowcase() {
  const cards = [
    { tag:'PRODUCT SPOT', title:'Your product, sold in 30 seconds', bg:'linear-gradient(135deg,#0F6F86,#34B2CC)' },
    { tag:'SERVICE SPOT', title:'Your service, scroll-stopping', bg:'linear-gradient(135deg,#2D7F6E,#1F8A5B)' },
    { tag:'COMING SOON',  title:'Real client commercials — landing soon', bg:'linear-gradient(135deg,#3B6EA5,#4C5A8F)' },
  ];
  return (
    <section className="section creative-section">
      <div className="container">
        <div className="sec-head">
          <h2>Commercials That <span className="mark">Sell</span> —<br/>Not Commercials That Win Awards</h2>
          <p>Pretty ads are easy. Ads that move product are the job. We make the second kind — AI-produced video commercials for your products and services, built to convert.</p>
        </div>
        <div className="creative-row">
          {cards.map((c,i) => (
            <div className="c-card" key={i} style={{background: c.bg}}>
              <div className="c-tag">{c.tag}</div>
              <div className="c-title">{c.title}</div>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'center', marginTop: 28, gap:10, alignItems:'center'}}>
          <span className="handwriting" style={{fontSize:20}}>← real client spots, coming soon</span>
        </div>
      </div>
    </section>
  );
}

/* ==================== GOAL TRACKING ==================== */
function GoalTracking() {
  const data = [
    {label:'Q1', actual: 92, goal: 80},
    {label:'Q2', actual: 110, goal: 95},
    {label:'Q3', actual: 138, goal: 115},
    {label:'Q4', actual: 165, goal: 140},
    {label:'Q1', actual: 198, goal: 165},
    {label:'Q2', actual: 232, goal: 195},
  ];
  const max = 250;
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head">
          <h2>"Trust Us" Isn't a Strategy.<br/><span className="mark">This Chart Is.</span></h2>
          <p>We'd rather show you the numbers than promise you the moon. Goals set, goals beaten — on the record.</p>
        </div>
        <div className="goals-grid">
          <div className="chart-card">
            <div className="legend">
              <span><span className="legend-dot" style={{background:'var(--br-blue)'}}></span>Actual revenue (%)</span>
              <span><span className="legend-dot" style={{background:'var(--br-cta)'}}></span>Client goal (%)</span>
            </div>
            <div className="bar-row">
              {data.map((d, i) => (
                <div className="bar-grp" key={i}>
                  <div className="bar actual" style={{height: `${(d.actual/max)*100}%`}}></div>
                  <div className="bar goal" style={{height: `${(d.goal/max)*100}%`}}></div>
                </div>
              ))}
            </div>
            <div className="x-axis">
              {data.map((d,i) => <span key={i}>{d.label}</span>)}
            </div>
            <div style={{position:'absolute', top: -22, right: 24}} className="handwriting">88% of clients beat goal ↓</div>
            <img src="/assets/mascot-clipboard.png" alt="" className="goals-mascot" />
          </div>
          <div className="goals-blocks">
            <div className="goals-block">
              <h4>Down-to-the-day reporting</h4>
              <p>Live dashboards show exactly where every dollar of ad spend is going — and what it's bringing back. No monthly-recap theatrics.</p>
            </div>
            <div className="goals-block">
              <h4>ROI-first prioritization</h4>
              <p>Every test, every channel, every ad is ranked by expected revenue gain. We work the highest-impact lever first, every time.</p>
            </div>
            <div className="goals-block">
              <h4>Quarterly goal recalibration</h4>
              <p>As you grow, your targets should too. We renegotiate goals every 90 days so the bar keeps moving in your favor.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==================== INNOVATION / PODCAST ==================== */
function Innovation() {
  return (
    <section className="section innov-section">
      <div className="container">
        <div className="sec-head">
          <h2>We Wrote the Book on<br/><span className="mark">Performance Marketing Innovation</span></h2>
          <p>Plus a weekly podcast, a 600-page playbook, and a YouTube channel watched by 80,000 marketers.</p>
        </div>
        <div className="innov-grid">
          <div className="podcast-card">
            <div className="podcast-cover">
              <div className="pc-title">The B2B Marketing Show</div>
              <div className="pc-mic"></div>
            </div>
            <h3 style={{color:'#fff'}}>Now Streaming Episode 142</h3>
            <p style={{color:'rgba(255,255,255,.9)', marginTop:8}}>How 7-figure brands rebuild their funnel after iOS privacy changes.</p>
            <div className="platform-pills">
              <span className="pill">🎧 Apple Podcasts</span>
              <span className="pill">🟢 Spotify</span>
              <span className="pill">▶ YouTube</span>
            </div>
          </div>
          <div>
            <div style={{display:'grid', gap:14}}>
              <div style={{padding:'18px 22px', background:'#fff', borderRadius:12, boxShadow:'var(--shadow-sm)', borderLeft:'4px solid var(--br-blue)'}}>
                <strong>Episode 142:</strong> Privacy-first attribution that actually works
              </div>
              <div style={{padding:'18px 22px', background:'#fff', borderRadius:12, boxShadow:'var(--shadow-sm)', borderLeft:'4px solid var(--br-cta)'}}>
                <strong>Episode 141:</strong> Why your CAC is lying to you (and how to fix it)
              </div>
              <div style={{padding:'18px 22px', background:'#fff', borderRadius:12, boxShadow:'var(--shadow-sm)', borderLeft:'4px solid var(--br-teal)'}}>
                <strong>Episode 140:</strong> Lifetime value math for founders, in 22 minutes
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==================== GROWTH GRID (interactive table) ==================== */
function GrowthGrid() {
  const tabs = ['Profit', 'Revenue', 'SQL Volume', 'MQL Volume', 'Lead Volume', 'ROAS'];
  const [active, setActive] = useState2(0);
  const dataMap = {
    Profit: [
      {p:'#1', what:'Reallocate 22% of Meta spend → Google Search', gain:'+$58,000/mo', spend:'$17,400', cost:'$0.30 / $1', speed:'14 days'},
      {p:'#2', what:'Add SKAGs for top 12 commercial-intent keywords', gain:'+$31,000/mo', spend:'$11,800', cost:'$0.38 / $1', speed:'21 days'},
      {p:'#3', what:'Rebuild bottom-of-funnel landing page',          gain:'+$24,000/mo', spend:'$10,100', cost:'$0.42 / $1', speed:'30 days'},
      {p:'#4', what:'Layer in YouTube remarketing for cart abandoners', gain:'+$18,500/mo', spend:'$8,900', cost:'$0.48 / $1', speed:'18 days'},
      {p:'#5', what:'Tighten geo-targeting to your top 6 metros',     gain:'+$12,000/mo', spend:'$6,200', cost:'$0.52 / $1', speed:'7 days'},
    ],
    Revenue: [
      {p:'#1', what:'Launch Performance Max across Shopping inventory', gain:'+$92,000/mo', spend:'$16,600', cost:'$0.18 / $1', speed:'30 days'},
      {p:'#2', what:'Test 3 new hook angles in top Meta ad sets',     gain:'+$44,000/mo', spend:'$9,700', cost:'$0.22 / $1', speed:'21 days'},
      {p:'#3', what:'Add LinkedIn for your high-ACV verticals',       gain:'+$36,000/mo', spend:'$9,400', cost:'$0.26 / $1', speed:'45 days'},
      {p:'#4', what:'Expand winning campaigns into 4 lookalikes',     gain:'+$28,000/mo', spend:'$8,400', cost:'$0.30 / $1', speed:'21 days'},
      {p:'#5', what:'Optimize the Google Shopping product feed',      gain:'+$22,000/mo', spend:'$7,500', cost:'$0.34 / $1', speed:'18 days'},
    ],
    'SQL Volume': [
      {p:'#1', what:'Feed offline conversions back into Google Ads',  gain:'+140 SQL/mo', spend:'$13,300', cost:'$95 / SQL', speed:'14 days'},
      {p:'#2', what:'Route hot leads to an instant-booking calendar', gain:'+120 SQL/mo', spend:'$14,400', cost:'$120 / SQL', speed:'21 days'},
      {p:'#3', what:'Tighten lead-qual form (5 → 8 fields)',          gain:'+100 SQL/mo', spend:'$14,000', cost:'$140 / SQL', speed:'7 days'},
      {p:'#4', what:'Add lead-scoring to auto-route best prospects',  gain:'+85 SQL/mo',  spend:'$13,600', cost:'$160 / SQL', speed:'21 days'},
      {p:'#5', what:'Add negative keywords to kill junk clicks',      gain:'+70 SQL/mo',  spend:'$12,600', cost:'$180 / SQL', speed:'10 days'},
    ],
    'MQL Volume': [
      {p:'#1', what:'Add a gated whitepaper to mid-funnel campaigns', gain:'+340 MQL/mo', spend:'$17,000', cost:'$50 / MQL', speed:'21 days'},
      {p:'#2', what:'Launch a lead-gen form campaign on LinkedIn',    gain:'+260 MQL/mo', spend:'$15,600', cost:'$60 / MQL', speed:'30 days'},
      {p:'#3', what:'Retarget blog & video viewers with a soft offer',gain:'+220 MQL/mo', spend:'$15,400', cost:'$70 / MQL', speed:'14 days'},
      {p:'#4', what:'Launch a webinar registration campaign',         gain:'+180 MQL/mo', spend:'$14,400', cost:'$80 / MQL', speed:'30 days'},
      {p:'#5', what:'Add exit-intent capture on key landing pages',   gain:'+150 MQL/mo', spend:'$14,250', cost:'$95 / MQL', speed:'10 days'},
    ],
    'Lead Volume': [
      {p:'#1', what:'Open broad-match with smart bidding',            gain:'+500 leads/mo', spend:'$15,000', cost:'$30 / lead', speed:'14 days'},
      {p:'#2', what:'Launch Meta instant-form lead ads',             gain:'+420 leads/mo', spend:'$14,700', cost:'$35 / lead', speed:'21 days'},
      {p:'#3', what:'Add a free-tool / quiz lead magnet',            gain:'+360 leads/mo', spend:'$14,400', cost:'$40 / lead', speed:'30 days'},
      {p:'#4', what:'Expand into 3 new high-volume keyword themes',   gain:'+300 leads/mo', spend:'$13,500', cost:'$45 / lead', speed:'18 days'},
      {p:'#5', what:'Add a click-to-call campaign for mobile',        gain:'+260 leads/mo', spend:'$13,000', cost:'$50 / lead', speed:'7 days'},
    ],
    ROAS: [
      {p:'#1', what:'Cut bottom-decile audiences from Meta',          gain:'+0.8x ROAS',  spend:'$0',     cost:'—', speed:'7 days'},
      {p:'#2', what:'Add product-level bid adjustments in Shopping',  gain:'+0.7x ROAS',  spend:'$1,500', cost:'—', speed:'21 days'},
      {p:'#3', what:'Sequence creative by stage of awareness',        gain:'+0.6x ROAS',  spend:'$3,200', cost:'—', speed:'30 days'},
      {p:'#4', what:'Exclude past converters from prospecting',       gain:'+0.5x ROAS',  spend:'$0',     cost:'—', speed:'7 days'},
      {p:'#5', what:'Shift budget to your top-ROAS dayparts',         gain:'+0.4x ROAS',  spend:'$0',     cost:'—', speed:'10 days'},
    ],
  };
  const rows = dataMap[tabs[active]] || [];
  return (
    <section className="section">
      <div className="container">
        <div className="sec-head" style={{position:'relative'}}>
          <h2>We Don't Do <span className="mark">Random Acts of Marketing</span></h2>
          <p>Every move ranked by what it'll actually make you — biggest wins first, cheap wins flagged, slow burns last. Pick a goal and see how we'd line it up.</p>
        </div>
        <div className="tabs">
          {tabs.map((t,i) => (
            <button key={i} className={`tab ${i===active?'active':''}`} onClick={() => setActive(i)}>{t}</button>
          ))}
        </div>
        <div className="grow-scroll">
        <table className="grow-table">
          <thead>
            <tr>
              <th>Priority</th>
              <th>Lever</th>
              <th>Projected Lift</th>
              <th>Monthly Spend</th>
              <th>Cost / Result</th>
              <th>Speed</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r,i) => (
              <tr key={i}>
                <td>{r.p}</td>
                <td>{r.what}</td>
                <td className="gain">{r.gain}</td>
                <td>{r.spend}</td>
                <td>{r.cost}</td>
                <td>{r.speed}</td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      </div>
    </section>
  );
}

window.CreativeShowcase = CreativeShowcase;
window.GoalTracking = GoalTracking;
window.Innovation = Innovation;
window.GrowthGrid = GrowthGrid;