// Founder Story + FAQ + Final CTA + Footer

const Founder = () => {
  return (
    <section id="founder" style={{background:'var(--bone)', padding:'140px 0 120px', borderTop:'1px solid var(--rule)'}}>
      <div className="wrap">
        <span className="eyebrow-dot">Operator's story</span>

        <div className="founder-grid" style={{display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 72, marginTop: 40, alignItems:'start'}}>
          {/* Sticky portrait column */}
          <div style={{position:'sticky', top: 90}}>
            <div style={{
              aspectRatio: '4/5',
              overflow: 'hidden',
              background: 'var(--ink)',
              border: '1px solid var(--rule)',
              position:'relative'
            }}>
              <img src="assets/travis.png" alt="Travis Ross" style={{width:'100%', height:'100%', objectFit:'cover', filter:'contrast(1.05) saturate(0.92)'}}/>
              <div style={{
                position:'absolute', left: 16, bottom: 16, right: 16,
                color:'var(--paper)', display:'flex', justifyContent:'space-between', alignItems:'flex-end'
              }}>
                <div>
                  <div className="mono" style={{fontSize: 10, letterSpacing:'0.14em', opacity: 0.7}}>OPERATOR · FOUNDER</div>
                  <div style={{fontFamily:'var(--serif)', fontSize: 24, marginTop: 2}}>Travis Ross</div>
                </div>
                <AstroMark glyph="♏" label="Scorpio · Virgo · Libra" style={{color:'var(--paper)', opacity:0.65}} />
              </div>
            </div>
            <div style={{marginTop:18, display:'flex', justifyContent:'space-between'}}>
              <span className="sig">travis@conceptoutbound.com</span>
              <span className="sig">7 yrs writing outbound</span>
            </div>
          </div>

          {/* Long-form prose */}
          <div>
            <h2 className="display" style={{
              fontSize:'clamp(40px, 4.8vw, 76px)',
              margin:'0 0 40px',
              letterSpacing:'-0.025em',
              maxWidth: 900,
              fontWeight: 400
            }}>
              The ones that worked <em>weren't</em><br/>
              better written.
            </h2>

            <div style={{fontFamily:'var(--serif)', fontSize: 22, lineHeight: 1.45, letterSpacing:'-0.005em', color:'var(--ink)'}}>
              <p style={{margin:'0 0 24px'}}>
                I spent two years writing outbound before I built the thing that writes outbound. Best outcome of that stretch: <em>messaging I wrote contributed to a $2M close</em>. Worst outcome: entire campaigns where the copy was fine and the results were zero.
              </p>
              <p style={{margin:'0 0 24px'}}>
                The emails that worked weren't better written than the ones that didn't. They landed in inboxes where something had just changed. A hire. A funding round. A product launch. The account was already asking the question the email answered.
              </p>

              <div style={{
                margin:'36px 0', padding:'24px 28px',
                borderLeft:'2px solid var(--accent)',
                fontFamily:'var(--sans)', fontSize: 17, lineHeight: 1.55,
                color:'var(--ink)'
              }}>
                That's the whole mechanism behind every product on this page.
                <ul style={{margin:'14px 0 0', padding:0, listStyle:'none', fontFamily:'var(--mono)', fontSize: 13}}>
                  <li style={{padding:'4px 0', display:'grid', gridTemplateColumns:'160px 1fr', gap: 12}}><span style={{color:'var(--accent-deep)'}}>Market Watch</span><span>watches for the change across your TAM.</span></li>
                  <li style={{padding:'4px 0', display:'grid', gridTemplateColumns:'160px 1fr', gap: 12}}><span style={{color:'var(--accent-deep)'}}>Signal River</span><span>is the in-house engine behind it.</span></li>
                  <li style={{padding:'4px 0', display:'grid', gridTemplateColumns:'160px 1fr', gap: 12}}><span style={{color:'var(--accent-deep)'}}>Contact Forge</span><span>finds who to talk to.</span></li>
                  <li style={{padding:'4px 0', display:'grid', gridTemplateColumns:'160px 1fr', gap: 12}}><span style={{color:'var(--accent-deep)'}}>Message Mill</span><span>writes only what the signal will support.</span></li>
                  <li style={{padding:'4px 0', display:'grid', gridTemplateColumns:'160px 1fr', gap: 12}}><span style={{color:'var(--accent-deep)'}}>Pipe Gun</span><span>runs the sequence.</span></li>
                </ul>
              </div>

              <p style={{margin:'0 0 24px'}}>
                I dogfooded it for months, then shipped the first client live test on April 12. <span className="mono" style={{fontSize:15, color:'var(--accent-deep)'}}>8 companies · 14 signals · 40 emails · zero fabricated claims.</span>
              </p>
              <p style={{margin:'0 0 40px'}}>
                I built this for the work I was already doing. If that's your work too, the FAQ below probably covers your next question.
              </p>
            </div>

            <div style={{display:'flex', gap: 4, alignItems:'center', borderTop:'1px solid var(--rule)', paddingTop: 20}}>
              <a href="#cta" style={{
                display:'inline-flex', alignItems:'center', gap: 10,
                fontFamily:'var(--mono)', fontSize: 12, letterSpacing:'0.1em',
                textTransform:'uppercase', color:'var(--ink)',
                padding:'14px 0 14px 0'
              }}>
                Read the full story <span>→</span>
              </a>
              <span style={{color:'var(--mute)', margin:'0 20px'}}>·</span>
              <a href="#cta" style={{
                display:'inline-flex', alignItems:'center', gap: 10,
                fontFamily:'var(--mono)', fontSize: 12, letterSpacing:'0.1em',
                textTransform:'uppercase', color:'var(--accent-deep)',
                padding:'14px 0'
              }}>
                Book a call <span>↗</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- FAQ ----------
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: "We already use Clay and Apollo. Where does this fit?",
      a: "Clay and Apollo do a hundred things. We replace one: the signal-to-contact-to-email workflow most teams stitch across four tools. Market Watch, Contact Forge, Message Mill run the loop. Your sending tool (Smartlead, Instantly) handles delivery." },
    { q: "How is this different from AI-written cold email everyone's running now?",
      a: "Most AI email is a template with a name token. Message Mill writes from the signal out, and the claim-trace gate kills any factual claim that doesn't map to a source field. In our April 12 live test: 40 emails, 19 unique factual claims, zero fabricated." },
    { q: "We tried outbound. Burned through lists and budget. Why is this different?",
      a: "Most outbound fails because it's signal-first on cold lists. The list is the problem, not the copy. TAM-first inverts that: the watchlist is pre-qualified, so when a signal fires, it's buying intent. In our April 12 live test: 8 companies watched, 14 signals, 5 flagged as actionable." },
    { q: "Why pay you when we could hire an SDR or build this internally?",
      a: "A junior SDR runs $5–7k fully loaded with a 90-day ramp. An outbound agency runs $3–8k for manual list work. Our pilot tier is $1,500–2,000 and the stack already exists. The honest tradeoff: internal build works, and it takes months before the first campaign runs." },
    { q: "How do I know your signals are real and not stale scrape data?",
      a: "Every signal links to its source. Hiring pulls from PredictLeads job data, news from Exa's live index. A freshness filter drops anything older than 90 days. It caught one public fintech's re-indexed launch as April when the actual event was May 2025." },
  ];
  return (
    <section id="faq" className="paper" style={{padding:'120px 0', borderTop:'1px solid var(--rule)'}}>
      <div className="wrap">
        <div className="faq-grid" style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 80, alignItems:'start'}}>
          <div style={{position:'sticky', top: 110}}>
            <span className="eyebrow-dot">FAQ</span>
            <h2 className="display" style={{fontSize:'clamp(40px, 4.4vw, 72px)', margin:'16px 0 20px', letterSpacing:'-0.025em', lineHeight: 0.98}}>
              Questions<br/>we get.
            </h2>
            <p style={{margin:0, fontSize:15, color:'var(--mute)', maxWidth: 320}}>
              Five of the questions that actually get asked on first calls.
            </p>
          </div>
          <div style={{borderTop:'1px solid var(--rule)'}}>
            {qs.map((x, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{borderBottom:'1px solid var(--rule)'}}>
                  <button onClick={()=>setOpen(isOpen ? -1 : i)} style={{
                    display:'grid', gridTemplateColumns:'56px 1fr 28px', gap: 20,
                    padding:'28px 0', width:'100%', textAlign:'left', alignItems:'baseline'
                  }}>
                    <span className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--mute)'}}>Q/{String(i+1).padStart(2,'0')}</span>
                    <span style={{fontFamily:'var(--serif)', fontSize:'clamp(22px, 2vw, 28px)', lineHeight:1.25, letterSpacing:'-0.015em'}}>{x.q}</span>
                    <span style={{fontFamily:'var(--mono)', fontSize:18, color:'var(--accent-deep)', textAlign:'right'}}>{isOpen ? '−' : '+'}</span>
                  </button>
                  <div style={{
                    overflow:'hidden',
                    maxHeight: isOpen ? 400 : 0,
                    transition:'max-height 300ms ease'
                  }}>
                    <div style={{display:'grid', gridTemplateColumns:'56px 1fr 28px', gap: 20, paddingBottom: 30}}>
                      <span></span>
                      <p style={{margin:0, fontSize:16, lineHeight:1.6, color:'var(--ink)', maxWidth: 620}}>{x.a}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Final CTA (terminal prompt) ----------
const FinalCTA = () => {
  const [line, setLine] = React.useState('');
  const full = 'If the diagnosis fits, the next step is a pipeline eval.';
  React.useEffect(()=>{
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      setLine(full); return;
    }
    let i = 0;
    const t = setInterval(()=>{
      i++;
      setLine(full.slice(0, i));
      if (i >= full.length) clearInterval(t);
    }, 28);
    return () => clearInterval(t);
  }, []);

  return (
    <section id="cta" className="ink" style={{padding:'140px 0 100px', borderTop:'1px solid var(--rule-light)'}}>
      <div className="wrap">
        <div className="mono" style={{fontSize:11, letterSpacing:'0.14em', color:'var(--mute-on-ink)', marginBottom: 24, display:'flex', justifyContent:'space-between'}}>
          <span className="eyebrow-dot on-ink">Next step</span>
          <span>co / prompt</span>
        </div>

        {/* Terminal block */}
        <div style={{
          borderTop:'1px solid var(--rule-light)',
          borderBottom:'1px solid var(--rule-light)',
          padding:'56px 0 48px'
        }}>
          <div style={{display:'flex', alignItems:'flex-start', gap: 20, maxWidth: 1100}}>
            <span className="teal-dot" style={{width:12, height:12, marginTop: 22}}></span>
            <div style={{flex:1}}>
              <p className="display" style={{
                fontSize:'clamp(40px, 5.6vw, 96px)',
                margin: 0, letterSpacing:'-0.03em', color:'var(--paper)', textWrap:'balance'
              }}>
                {line.split('If the diagnosis fits, ')[0]}
                {line.includes('If the diagnosis fits, ') && (
                  <>
                    If the diagnosis fits,{' '}
                    <em style={{color:'var(--accent)'}}>{line.slice('If the diagnosis fits, '.length)}</em>
                  </>
                )}
                <span className="blink mono" style={{color:'var(--accent)', fontSize:'0.6em'}}>▊</span>
              </p>
            </div>
          </div>
        </div>

        {/* CTA row */}
        <div className="finalcta-grid" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap: 40, marginTop: 56}}>
          <div>
            <span className="mono" style={{fontSize: 10, letterSpacing:'0.14em', color:'var(--mute-on-ink)', textTransform:'uppercase'}}>PRIMARY</span>
            <a href="mailto:travis@conceptoutbound.com" style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              marginTop: 10, padding: '22px 24px',
              background:'var(--accent)', color:'var(--ink)',
              fontFamily:'var(--mono)', fontSize: 14, letterSpacing:'0.08em',
              textTransform:'uppercase', fontWeight: 500
            }}>
              <span>Book a pipeline eval · from $1,500</span>
              <span>↗</span>
            </a>
          </div>
          <div>
            <span className="mono" style={{fontSize: 10, letterSpacing:'0.14em', color:'var(--mute-on-ink)', textTransform:'uppercase'}}>SECONDARY</span>
            <a href="#mechanism" style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              marginTop: 10, padding: '22px 24px',
              border:'1px solid var(--rule-light)', color:'var(--paper)',
              fontFamily:'var(--mono)', fontSize: 14, letterSpacing:'0.08em',
              textTransform:'uppercase'
            }}>
              <span>See a live test</span>
              <span>→</span>
            </a>
          </div>
          <div>
            <span className="mono" style={{fontSize: 10, letterSpacing:'0.14em', color:'var(--mute-on-ink)', textTransform:'uppercase'}}>FALLBACK</span>
            <a href="mailto:travis@conceptoutbound.com" style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              marginTop: 10, padding: '22px 0',
              color:'var(--paper)',
              fontFamily:'var(--mono)', fontSize: 14, letterSpacing:'0.04em'
            }}>
              <span>travis@conceptoutbound.com</span>
              <span>✉</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="ink" style={{padding:'60px 0 50px', borderTop:'1px solid var(--rule-light)'}}>
    <div className="wrap">
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap: 40, marginBottom: 48}}>
        <div>
          <a href="#top" style={{display:'flex', alignItems:'center', gap:10, fontFamily:'var(--serif)', fontWeight:500, fontSize:22, color:'var(--paper)'}}>
            <LogoMark size={24} />
            Concept Outbound
          </a>
          <p style={{marginTop: 18, maxWidth: 360, fontSize:14, lineHeight:1.6, color:'var(--mute-on-ink)'}}>
            TAM-first outbound pipeline. Built and operated by Travis Ross. Based in the work, not the brochure.
          </p>
        </div>
        <FooterCol title="Products" items={['Market Watch','Contact Forge','Message Mill','Signal River','Pipe Gun']} />
        <FooterCol title="Engagements" items={['Pipeline-first pilot','TAM audit','90-day reset']} />
        <FooterCol title="Contact" items={['travis@conceptoutbound.com','LinkedIn','Book a call']} />
      </div>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', borderTop:'1px solid var(--rule-light)', paddingTop: 24, flexWrap:'wrap', gap: 12}}>
        <span className="sig" style={{color:'var(--mute-on-ink)'}}>© 2026 Concept Outbound · conceptoutbound.com</span>
        <span className="sig" style={{color:'var(--mute-on-ink)'}}>Built and operated by Travis Ross</span>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, items }) => (
  <div>
    <span className="mono" style={{fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--mute-on-ink)'}}>{title}</span>
    <ul style={{listStyle:'none', margin:'14px 0 0', padding:0, display:'flex', flexDirection:'column', gap: 8}}>
      {items.map(i => <li key={i}><a href="#" style={{fontSize:14, color:'var(--paper)', opacity: 0.85}}>{i}</a></li>)}
    </ul>
  </div>
);

Object.assign(window, { Founder, FAQ, FinalCTA, Footer });
