/* global React, ReactDOM */
const { useState, useEffect } = React;
const { Logo, Header, Footer } = window;

// ============ Hero ============
function Hero({ tweaks }) {
  return (
    <section className="hero" id="home">
      <div className="hero-bg" />
      <div className="hero-bg-photo">
        <span>[ HERO PHOTO · oilfield / severe service installation · 1920×1080 — client to provide ]</span>
      </div>
      <div className="container-wide hero-content">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">Industrial Equipment Supplier</div>
            <h1 className="hero-headline">
              Equipment built for<br/>
              <em>severe service.</em>
            </h1>
            <p className="hero-sub">
              Johnson Resources is a trusted supplier of valves, actuators, air regulators, flares, and combustors — built for flow control, pressure management, OOOOC compliance, and automation across the oil and gas industry.
            </p>
            <div className="hero-actions">
              <a href="#contact" className="btn btn-primary">
                Request a Quote <span className="btn-arrow" />
              </a>
              <a href="Johnson Resources Products.html" className="btn btn-ghost">
                View Products <span className="btn-arrow" />
              </a>
            </div>
          </div>
          <aside className="hero-aside">
            <div className="hero-aside-label">// Specialties</div>
            <div className="hero-stats">
              <div className="hero-stat">
                <div className="hero-stat-value">5<span className="unit">+</span></div>
                <div className="hero-stat-label">Product categories supplied</div>
              </div>
              <div className="hero-stat">
                <div className="hero-stat-value">OOOOC<span className="unit">.</span></div>
                <div className="hero-stat-label">Compliance-focused equipment</div>
              </div>
              <div className="hero-stat">
                <div className="hero-stat-value">Lafayette<span className="unit">.</span></div>
                <div className="hero-stat-label">Serving oil, gas & related sectors</div>
              </div>
            </div>
          </aside>
        </div>
      </div>
      <div className="hero-marquee">
        <div className="marquee-track">
          <span>Severe service valves</span><span>Actuators</span><span>Air regulators</span><span>Flares</span>
          <span>Combustors</span><span>Flow control</span><span>Pressure management</span><span>OOOOC compliance</span><span>Automation</span>
          <span>Severe service valves</span><span>Actuators</span><span>Air regulators</span><span>Flares</span>
          <span>Combustors</span><span>Flow control</span><span>Pressure management</span><span>OOOOC compliance</span><span>Automation</span>
        </div>
      </div>
    </section>
  );
}

// ============ About / Who Are We ============
function About() {
  return (
    <section className="section-bg-raised" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-image">
            <span className="about-image-tag">Field operations</span>
            <span className="about-image-label">[ photo · severe service install / field crew · 4:5 ]</span>
          </div>
          <div className="about-copy">
            <span className="sec-num"><span className="red">01</span> / Who we are</span>
            <div className="eyebrow">Who Are We?</div>
            <h2>A trusted supplier for severe service applications.</h2>
            <p style={{ marginTop: 28 }}>
              Johnson Resources, LLC is a trusted supplier of high-performance industrial equipment for flow control, pressure management, OOOOC compliance, and automation. We specialize in severe service valves, actuators, air regulators, flares, combustors, and other related products.
            </p>
            <p style={{ marginTop: 18 }}>
              Our solutions serve the oil and gas industry and related sectors — helping customers operate safely and efficiently in the most demanding conditions. Backed by top manufacturers and real-world expertise, we deliver reliable products and expert support for both standard and severe applications.
            </p>
            <div className="why-box">
              <h3>Committed to exceptional service.</h3>
              <p>
                We go the extra mile to ensure fast response times, expert guidance, and unwavering support so your operations stay running smoothly. Contact us today to experience the difference.
              </p>
              <a href="#contact" className="btn">
                Contact Our Team <span className="btn-arrow" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ What We Do ============
function WhatWeDo() {
  const cards = [
    {
      num: "01",
      title: "Severe Service Valves & Actuators",
      body: "Severe service valves and actuation equipment built for high-pressure, high-temperature, and demanding flow-control duties across upstream and midstream operations.",
      tag: "Flow control",
    },
    {
      num: "02",
      title: "Air Regulators, Flares & Combustors",
      body: "Pressure management, flare and combustor equipment — specified to keep operations safely within OOOOC compliance and process spec.",
      tag: "Pressure & emissions",
    },
    {
      num: "03",
      title: "Application & Technical Support",
      body: "We work directly with customers and manufacturers on selection, sizing, and specifications so the right solution is applied from the start — for standard and severe applications alike.",
      tag: "Engineering",
    },
  ];
  return (
    <section id="what-we-do">
      <div className="container">
        <div className="work-header">
          <div>
            <span className="sec-num"><span className="red">02</span> / Capabilities</span>
            <div className="eyebrow">What We Do</div>
            <h2 style={{ marginTop: 8 }}>Three product groups, one job: get the right equipment in the right application.</h2>
          </div>
          <p>
            A focused line backed by top manufacturers and real-world expertise — for both standard and severe service work.
          </p>
        </div>
        <div className="work-grid">
          {cards.map((c) => (
            <div key={c.num} className="work-card">
              <div className="work-card-num">
                <span>{`/ ${c.num}`}</span>
                <span className="label">{c.tag}</span>
              </div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              <a href="Johnson Resources Products.html" className="work-card-link">Learn more</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Manufacturers ============
function Manufacturers() {
  const mfrs = [
    { name: "Hydroplex", tag: "Pumps · Valves" },
    { name: "Manufacturer 02", tag: "Actuation" },
    { name: "Manufacturer 03", tag: "Choke valves" },
    { name: "Manufacturer 04", tag: "Flow control" },
    { name: "Manufacturer 05", tag: "Fluid handling" },
    { name: "Manufacturer 06", tag: "Pumps" },
    { name: "Manufacturer 07", tag: "Valves" },
    { name: "Manufacturer 08", tag: "Equipment" },
  ];
  return (
    <section className="section-bg-raised" id="manufacturers">
      <div className="container">
        <div className="mfr-header">
          <div className="eyebrow">Trusted Partners</div>
          <h2>Manufacturers we represent.</h2>
          <p>
            A focused line card of manufacturers we know inside and out. Click any partner to see their products, applications, and request quotes.
          </p>
        </div>
        <div className="mfr-grid">
          {mfrs.map((m, i) => (
            <a key={i} className="mfr-cell" href="Johnson Resources Products.html">
              <div className="mfr-logo">{m.name}</div>
              <div className="mfr-tag">{m.tag}</div>
              <div className="mfr-cta">View →</div>
            </a>
          ))}
        </div>
        <div className="mfr-footer">
          <a href="Johnson Resources Products.html" className="btn btn-ghost">
            View All Products <span className="btn-arrow" />
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ Applications in the Field ============
function FieldApplications() {
  const apps = [
    {
      tag: "Severe service valve",
      caption: "High-pressure severe service valve installation",
      meta: "Upstream operation · Permian Basin",
      aspect: "portrait-tall",
    },
    {
      tag: "Combustor",
      caption: "Combustor commissioning for OOOOC compliance",
      meta: "Midstream facility · South Louisiana",
      aspect: "landscape",
    },
    {
      tag: "Actuator + valve",
      caption: "Pneumatic actuator and severe service valve package",
      meta: "Production site · Eagle Ford",
      aspect: "landscape",
    },
  ];
  return (
    <section id="applications-preview">
      <div className="container">
        <div className="field-header">
          <div>
            <span className="sec-num"><span className="red">03</span> / In the field</span>
            <div className="eyebrow">Applications</div>
            <h2 style={{ marginTop: 8 }}>Real equipment, real applications.</h2>
          </div>
          <p>
            From severe service valve installs to OOOOC-ready combustor packages — a look at the equipment we supply and where it goes to work.
          </p>
        </div>
        <div className="field-grid">
          <a className={`field-cell ${apps[0].aspect}`} href="#applications">
            <div className="field-photo">
              <span className="field-photo-tag">{apps[0].tag}</span>
              <span className="field-photo-label">[ field photo · 4:5 · client to provide ]</span>
            </div>
            <div className="field-cap">
              <h4>{apps[0].caption}</h4>
              <span className="field-meta">{apps[0].meta}</span>
            </div>
          </a>
          <div className="field-stack">
            <a className={`field-cell ${apps[1].aspect}`} href="#applications">
              <div className="field-photo">
                <span className="field-photo-tag">{apps[1].tag}</span>
                <span className="field-photo-label">[ field photo · 16:10 · client to provide ]</span>
              </div>
              <div className="field-cap">
                <h4>{apps[1].caption}</h4>
                <span className="field-meta">{apps[1].meta}</span>
              </div>
            </a>
            <a className={`field-cell ${apps[2].aspect}`} href="#applications">
              <div className="field-photo">
                <span className="field-photo-tag">{apps[2].tag}</span>
                <span className="field-photo-label">[ field photo · 16:10 · client to provide ]</span>
              </div>
              <div className="field-cap">
                <h4>{apps[2].caption}</h4>
                <span className="field-meta">{apps[2].meta}</span>
              </div>
            </a>
          </div>
        </div>
        <div className="field-footer">
          <a href="#applications" className="btn btn-ghost">
            View All Applications <span className="btn-arrow" />
          </a>
        </div>
      </div>
    </section>
  );
}

// ============ Final CTA ============
function FinalCTA() {
  return (
    <section className="final-cta" id="contact-cta">
      <div className="final-cta-inner">
        <span className="final-cta-photo-label">[ bg photo · field operation · full-bleed ]</span>
        <div className="container final-cta-content">
          <span className="sec-num"><span className="red">04</span> / Next step</span>
          <div className="eyebrow">Get in Touch</div>
          <h2>Need help specifying the <em>right equipment?</em></h2>
          <p>
            From severe service valves and actuators to flares and combustors — reach out and we'll get you to the right spec, manufacturer, and quote. Quickly.
          </p>
          <div className="final-cta-actions">
            <a href="#contact" className="btn btn-primary">Contact Us <span className="btn-arrow" /></a>
            <a href="#applications" className="btn btn-ghost">Request a Quote <span className="btn-arrow" /></a>
            <a href="Johnson Resources Products.html" className="btn btn-ghost">View Products <span className="btn-arrow" /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ App ============
function App() {
  return (
    <React.Fragment>
      <Header active="home" />
      <Hero />
      <About />
      <WhatWeDo />
      <Manufacturers />
      <FieldApplications />
      <FinalCTA />
      <Footer />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);