// Section 5, 8, and other composable pieces

function StoryCards() {
  return (
    <div className="stories">
      <article className="story">
        <div className="story__preview"><StoryRentalPreview/></div>
        <div className="story__body">
          <div className="eyebrow" style={{marginBottom:12}}>Landlord</div>
          <h3 className="story__quote">"I own a rental in Sintra."</h3>
          <p className="story__cap">Four units, two cities. Rent posts to Fortec the day it clears your bank. Late rent surfaces at the top of the dashboard, with one-tap reminders in Portuguese or English.</p>
        </div>
      </article>
      <article className="story">
        <div className="story__preview"><StoryTradePreview/></div>
        <div className="story__body">
          <div className="eyebrow" style={{marginBottom:12}}>Active trader</div>
          <h3 className="story__quote">"I trade with Alpaca and IBKR."</h3>
          <p className="story__cap">One order ticket, smart-routed across your connected brokers for best execution. Positions merge into a single view — no more reconciling two platforms by hand.</p>
        </div>
      </article>
      <article className="story">
        <div className="story__preview"><StoryChatPreview/></div>
        <div className="story__body">
          <div className="eyebrow" style={{marginBottom:12}}>Decision support</div>
          <h3 className="story__quote">"I want to know what to do next."</h3>
          <p className="story__cap">The reasoner answers grounded questions — "should I rebalance?", "am I overweight tech?" — with citations to the model outputs behind the answer. No advice without evidence.</p>
        </div>
      </article>
    </div>
  );
}

function StoryRentalPreview() {
  return (
    <div className="sp-rent">
      <div className="eyebrow">Rent ledger · October</div>
      <div className="sp-rent__row"><span><div className="sp-rent__addr">Mercês 6A</div><div className="muted" style={{fontSize:10, fontFamily:'var(--font-mono)'}}>M. Carvalho</div></span><span className="sp-rent__amt gain">+ €850.00</span></div>
      <div className="sp-rent__row"><span><div className="sp-rent__addr">Mercês 6B</div><div className="muted" style={{fontSize:10, fontFamily:'var(--font-mono)'}}>J. Santos</div></span><span className="sp-rent__amt gain">+ €780.00</span></div>
      <div className="sp-rent__row" style={{borderColor:'var(--fortec-warn)', background:'var(--fortec-warn-soft)'}}><span><div className="sp-rent__addr">Cascais 3A</div><div className="muted" style={{fontSize:10, fontFamily:'var(--font-mono)', color:'var(--fortec-warn-ink)'}}>2 days late</div></span><span className="sp-rent__amt" style={{color:'var(--fortec-warn-ink)'}}>€1,200.00</span></div>
      <div className="sp-rent__row"><span><div className="sp-rent__addr">Mercês 3B</div><div className="muted" style={{fontSize:10, fontFamily:'var(--font-mono)'}}>L. Fernandes</div></span><span className="sp-rent__amt gain">+ €820.00</span></div>
    </div>
  );
}

function StoryTradePreview() {
  return (
    <div className="sp-trade">
      <div className="eyebrow">Order ticket · NVDA</div>
      <div className="sp-trade__ticket">
        <div className="sp-trade__field"><span className="muted">Side</span><span>BUY</span></div>
        <div className="sp-trade__field"><span className="muted">Qty</span><span>25 sh</span></div>
        <div className="sp-trade__field"><span className="muted">Limit</span><span>€904.00</span></div>
        <div className="sp-trade__field" style={{borderTop:'1px solid var(--border-subtle)', paddingTop:6, marginTop:2}}><span className="muted">Route</span><span>SMART</span></div>
        <div className="sp-trade__routes">
          <div className="sp-trade__route">ALPACA</div>
          <div className="sp-trade__route is-best">IBKR ✓</div>
          <div className="sp-trade__route">DEGIRO</div>
        </div>
      </div>
    </div>
  );
}

function StoryChatPreview() {
  return (
    <div className="sp-chat">
      <div className="eyebrow">Reasoner</div>
      <div className="sp-chat__bubble sp-chat__bubble--user">Should I rebalance my tech exposure?</div>
      <div className="sp-chat__bubble">
        Tech is 47% of your equities — 12pp over your target. The ranker still overweights NVDA and MSFT, but regime detector flags sector momentum cooling. Consider trimming AAPL (score 0.74) to your target band.
        <div className="sp-chat__cite">CITES: ranker · regime · sector · allocation</div>
      </div>
    </div>
  );
}

function Quotes() {
  const { t } = useLandingI18n();
  const items = [
    { name: 'Inês M.', role: 'Retail investor · Lisbon', initial: 'IM',
      text: 'Fortec is the only place I see my brokerage, my rentals, and my savings in one number — and the only place where that number comes with a reason.' },
    { name: 'Pedro R.', role: 'Landlord · Sintra', initial: 'PR',
      text: 'I used to run a spreadsheet with six tabs. Fortec reconciled three years of rental payments in an afternoon. Now I know my real yield, not my imagined one.' },
    { name: 'Clara V.', role: 'Financial advisor · Porto', initial: 'CV',
      text: 'The ensemble outputs are the honest kind. It tells me confidence, what models disagreed, and the volatility band. My clients ask better questions because of it.' },
  ];
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const dur = reduced ? 999999 : 7500;
    const id = setInterval(() => setI(x => (x + 1) % items.length), dur);
    return () => clearInterval(id);
  }, [paused, items.length]);
  return (
    <div className="quotes" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="quotes__track" style={{transform: `translateX(-${i*100}%)`}}>
        {items.map((q, idx) => (
          <div className="quote" key={idx}>
            <div className="quote__mark">"</div>
            <p className="quote__text">{q.text}</p>
            <div className="quote__foot">
              <div className="quote__avatar">{q.initial}</div>
              <div>
                <div className="quote__name">{q.name}</div>
                <div className="quote__role">{q.role}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="quotes__dots">
        {items.map((_, idx) => (
          <button key={idx} className={'quotes__dot ' + (idx === i ? 'is-active' : '')} onClick={() => setI(idx)} aria-label={t('Show quote {{n}}', { n: idx + 1 })}/>
        ))}
      </div>
    </div>
  );
}

function Reveal({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) {
  const ref = React.useRef();
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add('is-in'), delay);
          io.unobserve(el);
        }
      });
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.1 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={'reveal ' + className} {...rest}>{children}</Tag>;
}

Object.assign(window, { StoryCards, Quotes, Reveal });