// Services, About, Insights pages

const ServicesPage = ({ setRoute }) => {
  useLucide();
  const [active, setActive] = React.useState(SITE_DATA.services[0].id);
  const current = SITE_DATA.services.find(s => s.id === active);

  return (
    <div className="page">
      <div className="page-head container">
        <span className="eyebrow">Services</span>
        <h1 style={{ marginTop: 14 }}>Full-service, end to end.</h1>
        <p className="lead">Buying, selling, presales, investment, rental management, and relocation — supported by the same network of trades, lawyers, and mortgage brokers I've worked with for twenty years.</p>
      </div>

      <section className="section container">
        <div className="services-grid">
          {SITE_DATA.services.map(s => (
            <button
              key={s.id}
              className="service-card"
              onClick={() => setActive(s.id)}
              style={{
                textAlign: 'left',
                borderColor: active === s.id ? 'var(--accent)' : 'var(--line)',
                background: active === s.id ? '#fff' : 'var(--bg-card)',
              }}
            >
              <span className="service-icon"><Icon name={s.icon} size={26} stroke={1.6} /></span>
              <h3 className="serif">{s.title}</h3>
              <div className="tagline">{s.tagline}</div>
              <div className="blurb">{s.blurb}</div>
              {active === s.id && (
                <span style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 500, marginTop: 8, letterSpacing: '0.06em' }}>
                  ▾ DETAILS BELOW
                </span>
              )}
            </button>
          ))}
        </div>
      </section>

      {/* Service detail */}
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="container service-detail-grid">
          <div>
            <span className="service-icon" style={{ marginBottom: 16 }}><Icon name={current.icon} size={28} stroke={1.6} /></span>
            <span className="eyebrow">{current.title} services</span>
            <h2 style={{ marginTop: 14 }}>{current.tagline}</h2>
            <p style={{ marginTop: 18, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.7 }}>{current.blurb}</p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => setRoute('contact')}>Book a consultation <Icon name="arrow-right" size={16} /></button>
              <a className="btn btn-ghost" href={`tel:${SITE_DATA.agent.phone}`}><Icon name="phone" size={16} /> {SITE_DATA.agent.phone}</a>
            </div>
          </div>
          <div className="service-detail-card">
            <span className="eyebrow">What's included</span>
            <ul style={{ marginTop: 8 }}>
              {current.details.map((d, i) => <li key={i}>{d}</li>)}
            </ul>
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="section container">
        <div className="sec-head">
          <div className="titlewrap">
            <span className="eyebrow">How we work together</span>
            <h2>Four steps. No surprises.</h2>
          </div>
        </div>
        <div className="process-grid">
          {[
            { n: '01', title: 'Conversation', body: 'Coffee, a phone call, or video. We talk about what you actually want — and what the market is doing about it.' },
            { n: '02', title: 'Strategy', body: 'Buying: targeted search, financing prep. Selling: pricing, prep, photography, marketing plan.' },
            { n: '03', title: 'Execution', body: 'Showings, offers, negotiations, subject removal. I handle the moving parts; you make the decisions.' },
            { n: '04', title: 'Closing & beyond', body: 'Possession-day walk-through, trades introductions, and a check-in six months in. The relationship doesn\'t end at keys.' },
          ].map(s => (
            <div className="process-step" key={s.n}>
              <span className="n">{s.n}</span>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};
window.ServicesPage = ServicesPage;

const AboutPage = ({ setRoute }) => {
  useLucide();
  return (
    <div className="page">
      <div className="page-head container">
        <span className="eyebrow">About</span>
        <h1 style={{ marginTop: 14 }}>Steffanie Ting.</h1>
        <p className="lead">Vancouver Real Estate Specialist. Twenty years of guiding buyers, sellers, and investors across Metro Vancouver.</p>
      </div>

      <section className="section container">
        <div className="about-strip">
          <div className="about-portrait">
            <img src={SITE_DATA.agent.portrait} alt="Steffanie Ting" />
          </div>
          <div className="about-body">
            <span className="eyebrow">A note from Steffanie</span>
            <h2 style={{ marginTop: 14 }}>I love working with people. I love working in real estate.</h2>
            <p>{SITE_DATA.agent.bio}</p>
            <p>I've spent my career in this city — first as a buyer's agent helping young couples find their first condo, then as a listing specialist for downtown developments, and now as a generalist who works the full Metro Vancouver area. The constant is that I treat every client's money like it's my own. The number of referrals I get from past clients is the metric I'm proudest of.</p>
            <p>If you've made it this far, send me a note and tell me what you're looking for.</p>
            <div className="sig">— Steffanie</div>
          </div>
        </div>
      </section>

      {/* Credentials */}
      <section className="section" style={{ background: 'var(--bg-soft)' }}>
        <div className="container">
          <div className="sec-head">
            <div className="titlewrap">
              <span className="eyebrow">Credentials & recognition</span>
              <h2>The receipts.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="cred-grid">
            {[
              { title: 'Medallion Club', sub: '2019 – 2025', body: 'Top 10% Greater Vancouver REALTORS® by MLS® sales' },
              { title: 'REBGV Member', sub: 'Since 2006', body: 'Real Estate Board of Greater Vancouver in good standing' },
              { title: 'Magsen Realty Inc.', sub: 'Brokerage', body: 'Independent brokerage with offices across Metro Vancouver' },
              { title: 'CREA Member', sub: 'REALTOR®', body: 'Canadian Real Estate Association — bound by the REALTOR® code of ethics' },
              { title: 'Trilingual', sub: 'EN · 廣東話 · 普通话', body: 'Service in English, Cantonese, and Mandarin' },
              { title: 'PREC', sub: 'Personal Real Estate Corp.', body: 'Steffanie Ting Personal Real Estate Corporation' },
            ].map(c => (
              <div key={c.title} className="card" style={{ padding: 28 }}>
                <span className="eyebrow">{c.sub}</span>
                <h4 className="serif" style={{ marginTop: 8, fontSize: 22 }}>{c.title}</h4>
                <p style={{ marginTop: 8, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.6 }}>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials grid */}
      <section className="section container">
        <div className="sec-head">
          <div className="titlewrap">
            <span className="eyebrow">In their words</span>
            <h2>What clients say.</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }} className="testi-grid">
          {SITE_DATA.testimonials.map((t, i) => (
            <div key={i} className="testimonial-card" style={{ padding: 40 }}>
              <p className="testimonial-quote" style={{ fontSize: 22 }}>{t.quote}</p>
              <div className="testimonial-author">
                <strong>{t.author}</strong>
                <span className="role">{t.role}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section container">
        <div className="cta-panel">
          <div>
            <h2>Let's have a coffee.</h2>
            <p className="sub">No commitment, no pitch. Just a conversation about your situation and how I'd think about it.</p>
            <div style={{ marginTop: 24 }}>
              <button className="btn btn-primary" onClick={() => setRoute('contact')}>Send a message <Icon name="arrow-right" size={16} /></button>
            </div>
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(80px, 12vw, 200px)', color: 'rgba(255,255,255,0.08)', lineHeight: 0.9, textAlign: 'right' }}>
            20<br/>years.
          </div>
        </div>
      </section>
    </div>
  );
};
window.AboutPage = AboutPage;

const InsightsPage = ({ showToast }) => {
  useLucide();
  const [activeCategory, setActiveCategory] = React.useState('all');
  const categories = ['all', ...new Set(SITE_DATA.insights.map(i => i.category))];
  const filtered = activeCategory === 'all'
    ? SITE_DATA.insights
    : SITE_DATA.insights.filter(i => i.category === activeCategory);

  return (
    <div className="page">
      <div className="page-head container">
        <span className="eyebrow">Insights</span>
        <h1 style={{ marginTop: 14 }}>Market notes & neighbourhood deep-dives.</h1>
        <p className="lead">Clear-eyed commentary from the inside of Metro Vancouver real estate. New posts about once a month — pull up a chair.</p>
      </div>

      <section className="section container">
        <div className="filter-bar">
          {categories.map(c => (
            <button
              key={c}
              className={`filter-chip ${activeCategory === c ? 'active' : ''}`}
              onClick={() => setActiveCategory(c)}
            >
              {c === 'all' ? 'All posts' : c}
            </button>
          ))}
          <span className="filter-results">{filtered.length} posts</span>
        </div>

        <div className="insights-grid">
          {filtered.map(i => (
            <article
              key={i.id}
              className="insight-card"
              onClick={() => showToast(`Opening: ${i.title}`)}
            >
              <div className="img"><img src={i.image} alt={i.title} loading="lazy" /></div>
              <div className="meta">
                <span style={{ color: 'var(--accent)', fontWeight: 500 }}>{i.category}</span>
                <span>·</span>
                <span>{new Date(i.date).toLocaleDateString('en-CA', { month: 'long', day: 'numeric', year: 'numeric' })}</span>
                <span>·</span>
                <span>{i.readTime} min read</span>
              </div>
              <h3 className="serif">{i.title}</h3>
              <p className="excerpt">{i.excerpt}</p>
              <span className="btn-link" style={{ marginTop: 12 }}>Read post</span>
            </article>
          ))}
        </div>

        <Newsletter showToast={showToast} />
      </section>
    </div>
  );
};
window.InsightsPage = InsightsPage;

const Newsletter = ({ showToast }) => {
  const [email, setEmail] = React.useState('');
  const [err, setErr] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email || !email.includes('@')) { setErr('Valid email please'); return; }
    setErr('');
    showToast("You're on the list — first post arrives next month.");
    setEmail('');
  };
  return (
    <div className="newsletter" style={{ marginTop: 72 }}>
      <div>
        <span className="eyebrow">Monthly newsletter</span>
        <h3 className="serif" style={{ marginTop: 14 }}>Market signal, no noise.</h3>
        <p style={{ marginTop: 12, color: 'var(--ink-2)', fontSize: 15 }}>One email a month with what I'm seeing in Metro Vancouver — market trends, a few off-market opportunities, and the one thing every reader asks me about.</p>
      </div>
      <form onSubmit={submit}>
        <input
          className="input"
          type="email"
          placeholder="your@email.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          style={{ flex: 1 }}
        />
        <button type="submit" className="btn btn-primary">Subscribe</button>
        {err && <div className="field-error" style={{ position: 'absolute' }}>{err}</div>}
      </form>
    </div>
  );
};
window.Newsletter = Newsletter;