// pages-misc.jsx — About, Blog, Contact

function AboutPage({ onContactClick }) {
  useSEO('About Us', 'A small, senior team that takes IT seriously so you don\u2019t have to. Twelve years serving Gibraltar businesses.');
  const values = [
    { title: 'Plain English', body: 'No jargon, no smoke. We explain the trade-offs and let you decide.' },
    { title: 'Long-term thinking', body: 'We optimise for the next five years, not the next invoice.' },
    { title: 'Quietly excellent', body: 'Boring software, well-run, beats exciting software, badly run. Every time.' },
    { title: 'Local roots', body: 'Born in Gibraltar, built for Gibraltar businesses \u2014 with global standards.' },
  ];
  const ref = useReveal();
  return (
    <div className="page-enter">
      <section className="bc-hero">
        <div className="container">
          <div className="crumb"><Link to="/">Home</Link> &nbsp;/&nbsp; About</div>
          <h1 style={{ maxWidth: 800, marginBottom: 20 }}>A small team that takes IT seriously, so you don't have to.</h1>
          <p style={{ color: 'var(--cw-navy-100)', fontSize: 19, lineHeight: 1.55, maxWidth: 660 }}>
            CloudWise was founded to be the partner we wished existed when we ran our own IT in-house &mdash; calm, accountable, and obsessed with the unglamorous fundamentals.
          </p>
        </div>
      </section>

      <section ref={ref} className="reveal section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }} className="about-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Our story</div>
              <h2 style={{ marginBottom: 20 }}>Built on twelve years of getting it right.</h2>
              <p style={{ color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.7, marginBottom: 16 }}>
                We started CloudWise after one too many conversations that began with &ldquo;the IT company isn't returning my calls&rdquo;. Across more than a decade in IT &mdash; at law firms, fintechs, gaming operators &mdash; we kept seeing the same gap: businesses wanted a partner, not a vendor.
              </p>
              <p style={{ color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.7 }}>
                So we built one. Today, our small senior team supports more than sixty Gibraltar-based businesses across cloud migrations, cybersecurity programmes, networks and day-to-day support. We grow slowly and deliberately &mdash; because trust is built, not advertised.
              </p>
            </div>
            <div style={{ position: 'relative', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', aspectRatio: '4/5' }}>
              <img src="assets/about-team.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <section className="section" style={{ background: 'var(--cw-paper)' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 16 }}>What we believe</div>
          <h2 style={{ marginBottom: 48, maxWidth: 720 }}>Four ideas that shape every project.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="values-grid">
            {values.map((v, i) => (
              <div key={v.title} style={{
                background: '#fff', borderRadius: 'var(--radius-xl)', padding: 28,
                border: '1px solid var(--border-subtle)',
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--cw-sky-600)', marginBottom: 14, fontWeight: 500 }}>0{i + 1}</div>
                <h4 style={{ marginBottom: 10 }}>{v.title}</h4>
                <p style={{ color: 'var(--fg-3)', fontSize: 14.5, lineHeight: 1.6, margin: 0 }}>{v.body}</p>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) { .values-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 560px) { .values-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="stats-grid">
            {[
              { num: '12+', label: 'Years in business' },
              { num: '60+', label: 'Active clients' },
              { num: '99.9%', label: 'Uptime maintained' },
              { num: '4.9/5', label: 'Client satisfaction' },
            ].map(s => (
              <div key={s.label} style={{ textAlign: 'center' }}>
                <div className="stat-num">{s.num}</div>
                <div className="stat-label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </section>

      <HomeCTA onContactClick={onContactClick} />
    </div>
  );
}

function BlogIndexPage({ onContactClick }) {
  useSEO('Blog', 'Plain-English thinking on cloud, security, and the practicalities of running IT for a real business.');
  const { posts } = useCms();
  const [feat, ...rest] = posts;
  const ref = useReveal();
  return (
    <div className="page-enter">
      <section className="bc-hero">
        <div className="container">
          <div className="crumb"><Link to="/">Home</Link> &nbsp;/&nbsp; Blog</div>
          <h1 style={{ maxWidth: 760, marginBottom: 20 }}>Notes from the helpdesk.</h1>
          <p style={{ color: 'var(--cw-navy-100)', fontSize: 19, lineHeight: 1.55, maxWidth: 600 }}>
            Plain-English thinking on cloud, security, and the practicalities of running IT for a real business.
          </p>
        </div>
      </section>

      <section ref={ref} className="reveal section">
        <div className="container">
          {/* Featured */}
          <Link to={'/blog/' + feat.slug} style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48,
            background: '#fff', border: '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-2xl)', overflow: 'hidden',
            textDecoration: 'none', marginBottom: 56,
            boxShadow: 'var(--shadow-sm)', transition: 'all 240ms',
          }} className="feat-grid"
            onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
            <div style={{ aspectRatio: '4/3', overflow: 'hidden' }}>
              <img src={feat.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ padding: '40px 40px 40px 0', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <span className="chip" style={{ alignSelf: 'flex-start', marginBottom: 16 }}>Featured &middot; {feat.category}</span>
              <h2 style={{ marginBottom: 16, fontSize: 'clamp(1.6rem, 2.4vw, 2.25rem)' }}>{feat.title}</h2>
              <p style={{ color: 'var(--fg-3)', fontSize: 16, lineHeight: 1.65, marginBottom: 20 }}>{feat.excerpt}</p>
              <div style={{ fontSize: 13, color: 'var(--fg-4)', marginBottom: 16 }}>{feat.date} &middot; 6 min read</div>
              <span style={{ color: 'var(--cw-sky-600)', fontWeight: 600, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                Read article <Icon.arrow />
              </span>
            </div>
          </Link>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="blog-grid">
            {rest.map(p => (
              <Link key={p.slug} to={'/blog/' + p.slug} style={{
                background: '#fff', borderRadius: 'var(--radius-xl)',
                border: '1px solid var(--border-subtle)', overflow: 'hidden',
                textDecoration: 'none', display: 'flex', flexDirection: 'column',
                transition: 'all 240ms',
              }}
                onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}>
                <div style={{ aspectRatio: '16/10', overflow: 'hidden' }}>
                  <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <span className="chip" style={{ alignSelf: 'flex-start', marginBottom: 12 }}>{p.category}</span>
                  <h4 style={{ marginBottom: 10, fontSize: 18 }}>{p.title}</h4>
                  <p style={{ color: 'var(--fg-3)', fontSize: 14.5, marginBottom: 16, flex: 1 }}>{p.excerpt}</p>
                  <div style={{ fontSize: 12, color: 'var(--fg-4)' }}>{p.date}</div>
                </div>
              </Link>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .feat-grid { grid-template-columns: 1fr !important; }
            .feat-grid > div:last-child { padding: 24px !important; }
          }
          @media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      <HomeCTA onContactClick={onContactClick} />
    </div>
  );
}

function BlogPostPage({ slug, onContactClick }) {
  const { posts } = useCms();
  const post = posts.find(p => p.slug === slug);
  if (!post) {
    return (
      <div className="page-enter section">
        <div className="container">
          <h2>Article not found.</h2>
          <Link to="/blog" className="btn btn-outline" style={{ marginTop: 20 }}>Back to blog</Link>
        </div>
      </div>
    );
  }
  useSEO(post.title, post.excerpt);
  return (
    <div className="page-enter">
      <article className="section">
        <div className="container" style={{ maxWidth: 760 }}>
          <div style={{ marginBottom: 24, fontSize: 13, color: 'var(--fg-3)' }}>
            <Link to="/blog" style={{ color: 'var(--cw-sky-600)', textDecoration: 'none' }}>&larr; All articles</Link>
          </div>
          <span className="chip" style={{ marginBottom: 16 }}>{post.category}</span>
          <h1 style={{ marginBottom: 20 }}>{post.title}</h1>
          <div style={{ fontSize: 14, color: 'var(--fg-4)', marginBottom: 32 }}>{post.date} &middot; 6 min read</div>
          <div style={{ borderRadius: 'var(--radius-2xl)', overflow: 'hidden', aspectRatio: '16/9', marginBottom: 40, boxShadow: 'var(--shadow-md)' }}>
            <img src={post.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--fg-2)' }}
               dangerouslySetInnerHTML={{ __html: post.body || ('<p style="font-size:20px;color:var(--cw-navy-700);font-weight:500;margin-bottom:24px">' + post.excerpt + '</p><p>This article is a placeholder for the full piece.</p>') }} />
          <div style={{ marginTop: 48, padding: 32, background: 'var(--cw-paper)', borderRadius: 'var(--radius-xl)', border: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            <div>
              <h4 style={{ marginBottom: 6 }}>Like what you read?</h4>
              <p style={{ color: 'var(--fg-3)', fontSize: 14, margin: 0 }}>Get a free, no-obligation review of your IT setup.</p>
            </div>
            <button className="btn btn-primary" onClick={onContactClick}>Talk to us <Icon.arrow /></button>
          </div>
        </div>
      </article>
    </div>
  );
}

function ContactPage({ onContactClick }) {
  useSEO('Contact', 'Get in touch with CloudWise. No obligation, no sales pressure \u2014 just a conversation about your IT.');
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const ref = useReveal();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    try {
      await submitToFormspree(new FormData(e.target));
      setSubmitted(true);
    } catch {
      setError('Something went wrong. Please try again or call us directly.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="page-enter">
      <section className="bc-hero">
        <div className="container">
          <div className="crumb"><Link to="/">Home</Link> &nbsp;/&nbsp; Contact</div>
          <h1 style={{ maxWidth: 720, marginBottom: 20 }}>Let's start a conversation.</h1>
          <p style={{ color: 'var(--cw-navy-100)', fontSize: 19, lineHeight: 1.55, maxWidth: 600 }}>
            Tell us a little about your business, and we'll come back within one business day with next steps &mdash; no obligation, no sales pressure.
          </p>
        </div>
      </section>

      <section ref={ref} className="reveal section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56 }} className="contact-grid">
            <div style={{
              background: '#fff', border: '1px solid var(--border-subtle)',
              borderRadius: 'var(--radius-2xl)', padding: 40,
              boxShadow: 'var(--shadow-sm)',
            }}>
              {submitted ? (
                <div style={{ textAlign: 'center', padding: '40px 0' }}>
                  <div style={{
                    width: 72, height: 72, borderRadius: '50%',
                    background: 'var(--cw-sky-50)', color: 'var(--cw-sky-600)',
                    display: 'grid', placeItems: 'center', margin: '0 auto 24px',
                  }}><Icon.check style={{ width: 36, height: 36 }} /></div>
                  <h3 style={{ marginBottom: 12 }}>Thanks &mdash; we got it.</h3>
                  <p style={{ color: 'var(--fg-3)' }}>We'll come back within one business day. For anything urgent, ring us on +350 225 02143.</p>
                </div>
              ) : (
                <>
                  <h3 style={{ marginBottom: 8 }}>Send us a message</h3>
                  <p style={{ color: 'var(--fg-3)', marginBottom: 28, fontSize: 15 }}>The more you tell us, the better we can help.</p>
                  <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 16 }}>
                    <input type="hidden" name="_form_type" value="Contact Form" />
                    <div className="field-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                      <div className="field"><label>Full name</label><input name="name" required placeholder="Jane Smith" /></div>
                      <div className="field"><label>Company</label><input name="company" placeholder="Company Ltd" /></div>
                    </div>
                    <div className="field-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                      <div className="field"><label>Email</label><input name="email" required type="email" placeholder="jane@company.com" /></div>
                      <div className="field"><label>Phone</label><input name="phone" type="tel" placeholder="+350 ..." /></div>
                    </div>
                    <div className="field">
                      <label>Service of interest</label>
                      <select name="service">
                        <option>Not sure &mdash; recommend something</option>
                        {SERVICES.map(s => <option key={s.slug}>{s.title}</option>)}
                      </select>
                    </div>
                    <div className="field"><label>What can we help with?</label><textarea name="message" placeholder="A bit about your business, your timeline, and what success looks like..." /></div>
                    {error && <div style={{ color: 'var(--cw-danger)', fontSize: 14, textAlign: 'center' }}>{error}</div>}
                    <button type="submit" className="btn btn-primary" style={{ marginTop: 8, opacity: submitting ? 0.7 : 1 }} disabled={submitting}>
                      {submitting ? 'Sending...' : 'Send message'} {!submitting && <Icon.arrow />}
                    </button>
                  </form>
                </>
              )}
            </div>
            <div>
              <h4 style={{ marginBottom: 8 }}>Or reach us directly</h4>
              <p style={{ color: 'var(--fg-3)', fontSize: 15, marginBottom: 28 }}>Some things are easier said out loud. We're happy to chat.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginBottom: 32 }}>
                <a href="mailto:hello@cloudwise.gi" style={{ display: 'flex', gap: 14, alignItems: 'center', textDecoration: 'none', padding: 18, background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--cw-sky-50)', color: 'var(--cw-sky-600)', display: 'grid', placeItems: 'center' }}><Icon.mail /></div>
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Email</div>
                    <div style={{ color: 'var(--cw-navy-700)', fontWeight: 600 }}>hello@cloudwise.gi</div>
                  </div>
                </a>
                <a href="tel:+35022502143" style={{ display: 'flex', gap: 14, alignItems: 'center', textDecoration: 'none', padding: 18, background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--cw-sky-50)', color: 'var(--cw-sky-600)', display: 'grid', placeItems: 'center' }}><Icon.phone /></div>
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Phone</div>
                    <div style={{ color: 'var(--cw-navy-700)', fontWeight: 600 }}>+350 225 02143</div>
                  </div>
                </a>
                <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: 18, background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--cw-sky-50)', color: 'var(--cw-sky-600)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon.pin /></div>
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>Office</div>
                    <div style={{ color: 'var(--cw-navy-700)', fontWeight: 600 }}>22 City Mill Lane<br/>Gibraltar GX11 1AA</div>
                  </div>
                </div>
              </div>
              <div style={{
                background: 'var(--cw-paper)', borderRadius: 'var(--radius-xl)',
                padding: 24, border: '1px solid var(--border-subtle)',
              }}>
                <div style={{ fontSize: 12, color: 'var(--fg-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 8 }}>Office hours</div>
                <div style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.7 }}>
                  Mon&ndash;Fri &middot; 09:00&ndash;18:00<br/>
                  After-hours support available for managed clients.
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;
window.BlogIndexPage = BlogIndexPage;
window.BlogPostPage = BlogPostPage;
window.ContactPage = ContactPage;