// TitanHero.jsx — Hero section for Titan Ledgers

const TitanHero = () => {
  const wrap = {
    background: '#fff',
    paddingTop: 120,
    paddingBottom: 140,
    textAlign: 'center',
    position: 'relative',
    overflow: 'hidden',
    fontFamily: "'DM Sans', sans-serif",
  };

  const gradientAccent = {
    position: 'absolute', top: -160, left: '50%',
    transform: 'translateX(-50%)',
    width: 1000, height: 640,
    background: 'radial-gradient(ellipse at center, rgba(189,151,72,0.10) 0%, rgba(15,26,46,0.04) 55%, transparent 75%)',
    pointerEvents: 'none',
  };

  const h1Style = {
    fontSize: 'clamp(36px, 6vw, 58px)',
    fontWeight: 300, lineHeight: 1.03, letterSpacing: '-1.4px',
    color: '#0F1A2E', maxWidth: 760,
    margin: '0 auto 24px', textWrap: 'pretty',
  };

  const subStyle = {
    fontSize: 17, fontWeight: 300, lineHeight: 1.65,
    color: '#475569', maxWidth: 620,
    margin: '0 auto 44px', textWrap: 'pretty',
  };

  const ctaRow = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, marginBottom: 0 };

  // Primary CTA: navy button with gold text — literal brand identity in button form (gold-on-navy)
  const btnPrimary = {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '14px 28px', borderRadius: 4,
    fontSize: 18, fontWeight: 500, lineHeight: 1,
    background: '#16263D', color: '#BD9748', border: 'none',
    cursor: 'pointer', textDecoration: 'none',
    transition: 'background 150ms, color 150ms',
    letterSpacing: '0.1px',
  };

  return (
    <section className="hero-section" style={wrap}>
      <style>{`
        @media (max-width: 768px) {
          .hero-section { padding: 0 !important; min-height: calc(100svh - 72px) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; }
          .hero-wrap { padding: 0 24px !important; width: 100%; box-sizing: border-box !important; }
          .hero-cta a { width: 100% !important; justify-content: center !important; }
        }
      `}</style>
      <div style={gradientAccent} />
      <div className="hero-wrap" style={{ position: 'relative', padding: '0 24px' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(189,151,72,0.08)', border: '1px solid rgba(189,151,72,0.22)', borderRadius: 20, padding: '4px 12px', fontSize: 11, fontWeight: 500, color: '#967844', letterSpacing: 0.4, marginBottom: 28 }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#967844" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
          Sugar Land, TX · Serving nationwide
        </div>
        <h1 style={h1Style}>
          Strategic Financial Clarity
        </h1>
        <p style={subStyle}>
          We help business owners save time, reduce stress, and make smarter financial decisions by keeping their books accurate, organized, and always prepared for tax season &ndash; so they can focus on growing their business.
        </p>
        <div className="hero-cta" style={ctaRow}>
          <a href="#contact" style={btnPrimary}
            onMouseEnter={e => { e.currentTarget.style.background = '#223249'; e.currentTarget.style.color = '#E9CE87'; }}
            onMouseLeave={e => { e.currentTarget.style.background = '#16263D'; e.currentTarget.style.color = '#BD9748'; }}
          >Get a free consultation &rarr;</a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TitanHero });