export default function NapaExplorationWebsite() {

const logoSrc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFoCAYAAAB65WHVAAAChElEQVR42u3RAQ0AAAjDMO5fNHIwQYw0kM2mCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4G8G0t0AAU65WLEAAAAASUVORK5CYII=";

const services = [

{

title: "Asset Acquisition",

description:

"We identify depleted and underperforming well assets with practical redevelopment potential and long-term upside.",

},

{

title: "Production Optimization",

description:

"We improve output through field diagnostics, artificial lift optimization, equipment upgrades, and targeted remediation.",

},

{

title: "Operational Turnarounds",

description:

"We restore neglected or suspended assets with disciplined execution, cost control, and field-driven decision-making.",

},

{

title: "Performance Reviews",

description:

"We evaluate production history, downtime drivers, infrastructure condition, and opportunities to increase recovery and economics.",

},

];

const pillars = [

"Disciplined asset selection",

"Hands-on field optimization",

"Lean cost structure",

"Corporate-grade reporting",

];

const metrics = [

{ value: "Depleted", label: "Assets evaluated for redevelopment potential" },

{ value: "Optimized", label: "Production-led operational strategy" },

{ value: "Efficient", label: "Lean execution with cost discipline" },

];

return (

<div className="min-h-screen bg-slate-950 text-white">

<section className="relative overflow-hidden border-b border-white/10">

<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-black" />

<div className="absolute left-0 top-0 h-72 w-72 rounded-full bg-amber-400/10 blur-3xl" />

<div className="absolute right-0 top-10 h-80 w-80 rounded-full bg-orange-500/10 blur-3xl" />

<div className="relative mx-auto max-w-7xl px-6 py-8 lg:px-10">

<nav className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-5 py-4 backdrop-blur">

<div className="flex items-center gap-4">

<img src={logoSrc} alt="Napa Exploration Inc. logo" className="h-14 w-14 rounded-xl object-contain bg-white/5 p-1" />

<div>

<div className="text-xl font-black tracking-[0.25em] text-white">NAPA</div>

<div className="text-xs uppercase tracking-[0.35em] text-slate-300">Exploration Inc.</div>

</div>

</div>

<div className="hidden gap-8 text-sm text-slate-200 md:flex">

<a href="#about" className="transition hover:text-amber-300">About</a>

<a href="#services" className="transition hover:text-amber-300">Services</a>

<a href="#approach" className="transition hover:text-amber-300">Approach</a>

<a href="#contact" className="transition hover:text-amber-300">Contact</a>

</div>

</nav>

<div className="grid items-center gap-12 py-16 lg:grid-cols-2 lg:py-24">

<div>

<div className="mb-5 inline-flex rounded-full border border-amber-400/30 bg-amber-400/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-amber-300">

Corporate Oil & Gas Optimization

</div>

<h1 className="max-w-3xl text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">

Revitalizing mature oilfield assets with disciplined production optimization.

</h1>

<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">

Napa Exploration Inc. acquires depleted and underperforming wells, then restores value through practical redevelopment, field diagnostics, and operational strategies designed to improve output and economics.

</p>

<div className="mt-8 flex flex-col gap-4 sm:flex-row">

<a

href="#contact"

className="rounded-2xl bg-amber-400 px-6 py-4 text-center font-semibold text-slate-950 shadow-2xl shadow-amber-500/20 transition hover:-translate-y-0.5"

>

Request a Consultation

</a>

<a

href="#services"

className="rounded-2xl border border-white/15 bg-white/5 px-6 py-4 text-center font-semibold text-white transition hover:bg-white/10"

>

View Services

</a>

</div>

</div>

<div className="relative">

<div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 shadow-2xl backdrop-blur">

<div className="mb-8 flex items-center gap-4 border-b border-white/10 pb-6">

<img src={logoSrc} alt="Napa logo" className="h-20 w-20 rounded-2xl object-contain bg-white/5 p-2" />

<div>

<div className="text-sm uppercase tracking-[0.3em] text-amber-300">Napa Exploration Inc.</div>

<div className="mt-1 text-2xl font-bold">Production Recovery Model</div>

</div>

</div>

<div className="grid gap-4 sm:grid-cols-3">

{metrics.map((metric) => (

<div key={metric.label} className="rounded-2xl border border-white/10 bg-slate-900/80 p-4">

<div className="text-2xl font-black text-amber-300">{metric.value}</div>

<div className="mt-2 text-sm leading-6 text-slate-300">{metric.label}</div>

</div>

))}

</div>

<div className="mt-6 rounded-2xl border border-white/10 bg-gradient-to-r from-slate-900 to-slate-800 p-5">

<div className="text-sm uppercase tracking-[0.25em] text-slate-400">Corporate focus</div>

<p className="mt-3 text-base leading-7 text-slate-200">

Acquire overlooked wells. Identify bottlenecks. Restore production. Improve asset performance.

</p>

</div>

</div>

</div>

</div>

</div>

</section>

<section id="about" className="mx-auto max-w-7xl px-6 py-20 lg:px-10">

<div className="grid gap-10 lg:grid-cols-[1.1fr_0.9fr]">

<div>

<div className="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">About Napa</div>

<h2 className="mt-4 text-3xl font-black sm:text-4xl">A corporate approach to mature asset redevelopment.</h2>

<p className="mt-6 max-w-3xl text-lg leading-8 text-slate-300">

Napa Exploration Inc. is an oil and gas optimization company focused on acquiring depleted or underperforming wells and unlocking value through disciplined field execution. We combine practical operations experience with a strong focus on efficiency, production recovery, and asset life extension.

</p>

<p className="mt-4 max-w-3xl text-lg leading-8 text-slate-300">

Our work is built on identifying the real causes of lost production, applying the right technical and operational solutions, and managing redevelopment with corporate-level accountability.

</p>

</div>

<div className="rounded-[2rem] border border-white/10 bg-white/5 p-8 backdrop-blur">

<div className="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">Core strengths</div>

<div className="mt-6 space-y-5">

{pillars.map((item) => (

<div key={item} className="flex items-start gap-3">

<div className="mt-1 h-3 w-3 rounded-full bg-amber-400" />

<p className="text-slate-200">{item}</p>

</div>

))}

</div>

</div>

</div>

</section>

<section id="services" className="bg-white/5 py-20">

<div className="mx-auto max-w-7xl px-6 lg:px-10">

<div className="max-w-3xl">

<div className="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">Services</div>

<h2 className="mt-4 text-3xl font-black sm:text-4xl">Corporate services for production growth.</h2>

<p className="mt-6 text-lg leading-8 text-slate-300">

We support acquisition analysis, production improvement, and operational turnarounds with a practical, asset-focused model.

</p>

</div>

<div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">

{services.map((service) => (

<div key={service.title} className="rounded-[2rem] border border-white/10 bg-slate-900/80 p-6 shadow-xl transition hover:-translate-y-1 hover:border-amber-300/30">

<div className="text-xl font-bold">{service.title}</div>

<p className="mt-4 leading-7 text-slate-300">{service.description}</p>

</div>

))}

</div>

</div>

</section>

<section id="approach" className="mx-auto max-w-7xl px-6 py-20 lg:px-10">

<div className="mb-10 max-w-3xl">

<div className="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">Approach</div>

<h2 className="mt-4 text-3xl font-black sm:text-4xl">A clear path from evaluation to performance.</h2>

</div>

<div className="grid gap-6 lg:grid-cols-3">

{[

{

step: "01",

title: "Evaluate",

text: "Review production history, infrastructure condition, and redevelopment economics to identify the right opportunities.",

},

{

step: "02",

title: "Optimize",

text: "Apply field diagnostics, lift optimization, equipment upgrades, and targeted interventions to remove bottlenecks.",

},

{

step: "03",

title: "Perform",

text: "Stabilize production, improve operating efficiency, and extend asset life through disciplined ongoing execution.",

},

].map((item) => (

<div key={item.step} className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/5 to-transparent p-8">

<div className="text-5xl font-black text-amber-400/80">{item.step}</div>

<h3 className="mt-5 text-2xl font-bold">{item.title}</h3>

<p className="mt-4 leading-7 text-slate-300">{item.text}</p>

</div>

))}

</div>

</section>

<section id="contact" className="pb-20">

<div className="mx-auto max-w-7xl px-6 lg:px-10">

<div className="rounded-[2rem] border border-white/10 bg-gradient-to-r from-amber-400 to-orange-500 p-[1px] shadow-2xl shadow-amber-500/10">

<div className="grid gap-8 rounded-[2rem] bg-slate-950 p-8 lg:grid-cols-2 lg:p-10">

<div>

<div className="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">Contact</div>

<h2 className="mt-4 text-3xl font-black sm:text-4xl">Discuss your next asset opportunity.</h2>

<p className="mt-5 max-w-xl text-lg leading-8 text-slate-300">

Whether you are evaluating a mature asset acquisition or seeking production improvement on an existing well portfolio, Napa Exploration Inc. is positioned to help.

</p>

</div>

<div className="rounded-[2rem] border border-white/10 bg-white/5 p-6">

<div className="space-y-4 text-slate-200">

<div>

<div className="text-sm uppercase tracking-[0.25em] text-slate-400">Company</div>

<div className="mt-1 text-lg font-semibold">Napa Exploration Inc.</div>

</div>

<div>

<div className="text-sm uppercase tracking-[0.25em] text-slate-400">Email</div>

<div className="mt-1 text-lg">info@napaexploration.com</div>

</div>

<div>

<div className="text-sm uppercase tracking-[0.25em] text-slate-400">Phone</div>

<div className="mt-1 text-lg">(000) 000-0000</div>

</div>

<div>

<div className="text-sm uppercase tracking-[0.25em] text-slate-400">Location</div>

<div className="mt-1 text-lg">Alberta, Canada</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

);

}