// Sections: How it works, Team, FAQ, Guide/Resource, Final CTA, Footer

const SectionLabel = ({ children, color = 'var(--terra-dark)' }) => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      gap: 14,
      marginBottom: 18,
      justifyContent: 'center',
    }}
  >
    <div style={{ width: 40, height: 1, background: color, opacity: 0.5 }}></div>
    <span className='smallcaps' style={{ color }}>
      {children}
    </span>
    <div style={{ width: 40, height: 1, background: color, opacity: 0.5 }}></div>
  </div>
);

const SectionTitle = ({ children, center = true, size = 54 }) => (
  <h2
    className='display'
    style={{
      fontSize: `clamp(32px, 4vw, ${size}px)`,
      lineHeight: 1.08,
      fontWeight: 500,
      margin: '0 0 18px',
      textAlign: center ? 'center' : 'left',
      letterSpacing: '-0.01em',
    }}
  >
    {children}
  </h2>
);

// HOW IT WORKS
const HowItWorks = () => {
  const steps = [
    {
      n: '01',
      title: 'Initial call',
      blurb:
        "We'll ask a few simple questions about your property and mineral rights, just the basics. If you're not sure what you own or what it's worth, that's exactly why we're here. No homework required.",
      hand: 'start here',
    },
    {
      n: '02',
      title: 'We do our research',
      blurb:
        'We pull public records, check current production in the surrounding area, and put together a fair, written valuation based on what comparable mineral rights are selling for right now.',
      hand: 'we do the work',
    },
    {
      n: '03',
      title: 'We talk it through',
      blurb:
        'We walk you through the numbers by phone and answer every question. We want you to feel confident in what your minerals are worth and what selling would look like for you.',
    },
    {
      n: '04',
      title: 'You decide',
      blurb:
        "If selling makes sense for you, we handle everything and close in 30-45 days. If it doesn't, we'll tell you that honestly. No sales pressure. Ever.",
      hand: 'no pressure',
    },
  ];
  return (
    <section
      id='how'
      style={{
        padding: '100px 0 90px',
        background: 'var(--paper-warm)',
        borderTop: '1px solid var(--rule)',
        borderBottom: '1px solid var(--rule)',
        position: 'relative',
      }}
    >
      <div className='container'>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <SectionLabel>How it works</SectionLabel>
          <SectionTitle>Four steps. No runaround.</SectionTitle>
          <p
            style={{
              maxWidth: 580,
              margin: '0 auto',
              fontSize: 18,
              color: 'var(--ink-soft)',
              fontFamily: 'var(--f-serif)',
            }}
          >
            Selling mineral rights should feel more like a conversation with a neighbor than a
            meeting with a lawyer. Here's how we do it.
          </p>
        </div>

        <div
          className='how-grid'
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 32,
            position: 'relative',
          }}
        >
          {/* connecting rule */}
          <div
            className='how-rule'
            style={{
              position: 'absolute',
              left: '10%',
              right: '10%',
              top: 42,
              height: 1,
              background: 'var(--rule)',
              zIndex: 0,
            }}
          ></div>
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
              <div
                style={{
                  width: 84,
                  height: 84,
                  borderRadius: '50%',
                  background: 'var(--paper)',
                  border: '1.5px solid var(--ink)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  margin: '0 auto 22px',
                  position: 'relative',
                  color: 'var(--ink)',
                }}
              >
                <span className='num' style={{ fontSize: 28, fontWeight: 600, lineHeight: 1 }}>
                  {s.n}
                </span>
                {s.hand && (
                  <div
                    className='hand-accent'
                    style={{
                      position: 'absolute',
                      top: i === 0 ? -26 : undefined,
                      bottom: i !== 0 ? -26 : undefined,
                      left: '50%',
                      transform: `translateX(${i === 0 ? -80 : i === 1 ? 20 : i === 3 ? -80 : 0}%) rotate(${i === 0 ? -8 : i === 1 ? 6 : -6}deg)`,
                      fontFamily: 'var(--f-hand)',
                      fontSize: 22,
                      color: 'var(--terra-dark)',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {s.hand}
                  </div>
                )}
              </div>
              <h3
                className='display'
                style={{
                  fontSize: 22,
                  fontWeight: 500,
                  margin: '0 0 10px',
                  letterSpacing: '-0.005em',
                }}
              >
                {s.title}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0 }}>
                {s.blurb}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// TEAM / WHO WE ARE — solo owner + expert network
const Team = () => {
  return (
    <section id='team' style={{ padding: '110px 0 100px' }}>
      <div className='container'>
        <div
          className='team-grid'
          style={{
            display: 'grid',
            gridTemplateColumns: '0.9fr 1.1fr',
            gap: 70,
            alignItems: 'start',
          }}
        >
          {/* LEFT — portrait + caption */}
          <div className='team-portrait-col' style={{ position: 'relative' }}>
            <div style={{ position: 'relative' }}>
              <PhotoPlaceholder label='portrait · owner, Texas' ratio='4/5' tone='warm' />
              <div
                style={{
                  position: 'absolute',
                  top: -16,
                  left: -16,
                  background: 'var(--paper)',
                  border: '1px dashed var(--sage-dark)',
                  padding: '8px 12px',
                  fontFamily: 'var(--f-body)',
                  fontSize: 10,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  color: 'var(--sage-dark)',
                  transform: 'rotate(-4deg)',
                }}
              >
                Texas-based · Independent
              </div>
            </div>

            <div style={{ marginTop: 24, display: 'flex', alignItems: 'flex-start', gap: 18 }}>
              <div style={{ flex: 1 }}>
                <div className='smallcaps' style={{ color: 'var(--terra-dark)', marginBottom: 6 }}>
                  Owner & Founder
                </div>
                <div
                  style={{
                    fontFamily: 'var(--f-display)',
                    fontSize: 28,
                    lineHeight: 1.1,
                    fontWeight: 500,
                    letterSpacing: '-0.005em',
                  }}
                >
                  Longhorn Minerals
                </div>
                <div
                  style={{
                    fontSize: 13,
                    color: 'var(--ink-mute)',
                    marginTop: 4,
                    fontFamily: 'var(--f-serif)',
                    fontStyle: 'italic',
                  }}
                >
                  Texas-based · Independent buyer
                </div>
              </div>
            </div>

            {/* Network callout card */}
            <div
              style={{
                marginTop: 26,
                background: 'var(--paper-warm)',
                border: '1px solid var(--rule)',
                padding: '18px 20px',
              }}
            >
              <div className='smallcaps' style={{ color: 'var(--sage-dark)', marginBottom: 10 }}>
                Backed by
              </div>
              <div
                style={{
                  fontFamily: 'var(--f-display)',
                  fontSize: 18,
                  fontWeight: 500,
                  marginBottom: 8,
                }}
              >
                A vetted network of Texas landmen, mineral attorneys, and industry buyers
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
                Combined 20+ years working Texas and multi-state mineral transactions — title
                review, deed work, closings, and fair-market valuation.
              </div>
            </div>
          </div>

          {/* RIGHT — the story + what sets us apart */}
          <div>
            <SectionLabel color='var(--sage-dark)'>Who you're working with</SectionLabel>
            <h2
              className='display'
              style={{
                fontSize: 'clamp(34px, 3.9vw, 54px)',
                lineHeight: 1.06,
                fontWeight: 500,
                margin: '0 0 24px',
                letterSpacing: '-0.01em',
              }}
            >
              I started Longhorn to do this the honest way.
            </h2>

            <div
              style={{
                fontFamily: 'var(--f-serif)',
                fontSize: 19,
                lineHeight: 1.6,
                color: 'var(--ink)',
                margin: '0 0 18px',
                maxWidth: 580,
              }}
            >
              <p style={{ margin: '0 0 14px' }}>
                My name is Gabriel Ferguson and I'm a Texas-based mineral rights buyer. I started
                Longhorn Minerals because I saw how confusing this process can be — especially for
                families who have inherited rights and don't know what they have or what it's worth.
              </p>
              <p style={{ margin: '0 0 14px' }}>
                I work with a team of experienced Texas landmen, mineral rights attorneys, and
                qualified buyers who have been working these transactions for over twenty years. You
                get that experience behind every step — not a form letter from a large company.
              </p>
              <p style={{ margin: 0, color: 'var(--ink-soft)' }}>
                When you call, you speak with me directly. I'll tell you plainly what your rights
                are worth and walk you through your options. And if holding on makes more sense than
                selling, I'll tell you that too.
              </p>
            </div>

            {/* signature */}
            <div
              className='hand-accent'
              style={{
                fontFamily: 'var(--f-hand)',
                fontSize: 36,
                color: 'var(--ink)',
                margin: '18px 0 6px',
                lineHeight: 1,
              }}
            >
              — Longhorn Minerals
            </div>
            <div
              style={{
                fontSize: 12,
                color: 'var(--ink-mute)',
                letterSpacing: '0.14em',
                textTransform: 'uppercase',
                fontWeight: 600,
                marginBottom: 36,
              }}
            >
              Texas-based · Independent · On your side
            </div>

            {/* what sets us apart + affiliations */}
            <div
              className='team-stats-grid'
              style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: 28,
                paddingTop: 28,
                borderTop: '1px solid var(--rule)',
              }}
            >
              <div style={{ display: 'grid', gap: 16 }}>
                <DifferentiatorRow
                  icon='✦'
                  label='You talk to the owner'
                  sub='Every call, every time — no middlemen.'
                />
                <DifferentiatorRow
                  icon='✦'
                  label='20+ yrs network expertise'
                  sub='Landmen, attorneys & buyers behind every deal.'
                />
                <DifferentiatorRow
                  icon='✦'
                  label='No pressure, ever'
                  sub="If selling isn't right for you, we'll say so."
                />
              </div>

              <div
                style={{
                  background: 'var(--paper-warm)',
                  border: '1px solid var(--rule)',
                  padding: '20px 22px',
                }}
              >
                <div className='smallcaps' style={{ color: 'var(--ink-soft)', marginBottom: 14 }}>
                  Memberships
                </div>
                <div style={{ display: 'grid', gap: 12 }}>
                  <AffilRow label='NARO' sub="Nat'l Assoc. of Royalty Owners" />
                  <AffilRow label='AAPL' sub='American Assoc. of Professional Landmen' />
                  <AffilRow label='TIPRO' sub='Texas Independent Producers' />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const DifferentiatorRow = ({ icon, label, sub }) => (
  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
    <div style={{ color: 'var(--terra)', fontSize: 14, paddingTop: 2, flexShrink: 0 }}>{icon}</div>
    <div>
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{label}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-mute)', marginTop: 2 }}>{sub}</div>
    </div>
  </div>
);

const AffilRow = ({ label, sub }) => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      gap: 14,
      paddingBottom: 12,
      borderBottom: '1px dashed var(--rule)',
    }}
  >
    <div
      style={{
        width: 32,
        height: 32,
        border: '1px solid var(--ink-soft)',
        borderRadius: '50%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 13,
        color: 'var(--ink-soft)',
        fontFamily: 'var(--f-display)',
        fontWeight: 600,
        flexShrink: 0,
      }}
    >
      ★
    </div>
    <div>
      <div style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 1 }}>{sub}</div>
    </div>
  </div>
);

// GUIDE / RESOURCES
const Guide = () => {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState('');

  const validateEmail = () => {
    if (!email.trim()) {
      setError('Please enter your email address');
      return false;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError('Please enter a valid email address');
      return false;
    }
    return true;
  };
  return (
    <section
      id='guide'
      style={{
        padding: '90px 0',
        background: 'var(--ink)',
        color: 'var(--paper)',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* subtle topo lines in sage */}
      <div style={{ position: 'absolute', right: -100, top: -40, opacity: 0.25 }}>
        <TopoLines w={900} h={360} color='#B5BFA2' opacity={1} />
      </div>
      <div className='container' style={{ position: 'relative', zIndex: 2 }}>
        <div
          className='guide-grid'
          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}
        >
          <div style={{ position: 'relative' }}>
            {/* the book mockup */}
            <div
              style={{
                aspectRatio: '3/4',
                maxWidth: 340,
                margin: '0 auto',
                background: 'var(--paper)',
                color: 'var(--ink)',
                padding: '44px 32px',
                position: 'relative',
                boxShadow: '14px 14px 0 rgba(122,137,104,0.3), 22px 22px 60px rgba(0,0,0,0.3)',
                transform: 'rotate(-3deg)',
                border: '1px solid rgba(58,46,36,0.2)',
              }}
            >
              <div className='smallcaps' style={{ color: 'var(--terra-dark)', marginBottom: 14 }}>
                A Plain-English Guide
              </div>
              <div
                className='display'
                style={{
                  fontSize: 30,
                  lineHeight: 1.05,
                  fontWeight: 500,
                  marginBottom: 18,
                  letterSpacing: '-0.01em',
                }}
              >
                What Your Mineral Rights Are <span className='serif-italic'>Really</span> Worth
              </div>
              <DrawnRule width={80} color='var(--terra)' />
              <div
                style={{
                  marginTop: 28,
                  fontFamily: 'var(--f-serif)',
                  fontStyle: 'italic',
                  fontSize: 15,
                  color: 'var(--ink-soft)',
                }}
              >
                A 24-page guide for landowners & heirs — with worksheets, red flags, and a
                fair-offer checklist.
              </div>
              <div
                style={{
                  position: 'absolute',
                  bottom: 32,
                  left: 32,
                  right: 32,
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'flex-end',
                }}
              >
                <LogoMountains w={80} h={28} />
                <div
                  style={{
                    fontSize: 11,
                    color: 'var(--ink-mute)',
                    letterSpacing: '0.1em',
                    textTransform: 'uppercase',
                  }}
                >
                  2026 Edition
                </div>
              </div>
            </div>
          </div>

          <div>
            <SectionLabel color='var(--terra)'>Free resource</SectionLabel>
            <h2
              className='display'
              style={{
                fontSize: 'clamp(32px, 3.6vw, 48px)',
                lineHeight: 1.1,
                margin: '0 0 20px',
                fontWeight: 500,
                color: 'var(--paper)',
              }}
            >
              Before you sell to anyone, read this.
            </h2>
            <p
              style={{
                fontFamily: 'var(--f-serif)',
                fontSize: 18,
                lineHeight: 1.6,
                margin: '0 0 26px',
                color: 'rgba(244,239,230,0.85)',
              }}
            >
              Our guide walks you through exactly how mineral rights are valued, how to spot a
              lowball offer, and the seven questions every landowner should ask before signing
              anything — ours included.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px' }}>
              {[
                'How production, location, and operator affect value',
                'Red flags in "we buy mineral rights" letters',
                'A worksheet for calculating your monthly royalty',
                'The seven questions to ask any buyer',
              ].map((t) => (
                <li
                  key={t}
                  style={{
                    display: 'flex',
                    gap: 12,
                    marginBottom: 12,
                    fontSize: 15,
                    color: 'rgba(244,239,230,0.9)',
                  }}
                >
                  <span style={{ color: 'var(--terra)', fontWeight: 700 }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>

            <form
              onSubmit={(e) => {
                e.preventDefault();
                if (validateEmail()) setSent(true);
              }}
              style={{ maxWidth: 480 }}
            >
              <div style={{ display: 'flex', gap: 10, alignItems: 'stretch' }}>
                <input
                  type='email'
                  value={email}
                  disabled={sent}
                  onChange={(e) => {
                    setEmail(e.target.value);
                    if (error) setError('');
                  }}
                  placeholder='you@email.com'
                  style={{
                    flex: 1,
                    padding: '14px 16px',
                    background: 'rgba(244,239,230,0.08)',
                    color: 'var(--paper)',
                    border: error ? '1px solid var(--terra)' : '1px solid rgba(244,239,230,0.25)',
                    borderRadius: 2,
                    outline: 'none',
                    fontSize: 15,
                    opacity: sent ? 0.6 : 1,
                  }}
                />
                <button
                  type='submit'
                  disabled={sent}
                  style={{
                    padding: '14px 22px',
                    background: sent ? 'var(--sage)' : 'var(--terra)',
                    color: 'var(--ink)',
                    border: 'none',
                    borderRadius: 2,
                    fontSize: 13,
                    fontWeight: 700,
                    letterSpacing: '0.12em',
                    textTransform: 'uppercase',
                    fontFamily: 'var(--f-body)',
                    cursor: sent ? 'default' : 'pointer',
                  }}
                >
                  {sent ? 'Sent' : 'Send it'}
                </button>
              </div>
              {error && <div style={{ fontSize: 12, color: 'var(--terra)', marginTop: 8 }}>{error}</div>}
              {sent && <div style={{ fontSize: 14, color: '#15803d', marginTop: 12, padding: '14px 18px', background: 'rgba(34, 197, 94, 0.2)', border: '1px solid #22c55e', borderRadius: 2, fontWeight: 500 }}>Thanks for reaching out. We'll give you a call soon!</div>}
            </form>
            {!sent && <div style={{ fontSize: 12, color: 'rgba(244,239,230,0.55)', marginTop: 12 }}>
              No spam. We'll send the guide and maybe one follow-up. That's it.
            </div>}
          </div>
        </div>
      </div>
    </section>
  );
};

// FAQ
const FAQ = () => {
  const items = [
    {
      q: 'What are mineral rights?',
      a: "The ownership of rights to minerals, including oil and gas, contained in a tract of land. You can own those minerals even if you don't own the land above them. If you are receiving royalty checks in the mail, you almost certainly own mineral rights.",
    },
    {
      q: 'I inherited these. Do I have to sell?',
      a: 'Absolutely not. A lot of families hold onto mineral interests for generations, and that can be the right call. My job is to give you an honest picture of what yours are worth today, so you can make that decision with real information.',
    },
    {
      q: "Is the valuation really free? What's the catch?",
      a: "Truly free. No fees, no strings, no obligation. I make money when we find minerals worth purchasing, not by charging you to find out what yours are worth. If the offer isn't right for you, we part as friends and you keep all the information I gave you.",
    },
    {
      q: 'How do you figure out what my rights are worth?',
      a: 'We look up your specific property using public records. We check whether there is active production, what the wells nearby are doing, and what similar mineral interests in your county have sold for recently. Then we write up a number and explain exactly how we got there.',
    },
    {
      q: 'How long does the whole thing take?',
      a: 'Timelines vary by deal, but a typical mineral rights transaction runs 35–45 days from signed agreement to funds in your account. Most of that is title work and deed preparation, not waiting on decisions.',
    },
    {
      q: 'I only have a small mineral rights property. Is it worth your time?',
      a: 'Yes, absolutely. Small mineral interests, even those with no current production still have real value and real buyers. If it is worth your time to ask, it is worth mine to look into it. I would rather give you a straight answer than have you wonder.',
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section
      id='faq'
      style={{
        padding: '100px 0 90px',
        background: 'var(--paper-warm)',
        borderTop: '1px solid var(--rule)',
      }}
    >
      <div className='container'>
        <div
          className='faq-grid'
          style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}
        >
          <div className='faq-sticky' style={{ position: 'sticky', top: 40, alignSelf: 'start' }}>
            <SectionLabel color='var(--sage-dark)'>Frequently Asked</SectionLabel>
            <h2
              className='display'
              style={{
                fontSize: 'clamp(34px, 3.8vw, 52px)',
                lineHeight: 1.05,
                fontWeight: 500,
                margin: '0 0 20px',
                letterSpacing: '-0.01em',
              }}
            >
              The questions folks always ask us.
            </h2>
            <p
              style={{
                fontFamily: 'var(--f-serif)',
                fontSize: 17,
                lineHeight: 1.6,
                color: 'var(--ink-soft)',
                margin: '0 0 22px',
              }}
            >
              If you don't see your question here, pick up the phone and ask. We genuinely don't
              mind.
            </p>
            <a
              href='tel:+13612106843'
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 10,
                textDecoration: 'none',
                color: 'var(--ink)',
                borderBottom: '1.5px solid var(--terra)',
                paddingBottom: 3,
                fontWeight: 600,
                fontSize: 16,
              }}
            >
              (361) 210-6843 <span style={{ color: 'var(--terra-dark)' }}>→</span>
            </a>
          </div>
          <div>
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: '1px solid var(--rule)' }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%',
                      textAlign: 'left',
                      background: 'transparent',
                      border: 'none',
                      padding: '24px 0',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      gap: 24,
                      color: 'var(--ink)',
                      cursor: 'pointer',
                    }}
                  >
                    <span
                      style={{
                        fontFamily: 'var(--f-display)',
                        fontSize: 22,
                        fontWeight: 500,
                        letterSpacing: '-0.005em',
                      }}
                    >
                      {it.q}
                    </span>
                    <span
                      style={{
                        flexShrink: 0,
                        width: 32,
                        height: 32,
                        border: '1px solid var(--ink-soft)',
                        borderRadius: '50%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: 18,
                        transition: 'transform 0.3s',
                        color: 'var(--ink)',
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                      }}
                    >
                      +
                    </span>
                  </button>
                  <div
                    style={{
                      maxHeight: isOpen ? 400 : 0,
                      overflow: 'hidden',
                      transition: 'max-height 0.35s ease',
                    }}
                  >
                    <div
                      style={{
                        padding: '0 0 24px',
                        maxWidth: 640,
                        fontSize: 16,
                        lineHeight: 1.65,
                        color: 'var(--ink-soft)',
                        fontFamily: 'var(--f-serif)',
                      }}
                    >
                      {it.a}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// FINAL CTA
const FinalCTA = () => (
  <section id='cta' style={{ padding: '100px 0 120px', position: 'relative' }}>
    <div className='container'>
      <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto 50px' }}>
        <SectionLabel>Ready when you are</SectionLabel>
        <h2
          className='display'
          style={{
            fontSize: 'clamp(40px, 5vw, 68px)',
            lineHeight: 1.02,
            fontWeight: 500,
            margin: '0 0 24px',
            letterSpacing: '-0.015em',
          }}
        >
          Find out what your
          <span className='serif-italic' style={{ fontWeight: 500 }}>
            {' '}
            minerals{' '}
          </span>
          are worth.
        </h2>
        <p
          style={{
            fontFamily: 'var(--f-serif)',
            fontSize: 20,
            lineHeight: 1.5,
            color: 'var(--ink-soft)',
            margin: 0,
          }}
        >
          Free, honest valuation. No obligation. No pressure. Just a real conversation with real
          people.
        </p>
      </div>

      <div
        className='final-cta-card'
        style={{
          maxWidth: 880,
          margin: '0 auto',
          background: 'var(--paper-warm)',
          border: '1px solid rgba(58,46,36,0.2)',
          padding: '40px 44px',
          position: 'relative',
          boxShadow: '8px 8px 0 rgba(58,46,36,0.08)',
        }}
      >
        <div
          className='hand-accent'
          style={{
            position: 'absolute',
            top: -30,
            right: -20,
            fontFamily: 'var(--f-hand)',
            fontSize: 28,
            color: 'var(--terra-dark)',
            transform: 'rotate(6deg)',
            whiteSpace: 'nowrap',
          }}
        >
          {/* takes 30 seconds
          <DrawnArrow size={60} color='var(--terra-dark)' /> */}
        </div>
        <LeadForm layout='stacked' />
      </div>

      <div
        style={{
          textAlign: 'center',
          marginTop: 36,
          display: 'flex',
          justifyContent: 'center',
          gap: 26,
          flexWrap: 'wrap',
          color: 'var(--ink-mute)',
          fontSize: 14,
        }}
      >
        <span>
          Prefer to talk? Call{' '}
          <a
            href='tel:+13612106843'
            style={{
              color: 'var(--ink)',
              fontWeight: 600,
              borderBottom: '1px solid var(--terra)',
              textDecoration: 'none',
            }}
          >
            (361) 210-6843
          </a>
        </span>
        <span>·</span>
        {/* <span>Mon–Fri 8a–6p CT</span> */}
        {/* <span>·</span> */}
        <span>
          <a href='mailto:gabe@longhornminerals.com'>gabe@longhornminerals.com</a>
        </span>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer
    style={{
      background: 'var(--ink)',
      color: 'rgba(244,239,230,0.8)',
      padding: '60px 0 40px',
      position: 'relative',
    }}
  >
    <div className='container'>
      <div
        className='footer-grid'
        style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 50,
          alignItems: 'start',
        }}
      >
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            {/* <div
              style={{
                width: 42,
                height: 42,
                borderRadius: '50%',
                background: 'var(--paper)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontFamily: 'var(--f-display)',
                fontSize: 20,
                color: 'var(--ink)',
                fontWeight: 600,
              }}
            >
              L
            </div> */}
            {/* <div>
              <div
                className='display'
                style={{
                  fontSize: 20,
                  color: 'var(--paper)',
                  letterSpacing: '0.02em',
                  fontWeight: 500,
                }}
              >
                LONGHORN
              </div>
              <div className='smallcaps' style={{ fontSize: 9, color: 'var(--sage-soft)' }}>
                Minerals
              </div>
            </div> */}
          </div>
          {/* <p
            style={{
              fontFamily: 'var(--f-serif)',
              fontStyle: 'italic',
              fontSize: 16,
              margin: '0 0 20px',
              color: 'rgba(244,239,230,0.7)',
              maxWidth: 320,
            }}
          >
            Good people. Strong land. Real opportunity.
          </p> */}
          <div style={{ fontSize: 13, lineHeight: 1.7 }}>
            5900 Balcones Drive Ste 100
            <br />
            Austin, TX 78731
          </div>
        </div>
        <FooterCol title='Company' links={['Our process']} />
        <FooterCol title='Resources' links={['FAQ']} />
        <FooterCol
          title='Contact'
          links={[
            '(361) 210-6843',
            'gabe@longhornminerals.com',
            // 'Request valuation',
            // 'Schedule a call',
          ]}
        />
      </div>
      <div
        className='footer-bottom'
        style={{
          borderTop: '1px solid rgba(244,239,230,0.15)',
          marginTop: 50,
          paddingTop: 24,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: 12,
          color: 'rgba(244,239,230,0.5)',
          flexWrap: 'wrap',
          gap: 10,
        }}
      >
        <div>© {new Date().getFullYear()} Longhorn Mineral Partners LLC</div>
        {/* <div style={{ display: 'flex', gap: 20 }}>
          <a href='#' style={{ color: 'inherit', textDecoration: 'none' }}>
            Privacy
          </a>
          <a href='#' style={{ color: 'inherit', textDecoration: 'none' }}>
            Terms
          </a>
          <a href='#' style={{ color: 'inherit', textDecoration: 'none' }}>
            BBB Profile
          </a>
        </div> */}
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, links }) => {
  const getHref = (link) => {
    if (link.includes('@')) return `mailto:${link}`;
    if (link.match(/^\(\d{3}\)/)) return `tel:+1${link.replace(/\D/g, '')}`;
    if (link === 'FAQ') return '#faq';
    if (link === 'Our process') return '#how';
    return '#';
  };
  return (
    <div>
      <div className='smallcaps' style={{ color: 'var(--sage-soft)', marginBottom: 16 }}>
        {title}
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
        {links.map((l) => (
          <li key={l} style={{ marginBottom: 10, fontSize: 14 }}>
            <a href={getHref(l)} style={{ color: 'inherit', textDecoration: 'none' }}>
              {l}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

// WHEN SELLING MAKES SENSE
const WhenToSell = () => {
  const reasons = [
    'Wanting to make a big purchase',
    'Simplifying an estate or family planning',
    'Paying off debt or a major expense',
    'Frustration with unpredictable royalty checks',
    // 'Wanting a stable investment instead of a declining one',
  ];
  return (
    <section
      style={{
        padding: '100px 0 90px',
        background: 'var(--paper)',
        borderTop: '1px solid var(--rule)',
      }}
    >
      <div className='container'>
        <div
          className='team-grid'
          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}
        >
          {/* LEFT — the hard truth */}
          <div>
            <SectionLabel color='var(--terra-dark)'>The part most owners never hear</SectionLabel>
            <h2
              className='display'
              style={{
                fontSize: 'clamp(34px, 3.8vw, 52px)',
                lineHeight: 1.06,
                fontWeight: 500,
                margin: '0 0 28px',
                letterSpacing: '-0.01em',
              }}
            >
              Your mineral rights may be worth more right now than they ever will be again.
            </h2>
            <div
              style={{
                fontFamily: 'var(--f-serif)',
                fontSize: 18,
                lineHeight: 1.65,
                color: 'var(--ink)',
                margin: '0 0 28px',
              }}
            >
              <p style={{ margin: '0 0 14px' }}>
                Oil and gas wells decline. Production slows. Operators move crews to other sites.
                The economics of your property change every year and sometimes every month.
              </p>
              <p style={{ margin: '0 0 14px' }}>
                This means the mineral rights you hold today might be at peak value right now, and
                that's exactly why an honest evaluation matters before you decide anything.
              </p>
              {/* <p style={{ margin: 0, color: 'var(--ink-soft)' }}>
                Most people have no idea which one applies to them. That's exactly why an honest
                evaluation matters — before you decide anything.
              </p> */}
            </div>
            {/* <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div
                style={{
                  padding: '20px 22px',
                  background: 'var(--paper-warm)',
                  border: '1px solid var(--rule)',
                }}
              >
                <div
                  style={{
                    fontFamily: 'var(--f-display)',
                    fontSize: 17,
                    fontWeight: 500,
                    marginBottom: 8,
                    color: 'var(--sage-dark)',
                  }}
                >
                  At peak value right now
                </div>
                <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                  Wells are actively being drilled nearby, the operator is investing, and buyers are paying strong
                  prices in your area.
                </div>
              </div>
              <div
                style={{
                  padding: '20px 22px',
                  background: 'var(--paper-dark)',
                  border: '1px solid var(--rule)',
                }}
              >
                <div
                  style={{
                    fontFamily: 'var(--f-display)',
                    fontSize: 17,
                    fontWeight: 500,
                    marginBottom: 8,
                    color: 'var(--terra-dark)',
                  }}
                >
                  Slowly losing value
                </div>
                <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
                  The wells in your area are older, the operator has moved on, and fewer buyers are
                  interested each year.
                </div>
              </div>
            </div> */}
          </div>

          {/* RIGHT — when selling makes sense */}
          <div>
            <div
              style={{
                background: 'var(--ink)',
                color: 'var(--paper)',
                padding: '36px 36px 32px',
                marginBottom: 28,
                position: 'relative',
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  top: -1,
                  left: 36,
                  right: 36,
                  height: 3,
                  background: 'var(--terra)',
                }}
              ></div>
              <div className='smallcaps' style={{ color: 'var(--terra)', marginBottom: 14 }}>
                When selling starts to make sense
              </div>
              <div
                className='display'
                style={{
                  fontSize: 24,
                  fontWeight: 500,
                  lineHeight: 1.15,
                  marginBottom: 20,
                  letterSpacing: '-0.01em',
                }}
              >
                It's about choosing certainty over guesswork.
              </div>
              <p
                style={{
                  fontFamily: 'var(--f-serif)',
                  fontSize: 17,
                  lineHeight: 1.6,
                  color: 'rgba(244,239,230,0.85)',
                  margin: '0 0 24px',
                }}
              >
                People call us when a lump sum payment would simply do more good than a small,
                unpredictable check each month. There is no wrong reason to find out.
              </p>
              <div style={{ display: 'grid', gap: 12 }}>
                {reasons.map((r) => (
                  <div key={r} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span
                      style={{ color: 'var(--terra)', fontSize: 8, paddingTop: 6, flexShrink: 0 }}
                    >
                      ◆
                    </span>
                    <span style={{ fontSize: 15, color: 'rgba(244,239,230,0.9)', lineHeight: 1.5 }}>
                      {r}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* <div
              style={{
                padding: '24px 28px',
                border: '1px solid var(--rule)',
                background: 'var(--paper-warm)',
                marginBottom: 22,
              }}
            >
              <div
                className='serif-italic'
                style={{ fontSize: 20, lineHeight: 1.4, color: 'var(--ink)', marginBottom: 14 }}
              >
                "You don't need a big reason. Sometimes you just want clarity — and a clean slate."
              </div>
              <div
                style={{
                  fontSize: 12,
                  color: 'var(--ink-mute)',
                  fontWeight: 600,
                  letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                }}
              >
                Longhorn Minerals · Texas-based
              </div>
            </div> */}

            <a
              href='#cta'
              style={{
                display: 'block',
                padding: '15px 32px',
                textAlign: 'center',
                background: 'var(--ink)',
                color: 'var(--paper)',
                textDecoration: 'none',
                fontSize: 13,
                fontWeight: 700,
                letterSpacing: '0.14em',
                textTransform: 'uppercase',
                fontFamily: 'var(--f-body)',
              }}
            >
              Get in touch →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks, Team, WhenToSell, Guide, FAQ, FinalCTA, Footer });
