(() => {
const { Button, Badge, Card, Callout, SectionHeading, StatBlock, FactCard, SourceNote, Checklist, ClaimList } = window.JudithHorvathNonprofitDesignSystem_c97fb3;

const FACTS = [
  { n: 'Fact 1', t: 'The law is brand new', d: 'HB 170 was signed June 24, 2026 and takes effect September 23, 2026. As of August 28, 2026 the law is not yet in effect, the implementing regulations required under it have not been adopted, and no provision of HB 170 has ever been interpreted by a court.', x: 'Am. Sub. H.B. 170 · EX-25' },
  { n: 'Fact 2', t: 'Zero Ohio operating history', d: 'There are zero operating Class VI wells in Ohio, and almost none anywhere: as of early 2026, only four federally permitted Class VI wells were operating nationwide, in Illinois and Indiana. As of August 28, 2026, Ohio does not hold Class VI primacy. Under HB 175 (2022), ODNR was directed to begin seeking primacy from U.S. EPA, and unless and until EPA grants it, Class VI permits for Ohio wells are issued by U.S. EPA Region 5 in Chicago. Six states hold Class VI primacy: Arizona, Louisiana, North Dakota, Texas, West Virginia, and Wyoming. There is no Ohio track record against which to judge these leases.', x: 'CRS R48033 · EX-55 · World Oil, Jun 3, 2026 · EX-56' },
  { n: 'Fact 3', t: '70% of your neighbors can commit your land', d: 'You own your pore space unless it has been expressly conveyed away. Once an operator holds the consent of owners of 70% of the pore space in an area, it can force in the remaining 30%, including you, whether or not you ever signed anything.', x: 'Am. Sub. H.B. 170 · EX-25' },
  { n: 'Fact 4', t: 'Recovery is capped', d: 'HB 170 limits damage claims to diminution in property value, bars punitive damages, and shifts liability to the State of Ohio a minimum of 50 years after final injection.', x: 'Am. Sub. H.B. 170 · EX-25' },
  { n: 'Fact 5', t: 'The first offer is an opening bid', d: 'There is no established market for pore-space leases in Ohio: no comparable transactions, no standard royalty structure. The first offer in a leasing campaign is historically the lowest, and NDAs prevent the price discovery that would reveal it. The economics of these projects depend heavily on a federal tax credit, and federal carbon policy moved significantly in 2026. A pore-space lease that runs 50 years or more is being signed into an unsettled (as of August 2026) policy environment.', x: 'When a Landman Knocks · EX-45' },
];

const CHECK = [
  'Do not sign the NDA; request terms in writing instead',
  'Do not sign under deadline pressure',
  'Identify the real party, and verify it with the Ohio Secretary of State',
  'Talk to your neighbors before signing anything',
  'Retain an oil, gas, and mineral attorney before signing, not after',
  'Understand exactly what is being conveyed: pore space, surface access, easements',
  'Ask about mortgage, title, and insurance effects',
  'Remember that signing quickly helps reach the 70% that binds your neighbors',
];

function LandownerScreen({ setPage }) {
  return (
    <>
      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', gap: 'var(--space-2)', flexWrap: 'wrap', marginBottom: 'var(--space-5)' }}>
              <Badge tone="clay">For landowners</Badge>
              <Badge tone="record" mono>Current as of Aug 28, 2026</Badge>
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-display-2)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', lineHeight: 'var(--leading-tight)', margin: '0 0 var(--space-6)' }}>
              When a Landman Knocks
            </h1>
            <p style={{ fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', maxWidth: '34rem' }}>
              As of August 28, 2026, no Class VI permit application has been filed, and HB 170 does not take effect until September 23, 2026. So why is someone at your door asking you to sign?
            </p>
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', maxWidth: '34rem' }}>
              A “landman” works for the company seeking your signature and is paid based on the deals he closes. He is not a government official, and he owes you no fiduciary duty.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Checklist heading="Before you sign anything" items={CHECK} />
            <Button variant="secondary" href="docs/when-a-landman-knocks-one-pager.html" target="_blank" rel="noopener" trailingIcon={<span aria-hidden="true">&rarr;</span>}>Print the landowner sheet</Button>
          </div>
        </div>
      </Band>

      <Band tone="sunken">
        <SectionHeading number="01" eyebrow="Five facts to have in hand" title="What is actually settled, and what is not" />
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
          {FACTS.map((ft, i) => (
            <Card key={ft.n} accentColor={i === 4 ? 'var(--clay-500)' : i % 2 === 0 ? 'var(--wheat-500)' : 'var(--sky-500)'}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--clay-600)', letterSpacing: '0.06em' }}>{ft.n}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h3)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', lineHeight: 'var(--leading-snug)', margin: 'var(--space-3) 0 var(--space-3)' }}>{ft.t}</h3>
              <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>{ft.d}</p>
              <div style={{ marginTop: 'var(--space-4)', paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border-subtle)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{ft.x}</div>
            </Card>
          ))}
        </div>
      </Band>

      <Band>
        <div className="fg-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-16)', alignItems: 'start' }}>
          <div>
            <SectionHeading number="02" eyebrow="About that NDA" title="You are not required to sign one in order to hear an offer." />
            <p style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', marginTop: 'var(--space-6)' }}>
              An NDA presented before lease terms benefits the operator, not you. You may decline it and request all terms in writing. An NDA should never prevent you from consulting your own attorney; if one purports to, do not sign it.
            </p>
            <Callout tone="green" label="Our standing rule" style={{ marginTop: 'var(--space-8)' }}>
              We never ask anyone to break a confidentiality agreement, and we do not target or shame landowners who have signed. Many signed without full information, and anyone reconsidering is welcomed without judgment.
            </Callout>
          </div>
          <div>
            <SectionHeading number="03" eyebrow="The 70/30 rule, in plain English" title="It is not one landowner, one vote."
              lede={<span>The one-page version is <a href="docs/70-30-rule-one-pager.html" target="_blank" rel="noopener">here, ready to print</a>.</span>} />
            <div style={{ display: 'grid', gap: 'var(--space-4)', marginTop: 'var(--space-8)' }}>
              <FactCard heading="How “consent” is really counted" source="Am. Sub. H.B. 170 · EX-46">
                Consent is counted in acres of pore space, not in households, votes, or signatures. One 400-acre farm counts 40 times more than a 10-acre homestead.
              </FactCard>
              <FactCard accent="var(--clay-500)" heading="A 1,000-acre example" source="The 70/30 Rule in Plain English · EX-46">
                Three large farms sign leases: 400 plus 200 plus 100 acres equals 700 of 1,000 acres, and the 70% threshold is met. The other 30 property owners, holding 300 acres of homes and small farms, all decline. The result: three owners outvote 30. The company may file to consolidate the whole 1,000 acres, with the 30 non-signing owners pooled in at a price set by the state rather than negotiated by them.
              </FactCard>
              <FactCard accent="var(--sky-500)" heading="Who draws the boundary?" source="ORC 1509.76 · EX-44">
                The company does, using its own permit application and its own modeling. Regulators review the map, but the company draws it first, which means the company effectively chooses whose acres count toward the 70% and whose consent is never needed at all. Under ORC 1509.76, the chief of ODNR notifies pore-space owners within 30 days of deeming the consolidation application complete, and that application is filed only after the 70% is already assembled. The letter is not an invitation to decide. It is notification of a proceeding whose main question is already framed.
              </FactCard>
            </div>
          </div>
        </div>
      </Band>

      <Band tone="dark" tight>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-8)', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h1)', fontWeight: 'var(--weight-medium)', letterSpacing: 'var(--tracking-display)', color: 'var(--cream-50)', margin: '0 0 var(--space-3)' }}>
              Approached about a lease?
            </h2>
            <p style={{ fontSize: 'var(--text-body)', color: 'var(--green-200)', margin: 0, maxWidth: '36rem' }}>
              If you are not bound by a confidentiality agreement, we welcome a copy of your agreement, shared with Fairfield Grounded in confidence, so that we can better understand what is being offered in this county.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap' }}>
            <Button variant="inverse" size="lg" onClick={() => setPage('involved')}>Report a tip</Button>
            <Button variant="quiet" size="lg" style={{ color: 'var(--wheat-400)' }} onClick={() => setPage('ccs')}>What the law requires of this project</Button>
          </div>
        </div>
      </Band>
    </>
  );
}

Object.assign(window, { LandownerScreen });
})();
