// Shared page template for feature/inner pages

const PageShell = ({ children, currentPage }) => {
  useReveal();
  return (
    <>
      <a href="#main" className="skip-link">Skip to content</a>
      <Header transparent={false} currentPage={currentPage} />
      <main id="main" style={{ paddingTop: 80 }}>{children}</main>
      <Footer />
      <StickyMobileCTA />
    </>
  );
};

// Feature page template
const FeaturePage = ({ breadcrumb, eyebrow, eyebrowEmoji, h1Prefix, h1Highlight, h1Suffix, subhead, color, mockup, features, benefits, relatedPages }) => (
  <>
    <section style={{ paddingTop: 40, paddingBottom: 60 }}>
      <div className="container">
        <Breadcrumbs items={breadcrumb} />
        <div className="feature-hero" style={{ display: 'grid', gap: 48, alignItems: 'center' }}>
          <div className="reveal">
            <div className="eyebrow-pill" style={{ marginBottom: 20 }}>
              <span>{eyebrowEmoji}</span> {eyebrow}
            </div>
            <h1 style={{ fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 1.05, marginBottom: 20 }}>
              {h1Prefix} <span className="gradient-text">{h1Highlight}</span> {h1Suffix}
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-secondary)', marginBottom: 28, lineHeight: 1.5 }}>{subhead}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              <a href="pricing.html" className="btn btn-gradient" style={{ minHeight: 52 }}>Start free trial <Icon name="arrowRight" size={16} /></a>
              <a href="ai-tools.html" className="btn btn-secondary" style={{ minHeight: 52 }}>See all features</a>
            </div>
          </div>
          <div className="reveal">{mockup}</div>
        </div>
      </div>
      <style>{`@media (min-width: 900px) { .feature-hero { grid-template-columns: 1fr 1.1fr; } }`}</style>
    </section>

    {features && (
      <section style={{ background: 'var(--bg-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div className="container">
          <div className="section-head reveal">
            <h2>What's inside</h2>
          </div>
          <div className="grid grid-3 reveal">
            {features.map((f, i) => (
              <div key={i} className={`card card-accent accent-${f.color}`}>
                <div className={`icon-box icon-${f.color}`} style={{ marginBottom: 16 }}>
                  <Icon name={f.icon} size={20} />
                </div>
                <h3 style={{ fontSize: 19, marginBottom: 8 }}>{f.title}</h3>
                <p style={{ color: 'var(--text-secondary)', fontSize: 15 }}>{f.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    )}

    {benefits && (
      <section>
        <div className="container">
          <div className="section-head reveal">
            <h2>The <span className="gradient-text">real benefits</span></h2>
          </div>
          <div className="grid grid-2 reveal" style={{ maxWidth: 900, margin: '0 auto' }}>
            {benefits.map((b, i) => (
              <div key={i} style={{ display: 'flex', gap: 16, padding: 20 }}>
                <div className={`icon-box icon-${color}`} style={{ flexShrink: 0 }}>
                  <Icon name="check" size={20} />
                </div>
                <div>
                  <h3 style={{ fontSize: 18, marginBottom: 6 }}>{b.title}</h3>
                  <p style={{ color: 'var(--text-secondary)', fontSize: 15 }}>{b.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    )}

    {relatedPages && (
      <section style={{ background: 'var(--bg-card)', borderTop: '1px solid var(--border-subtle)' }}>
        <div className="container">
          <div className="section-head reveal">
            <h2>Works beautifully with</h2>
          </div>
          <div className="grid grid-3 reveal">
            {relatedPages.map(p => (
              <FeatureCard key={p.href} {...p} />
            ))}
          </div>
        </div>
      </section>
    )}

    <section style={{ background: 'var(--signature-gradient)', color: 'white', textAlign: 'center' }}>
      <div className="container">
        <h2 style={{ color: 'white', fontSize: 'clamp(32px, 5vw, 56px)', marginBottom: 16 }}>Try it free for 7 days.</h2>
        <p style={{ fontSize: 18, opacity: 0.95, marginBottom: 28 }}>No credit card. $14.99/month after.</p>
        <a href="pricing.html" className="btn btn-white" style={{ padding: '16px 32px', fontSize: 16, borderRadius: 999 }}>
          <span>Start free trial</span> <Icon name="arrowRight" size={18} style={{ color: 'var(--primary-purple)' }} />
        </a>
      </div>
    </section>
  </>
);

// Simple product mockup factory
const MiniMock = ({ title, children, color = 'blue' }) => (
  <div style={{ background: 'white', borderRadius: 14, border: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-xl)', overflow: 'hidden' }}>
    <div style={{ padding: '12px 16px', background: '#f8fafc', borderBottom: '1px solid var(--border-subtle)', display: 'flex', gap: 6 }}>
      <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#ef4444' }}></div>
      <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#f59e0b' }}></div>
      <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#10b981' }}></div>
      <div style={{ flex: 1, textAlign: 'center', fontSize: 11, color: 'var(--text-tertiary)' }}>app.homescholar.app</div>
    </div>
    <div style={{ padding: 20, background: '#f8fafc', minHeight: 360 }}>
      <div style={{ fontSize: 20, fontWeight: 800, fontFamily: 'var(--font-display)', marginBottom: 16 }}>{title}</div>
      {children}
    </div>
  </div>
);

Object.assign(window, { PageShell, FeaturePage, MiniMock });