// ─────────────────────────────────────────────────────────
//  SaaS Product Showcase — BRANDSTACK (investor brief)
// ─────────────────────────────────────────────────────────

const { useState: useStateSP, useEffect: useEffectSP } = React;

function LiveDemo() {
  const [phase, setPhase] = useStateSP(0);

  useEffectSP(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 4), 3200);
    return () => clearInterval(id);
  }, []);

  const states = [
    { label: 'Input · brand assets',
      content: <>
        <div style={{display:'flex', gap:8, marginBottom:8}}>
          <div style={{width:28, height:28, borderRadius:6, background:'#D97757'}}/>
          <div style={{width:28, height:28, borderRadius:6, background:'#16140F'}}/>
          <div style={{width:28, height:28, borderRadius:6, background:'#F5F1EB', border:'1px solid #444'}}/>
        </div>
        <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--muted)', lineHeight:1.6}}>
          → logo.svg<br/>→ tone-of-voice.md<br/>→ 6 reference URLs<br/>→ brand-book.pdf
        </div>
      </>
    },
    { label: 'AI · parsing brand DNA',
      content: <>
        <div style={{display:'flex', flexDirection:'column', gap:6, marginTop:8}}>
          {[
            ['Tone', 'editorial · restrained'],
            ['Palette', 'warm + obsidian'],
            ['Motion', 'minimal, deliberate'],
            ['Type', 'serif primary · mono accent'],
          ].map(([k, v]) => (
            <div key={k} style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--mono)', fontSize:11}}>
              <span style={{color:'var(--muted)'}}>{k}</span>
              <span style={{color:'var(--accent)'}}>{v}</span>
            </div>
          ))}
        </div>
      </>
    },
    { label: 'Generate · 4 routes scaffolded',
      content: <>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, marginTop:4}}>
          {['Home','Product','Pricing','About'].map(p => (
            <div key={p} style={{
              padding:'10px', border:'1px solid var(--accent-dim)',
              borderRadius:8, background:'rgba(0,242,254,0.04)',
              fontFamily:'var(--mono)', fontSize:11, color:'var(--accent)',
            }}>
              {p} <span style={{color:'var(--ink)'}}>✓</span>
            </div>
          ))}
        </div>
      </>
    },
    { label: 'Deploy · live in 8 seconds',
      content: <>
        <div style={{
          padding:'14px 16px', background:'#00000080',
          border:'1px solid var(--accent)', borderRadius:8,
          fontFamily:'var(--mono)', fontSize:12, color:'var(--accent)',
          marginTop:4,
        }}>
          → ✓ Edge deployed<br/>
          <span style={{color:'var(--ink)'}}>→ acme.brandstack.app</span><br/>
          → Lighthouse 98 · LCP 0.4s
        </div>
      </>
    },
  ];

  const s = states[phase];
  return (
    <div className="bs-demo">
      <div className="bs-demo-head">
        <span>brandstack.app · live demo</span>
        <span style={{color:'var(--accent)'}}>● rendering</span>
      </div>
      <div className="bs-demo-stage">
        <div className="bs-demo-step">
          <div className="bs-demo-num">0{phase+1}</div>
          <div className="bs-demo-l">{s.label}</div>
        </div>
        <div className="bs-demo-content">{s.content}</div>

        {/* phase pills */}
        <div className="bs-demo-pills">
          {states.map((_, i) => (
            <div key={i} className={`pill ${i === phase ? 'active' : ''} ${i < phase ? 'done' : ''}`}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function SaasProduct() {
  return (
    <section className="section shell" data-screen-label="SaaS Product">
      <div className="bs-head">
        <div className="kicker">§Now building · In stealth</div>
        <div className="bs-title-row">
          <div>
            <div className="bs-name">
              BRAND<span style={{fontStyle:'italic', color:'var(--accent)'}}>STACK</span>
              <sup className="bs-trade">™</sup>
            </div>
            <div className="bs-tag">v0 for brands that hate looking like v0.</div>
          </div>
          <div className="bs-status">
            <span className="bs-pill">● Pre-seed · 2026</span>
            <span className="bs-pill">8 design partners</span>
            <span className="bs-pill">280 + waitlist</span>
          </div>
        </div>

        <p className="bs-lede">
          The AI design tools that raised $400M last cycle ship <em>beige output</em>.
          Premium brands won&rsquo;t use them.{' '}
          <strong>BRANDSTACK is trained on premium brand DNA</strong> — drop your logo,
          palette, voice samples, and three reference URLs. We scaffold a production
          site that actually <em>sounds like you</em>, deploy it to the edge in eight
          seconds, and wire the lead-automation graph behind it.
        </p>
      </div>

      <div className="bs-grid">
        {/* Problem / Solution / Demo */}
        <div className="bs-block bs-block-tall">
          <div className="bs-block-l">§01 · The gap</div>
          <h3>The premium tier isn&rsquo;t shipping AI sites — yet.</h3>
          <div className="bs-prob-grid">
            <div className="bs-prob">
              <div className="bs-prob-l">Today</div>
              <div className="bs-prob-v">v0 · Galileo · Bolt</div>
              <div className="bs-prob-d">Generic. Trained on the open web. Premium brands won&rsquo;t ship the output.</div>
            </div>
            <div className="bs-prob highlight">
              <div className="bs-prob-l">BRANDSTACK</div>
              <div className="bs-prob-v">Premium-trained</div>
              <div className="bs-prob-d">Trained on 47 hand-shipped premium builds. Output matches the brand, not the model.</div>
            </div>
          </div>
        </div>

        <div className="bs-block bs-block-demo">
          <div className="bs-block-l">§02 · Live demo</div>
          <LiveDemo/>
        </div>

        <div className="bs-block">
          <div className="bs-block-l">§03 · Market</div>
          <h3>$85B market. Premium tier untouched.</h3>
          <div className="bs-market">
            <div className="bs-mkt-row">
              <span className="bs-mkt-l">TAM</span>
              <div className="bs-mkt-bar"><div className="fill" style={{width:'100%'}}/></div>
              <span className="bs-mkt-v">$85B</span>
            </div>
            <div className="bs-mkt-row">
              <span className="bs-mkt-l">SAM</span>
              <div className="bs-mkt-bar"><div className="fill" style={{width:'14%'}}/></div>
              <span className="bs-mkt-v">$12B</span>
            </div>
            <div className="bs-mkt-row">
              <span className="bs-mkt-l">SOM (yr-1)</span>
              <div className="bs-mkt-bar"><div className="fill" style={{width:'1.2%'}}/></div>
              <span className="bs-mkt-v">$40M</span>
            </div>
          </div>
          <p className="bs-mkt-note">
            Top 2,000 premium D2C, real-estate, hospitality, and seed-to-Series-B SaaS
            brands globally. ACV target: $20K–$120K annual.
          </p>
        </div>

        <div className="bs-block">
          <div className="bs-block-l">§04 · Why us</div>
          <h3>Three moats. One operator.</h3>
          <ul className="bs-moats">
            <li><strong>Data flywheel.</strong> 47 hand-shipped premium builds = proprietary training corpus. Every new client deepens it.</li>
            <li><strong>Domain expertise.</strong> Founder runs JK Realtors — closed loop on the highest-LTV vertical we sell to.</li>
            <li><strong>Cost economics.</strong> India-based ops. Half the burn. Twice the velocity.</li>
          </ul>
        </div>

        <div className="bs-block bs-block-ask">
          <div className="bs-block-l">§05 · The ask</div>
          <h3>$2M seed · $12M post.</h3>
          <div className="bs-ask-grid">
            <div className="bs-ask-card">
              <div className="bs-ask-pct">40%</div>
              <div className="bs-ask-l">AI infra<br/>+ model fine-tuning</div>
            </div>
            <div className="bs-ask-card">
              <div className="bs-ask-pct">35%</div>
              <div className="bs-ask-l">3 founding<br/>engineers</div>
            </div>
            <div className="bs-ask-card">
              <div className="bs-ask-pct">15%</div>
              <div className="bs-ask-l">Design partner<br/>ramp · 40 brands</div>
            </div>
            <div className="bs-ask-card">
              <div className="bs-ask-pct">10%</div>
              <div className="bs-ask-l">GTM<br/>+ first PMM hire</div>
            </div>
          </div>

          <a href="mailto:rohit@webbrandify.com?subject=BRANDSTACK%20%C2%B7%20Investor%20brief%20request&body=Hi%20Rohit%2C%0A%0AI%27d%20like%20the%20BRANDSTACK%20investor%20brief.%0A%0AFund%3A%20%0AStage%20focus%3A%20%0ATypical%20check%20size%3A%20%0A%0AThanks." className="bs-cta magnetic-trigger">
            <span>
              <span className="bs-cta-l">For investors</span>
              <span className="bs-cta-h">Request the deck →</span>
            </span>
            <span className="bs-cta-arr">↗</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.SaasProduct = SaasProduct;