import React, { useState, useEffect, useCallback } from 'react';

import {

Zap,

Target,

GraduationCap,

ArrowRight,

CheckCircle2,

Menu,

ChevronDown,

AlertCircle,

RefreshCcw,

ShieldCheck,

} from 'lucide-react';

/**

* DNL DYNAMICS - ENTERPRISE GRADE FRONTEND

* Features: High-Level SEO, Bot Security, Cookie Compliance, and Performance Optimization.

const App = () => {

// --- UI State ---

const [isMenuOpen, setIsMenuOpen] = useState(false);

const [formSubmitted, setFormSubmitted] = useState(false);

const [isSubmitting, setIsSubmitting] = useState(false);

const [errorMessage, setErrorMessage] = useState("");

const [cookieConsent, setCookieConsent] = useState(false);

const [showCookieBanner, setShowCookieBanner] = useState(false);

// --- Security & Validation State ---

const [botTrap, setBotTrap] = useState(""); // Honeypot

const [loadTimestamp] = useState(Date.now()); // Bot-thwarting timer

const [formData, setFormData] = useState({

name: '',

email: '',

service: '',

message: ''

});

// --- Initialization: SEO & Privacy Check ---

useEffect(() => {

// 1. Dynamic SEO Injection (Meta & JSON-LD)

document.title = "DNL Dynamics | Smarter Systems. Better Results.";

const schemaData = {

"@context": "https://schema.org",

"@type": "ConsultingService",

"name": "DNL Dynamics",

"alternateName": "DNL Automation & Marketing",

"description": "Custom AI automation and growth marketing consultancy for high-performance SMBs.",

"url": window.location.href,

"logo": "https://dnl-dynamics.com/logo.png", // Replace with actual logo URL

"areaServed": "Global",

"serviceType": [

"Business Process Automation",

"AI Workflow Design",

"Performance Marketing",

"Executive AI Training"

"contactPoint": {

"@type": "ContactPoint",

"contactType": "customer service",

"email": "hello@dnldynamics.com"

}

};

const script = document.createElement('script');

script.type = 'application/ld+json';

script.innerHTML = JSON.stringify(schemaData);

document.head.appendChild(script);

// 2. Cookie Persistence Check

const hasConsented = localStorage.getItem('dnl_cookie_consent');

if (!hasConsented) {

setTimeout(() => setShowCookieBanner(true), 1500);

}

return () => {

document.head.removeChild(script);

};

}, []);

// --- Handlers ---

const handleInputChange = (e) => {

const { name, value } = e.target;

setFormData(prev => ({ ...prev, [name]: value }));

};

const acceptCookies = () => {

localStorage.setItem('dnl_cookie_consent', 'true');

setCookieConsent(true);

setShowCookieBanner(false);

};

const handleSubmit = async (e) => {

e.preventDefault();

// SECURITY LAYER 1: Honeypot Check (Bots usually fill every field)

if (botTrap !== "") {

console.error("Bot action detected.");

return;

}

// SECURITY LAYER 2: Timing Check (Human's don't fill forms in < 3 seconds)

const timeElapsed = (Date.now() - loadTimestamp) / 1000;

if (timeElapsed < 3) {

setErrorMessage("Please slow down. Rapid submissions are flagged for review.");

return;

}

// SECURITY LAYER 3: Email Validation

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(formData.email)) {

setErrorMessage("Please enter a valid business email address.");

return;

}

setIsSubmitting(true);

setErrorMessage("");

const SERVICE_ID = "service_jd4zlrc";

const TEMPLATE_ID = "template_hhiuhks";

const PUBLIC_KEY = "E4c2gwrZmAu45w22y";

const payload = {

service_id: SERVICE_ID,

template_id: TEMPLATE_ID,

user_id: PUBLIC_KEY,

template_params: {

from_name: formData.name,

from_email: formData.email,

interest: formData.service,

message: formData.message,

submission_time: new Date().toLocaleString(),

reply_to: formData.email

}

};

try {

const response = await fetch('https://api.emailjs.com/api/v1.0/email/send', {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(payload)

});

if (response.ok) {

setFormSubmitted(true);

} else {

const errorText = await response.text();

throw new Error(errorText || "Transmission error.");

}

} catch (err) {

setErrorMessage("System busy. Please try again or contact us via LinkedIn.");

} finally {

setIsSubmitting(false);

}

};

const scrollToSection = useCallback((id) => {

const element = document.getElementById(id);

if (element) {

element.scrollIntoView({ behavior: 'smooth' });

setIsMenuOpen(false);

}

}, []);

return (

{/* 1. Header Navigation */}

DNL <span className="text-[#E2FF00]">DYNAMICS</span>

</span>

</div>

<button onClick={() => scrollToSection('services')} className="text-xs font-black tracking-widest uppercase hover:text-[#E2FF00] transition-colors focus:outline-none focus:ring-1 focus:ring-[#E2FF00] p-1">Services</button>

<button onClick={() => scrollToSection('about')} className="text-xs font-black tracking-widest uppercase hover:text-[#E2FF00] transition-colors focus:outline-none focus:ring-1 focus:ring-[#E2FF00] p-1">About</button>

<button

onClick={() => scrollToSection('contact')}

className="px-6 py-2 bg-white text-black font-black text-sm italic hover:bg-[#E2FF00] transition-all rounded-sm tracking-tight uppercase shadow-lg shadow-white/5 active:scale-95"

Start Discovery

</button>

</div>

<button

className="md:hidden p-2 text-white"

onClick={() => setIsMenuOpen(!isMenuOpen)}

aria-expanded={isMenuOpen}

aria-label="Toggle navigation menu"

{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}

</button>

</nav>

</header>

<main>

{/* Mobile Menu Overlay */}

{isMenuOpen && (

<button onClick={() => scrollToSection('services')} className="text-4xl font-black text-left italic tracking-tighter uppercase">SERVICES</button>

<button onClick={() => scrollToSection('about')} className="text-4xl font-black text-left italic tracking-tighter uppercase">ABOUT</button>

<button

onClick={() => scrollToSection('contact')}

className="text-4xl font-black text-left text-[#E2FF00] italic tracking-tighter underline decoration-4 underline-offset-8 uppercase"

DISCOVER MORE

</button>

</div>

)}

{/* Hero Section */}

<ShieldCheck className="w-3.5 h-3.5" /> SECURE DISCOVERY ENVIRONMENT

</div>

SMARTER SYSTEMS. <br />

<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-zinc-600 uppercase">BETTER RESULTS.</span>

</h1>

Most local businesses are buried in the day-to-day. We help you break through using custom automation and high-performance marketing. From saving hours on admin to finding your next customer, we build the foundations you need to grow with total precision.

</p>

<button

onClick={() => scrollToSection('contact')}

className="group flex items-center justify-center gap-3 px-10 py-5 bg-[#E2FF00] text-black font-black italic text-lg rounded-sm transition-all hover:bg-white hover:scale-[1.02] shadow-xl shadow-[#E2FF00]/10"

START THE DISCOVERY SESSION <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />

</button>

<button

onClick={() => scrollToSection('services')}

className="px-10 py-5 border border-white/20 hover:bg-white/5 font-black italic text-lg rounded-sm transition-all uppercase"

Our Services

</button>

</div>

</section>

{/* Services Section */}

<h2 className="text-4xl md:text-6xl font-black italic tracking-tighter uppercase">CORE <span className="text-[#E2FF00]">CAPABILITIES</span></h2>

</div>

<p className="text-gray-500 text-lg font-medium italic">Advanced tools, practical applications, proven results.</p>

</div>

<h3 className="text-2xl font-black italic mb-6 uppercase tracking-tight">AI & Automation</h3>

We create custom AI workflows that act as a digital workforce for your business. By streamlining repetitive scheduling, follow-ups, and data entry, we save you hours of admin time.

</p>

<button onClick={() => scrollToSection('contact')} className="w-fit text-xs font-black tracking-widest text-[#E2FF00] flex items-center gap-2 border-b border-transparent hover:border-[#E2FF00] pb-1 transition-all uppercase">

Discover Efficiency <ArrowRight className="w-4 h-4" />

</button>

</div>

<h3 className="text-2xl font-black italic mb-6 uppercase tracking-tight">Growth Marketing</h3>

We manage high-performance search and social ad campaigns with a singular focus: measurable customer acquisition. We find your ideal audience in the local market.

</p>

Discover Growth <ArrowRight className="w-4 h-4" />

</button>

</div>

<h3 className="text-2xl font-black italic mb-6 uppercase tracking-tight">AI Training</h3>

Tailored 1-on-1 and group training. We bridge the gap between curiosity and competency, giving your team a solid foundation to use modern tools.

</p>

Discover Skills <ArrowRight className="w-4 h-4" />

</button>

</div>

</section>

{/* About Us Section */}

<h2 className="text-4xl md:text-6xl font-black italic tracking-tighter uppercase text-balance">ABOUT <span className="text-[#E2FF00]">US.</span></h2>

</div>

DNL Dynamics is a boutique consultancy focused on helping SMBs discover their untapped growth potential through modern systems.

</p>

We don't just "implement tech"—we build foundations. Our mission is to bridge the gap between complex new technologies and the practical needs of local businesses that need results, not hype.

</p>

</div>

"Uncover the systems and strategies your business needs to achieve measurable, sustainable growth."

</p>

</div>

<span className="text-[10px] font-black tracking-widest text-gray-500 uppercase">Tailored Partnership</span>

</div>

<span className="text-5xl font-black italic tracking-tighter block mb-2 text-[#E2FF00]">PROVEN</span>

<span className="text-[10px] font-black tracking-widest text-gray-500 uppercase">Acquisition strategy</span>

</div>

</section>

{/* Contact / Discovery Section */}

OPEN THE <br /> <span className="text-[#E2FF00]">CONVERSATION.</span>

</h2>

Fill out the brief below to start your discovery session. Whether you need a marketing spark or an operational overhaul, we’re ready to help you grow.

</p>

{[

"Custom Efficiency Audits",

"Direct 1-on-1 Strategic Access",

"Foundational AI Training"

].map((item, idx) => (

</div>

</div>

))}

</div>

{/* Security Badge */}

Encrypted Brief

</div>

{formSubmitted ? (

</div>

<div>

<h3 className="text-3xl font-black italic tracking-tight mb-2 uppercase">Brief Received.</h3>

<p className="text-gray-400 font-medium italic">Your inquiry has been logged securely. Expect a personal outreach within 24 hours.</p>

</div>

<button

onClick={() => {

setFormSubmitted(false);

setFormData({ name: '', email: '', service: '', message: '' });

}}

className="text-xs font-black tracking-widest text-[#E2FF00] underline uppercase hover:text-white transition-colors"

SEND ANOTHER REQUEST

</button>

</div>

) : (

{errorMessage && (

<p className="text-sm font-bold uppercase italic tracking-tight">{errorMessage}</p>

</div>

)}

{/* SECURITY: HONEYPOT

Bots will attempt to fill this. Humans cannot see it.

*/}

<label htmlFor="hp_check">System Check</label>

<input

type="text"

id="hp_check"

name="hp_check"

tabIndex="-1"

autoComplete="off"

value={botTrap}

onChange={(e) => setBotTrap(e.target.value)}

</div>

<label className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500" htmlFor="name">Contact Name</label>

<input

required

id="name"

type="text"

name="name"

value={formData.name}

onChange={handleInputChange}

className="w-full bg-transparent py-2 focus:outline-none italic font-bold placeholder:text-zinc-800"

placeholder="Full Name"

aria-required="true"

</div>

<label className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500" htmlFor="email">Business Email</label>

<input

required

id="email"

type="email"

name="email"

value={formData.email}

onChange={handleInputChange}

className="w-full bg-transparent py-2 focus:outline-none italic font-bold placeholder:text-zinc-800"

placeholder="email@company.com"

aria-required="true"

</div>

<label className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500" htmlFor="service">Service Interest</label>

<select

id="service"

required

name="service"

value={formData.service}

onChange={handleInputChange}

className="w-full appearance-none bg-transparent py-2 focus:outline-none italic font-bold text-white pr-8"

aria-required="true"

<option value="" disabled className="bg-black text-white">Select a capability...</option>

<option value="automation" className="bg-black text-white">AI Automation & Workflows</option>

<option value="marketing" className="bg-black text-white">Growth Marketing & Acquisition</option>

<option value="training" className="bg-black text-white">Advanced AI Training</option>

</select>

</div>

<label className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-500" htmlFor="message">Your Growth Objectives</label>

<textarea

id="message"

name="message"

value={formData.message}

onChange={handleInputChange}

rows={3}

className="w-full bg-transparent py-2 focus:outline-none italic font-bold resize-none placeholder:text-zinc-800"

placeholder="Briefly describe your hurdles..."

></textarea>

</div>

<button

type="submit"

disabled={isSubmitting}

className="w-full py-5 bg-[#E2FF00] text-black font-black italic text-lg uppercase tracking-tight hover:bg-white transition-all transform active:scale-95 shadow-lg shadow-[#E2FF00]/10 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 group"

{isSubmitting ? (

TRANSMITTING BRIEF...

</>

) : (

SEND DISCOVERY BRIEF

</>

)}

</button>

</form>

)}

</div>

</section>

</main>

{/* Footer */}

DNL <span className="text-[#E2FF00]">DYNAMICS</span>

</span>

</div>

<a href="#" className="hover:text-white transition-colors">LinkedIn</a>

<a href="#" className="hover:text-white transition-colors">Performance Lab</a>

<button onClick={() => setShowCookieBanner(true)} className="hover:text-white transition-colors">Cookie Policy</button>

</nav>

</div>

</footer>

{/* 4. Cookie Disclaimer Banner */}

{showCookieBanner && (

</div>

<h4 className="text-sm font-black italic uppercase tracking-widest text-[#E2FF00] mb-1">Performance Cookies</h4>

<p className="text-xs text-gray-400 font-medium">We use high-performance cookies to analyze your journey and optimize our lead precision. By continuing, you consent to our modern data protocols.</p>

</div>

<button

onClick={acceptCookies}

className="px-6 py-2 bg-white text-black text-[10px] font-black uppercase italic hover:bg-[#E2FF00] transition-colors rounded-sm"

Accept All

</button>

<button

onClick={() => setShowCookieBanner(false)}

className="px-6 py-2 border border-white/10 text-[10px] font-black uppercase italic hover:bg-white/10 transition-colors rounded-sm text-gray-400"

</button>

</div>

)}

</div>

);

};

export default App;