import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ArrowUpRight, ArrowRight, Menu, X, Search, Target, BarChart3, MousePointerClick, Globe2, Megaphone, TrendingUp, CheckCircle2, ChevronDown, Mail, Phone, MapPin, Send, Linkedin, Instagram, ChartNoAxesCombined, Sparkles } from 'lucide-react';
import './styles.css';

const services = [
  { icon: Search, num: '01', title: 'Search engine optimization', text: 'Build lasting visibility and attract people actively looking for what you offer.', tags: ['Technical SEO', 'Local SEO', 'Content strategy'] },
  { icon: Target, num: '02', title: 'Paid media & performance', text: 'Turn ad spend into a smarter acquisition engine with testing, tracking, and clear goals.', tags: ['Google Ads', 'Paid social', 'Campaign optimization'] },
  { icon: Megaphone, num: '03', title: 'Social media & content', text: 'Create a consistent brand presence with content that earns attention and action.', tags: ['Content planning', 'Creative direction', 'Community'] },
  { icon: Globe2, num: '04', title: 'Websites & conversion', text: 'Make every visit count with focused landing pages and conversion-minded experiences.', tags: ['Landing pages', 'CRO', 'Analytics'] },
  { icon: BarChart3, num: '05', title: 'Analytics & measurement', text: 'Understand what is working, what is not, and where your next opportunity lies.', tags: ['GA4 setup', 'Dashboards', 'Attribution'] },
  { icon: TrendingUp, num: '06', title: 'Growth strategy', text: 'Bring channels, customer journeys, and commercial priorities together in one plan.', tags: ['Growth audits', 'Lead generation', 'Roadmaps'] },
];

const navItems = [ ['Home','/'], ['About','/about'], ['Services','/services'], ['Contact','/contact'] ];
function getPage() { const p = window.location.pathname.replace(/\/$/, '') || '/'; return p; }
function Logo({ light = false }) { return <a className={`brand ${light ? 'brand-light' : ''}`} href="/" aria-label="Sixfive9 home"><span className="brand-name">Sixfive<span className="brand-nine">9<ArrowUpRight size={19} strokeWidth={3.1} /></span></span><span className="brand-tag">DIGITAL MARKETING GROWTH</span></a>; }
function Header({ page }) { const [open,setOpen] = useState(false); return <header className="header"><div className="container nav-wrap"><Logo /><button className="menu-toggle" onClick={()=>setOpen(!open)} aria-label="Toggle navigation">{open?<X/>:<Menu/>}</button><nav className={open?'nav nav-open':'nav'}>{navItems.map(([name,path])=><a key={path} href={path} className={page===path?'active':''} onClick={()=>setOpen(false)}>{name}</a>)}<a className="nav-cta" href="/contact#inquiry" onClick={()=>setOpen(false)}>Let’s talk <ArrowUpRight size={16}/></a></nav></div></header>; }
function Footer(){ return <footer className="footer"><div className="container"><div className="footer-top"><div><Logo light/><p className="footer-blurb">Clarity for your next stage of growth.<br/>Strategy-led digital marketing built around your goals.</p></div><div className="footer-links"><span className="eyebrow">EXPLORE</span><a href="/about">About Sixfive9</a><a href="/services">Our services</a><a href="/contact">Contact</a></div><div className="footer-links"><span className="eyebrow">START A CONVERSATION</span><a href="/contact#inquiry">Tell us about your goals <ArrowUpRight size={15}/></a><a href="mailto:talk@sixfive9.com">talk@sixfive9.com</a></div></div><div className="footer-bottom"><span>© {new Date().getFullYear()} Sixfive9. All rights reserved.</span><span>Digital marketing growth, with purpose.</span></div></div></footer>; }
function Button({href,children,secondary=false}){return <a href={href} className={`button ${secondary?'button-secondary':''}`}>{children}<ArrowUpRight size={17}/></a>}
function SectionIntro({kicker,title,copy,center=false}){return <div className={`section-intro ${center?'center':''}`}><span className="eyebrow"><span className="eyebrow-dot"/>{kicker}</span><h2>{title}</h2>{copy&&<p>{copy}</p>}</div>}
function ServiceCard({service}){const Icon=service.icon;return <a className="service-card" href="/services"><div className="service-card-top"><span className="service-icon"><Icon size={22}/></span><span className="service-num">{service.num}</span></div><h3>{service.title}</h3><p>{service.text}</p><div className="tag-list">{service.tags.map(t=><span key={t}>{t}</span>)}</div><span className="card-arrow"><ArrowUpRight size={19}/></span></a>}
function Home(){return <><section className="hero"><div className="hero-grid"/><div className="container hero-layout"><div className="hero-copy"><span className="eyebrow eyebrow-light"><span className="eyebrow-dot"/>YOUR NEXT STAGE STARTS HERE</span><h1>Good marketing.<br/><span>Real momentum.</span></h1><p className="hero-lede">From our starting point in Texas, we help ambitious businesses across the United States turn digital marketing into a clearer, more consistent driver of growth.</p><div className="hero-actions"><Button href="/contact#inquiry">Let’s talk growth</Button><a className="text-link text-link-light" href="/services">Explore our services <ArrowRight size={17}/></a></div><div className="hero-proof"><div className="proof-avatars"><span>S</span><span>6</span><span>9</span></div><p><strong>Built around your business.</strong><br/>Strategy first. Progress you can measure.</p></div></div><div className="hero-visual" aria-label="Abstract growth visualization"><div className="visual-glow"/><div className="orbit orbit-one"/><div className="orbit orbit-two"/><div className="visual-card card-main"><div className="visual-card-head"><span>GROWTH SNAPSHOT</span><span className="live-dot"/> </div><div className="visual-metric"><span>Progress starts with clarity</span><Sparkles size={18}/></div><div className="chart-area"><div className="chart-gridlines"><i/><i/><i/><i/></div><svg viewBox="0 0 420 190" role="img" aria-label="Illustrative upward trend line"><defs><linearGradient id="lineGradient" x1="0" x2="1"><stop offset="0%" stopColor="#3484ff"/><stop offset="100%" stopColor="#67d7ff"/></linearGradient><linearGradient id="fillGradient" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#2379f6" stopOpacity=".28"/><stop offset="100%" stopColor="#2379f6" stopOpacity="0"/></linearGradient></defs><path d="M8 160 C48 153 48 132 84 139 S130 115 160 124 S204 88 239 101 S286 66 316 74 S365 30 412 16 L412 190 L8 190 Z" fill="url(#fillGradient)"/><path d="M8 160 C48 153 48 132 84 139 S130 115 160 124 S204 88 239 101 S286 66 316 74 S365 30 412 16" fill="none" stroke="url(#lineGradient)" strokeWidth="4" strokeLinecap="round"/><circle cx="412" cy="16" r="6" fill="#fff" stroke="#3184ff" strokeWidth="4"/></svg></div><div className="visual-card-foot"><span><i className="legend-dot"/> Illustrative growth trajectory</span><span>01 / 03</span></div></div><div className="floating-note note-top"><span className="note-icon"><Target size={17}/></span><div><b>Focus on what matters</b><small>Clear goals. Better decisions.</small></div></div><div className="floating-note note-bottom"><span className="note-icon note-icon-cyan"><ChartNoAxesCombined size={18}/></span><div><b>Measure the impact</b><small>Learn. Improve. Grow.</small></div></div><div className="visual-orb"><span>6</span><span>5</span><b>9</b></div></div></div><div className="container hero-bottom"><span>STARTING IN TEXAS · SERVING THE USA</span><div><span>SMALL & MID-SIZE BUSINESS</span><i/> <span>GROWING BRANDS</span><i/> <span>ENTERPRISE</span></div></div></section>
<section className="intro-band"><div className="container intro-band-inner"><span className="intro-mark">6<span>5</span>9</span><p>Starting in Texas. Serving the United States.<br/><strong>Growth built around your business goals.</strong></p><p className="intro-side">From Texas to markets nationwide, we connect strategy, creative, and performance to help your business move forward with confidence.</p></div></section>
<section className="section services-section"><div className="container"><div className="section-heading-row"><SectionIntro kicker="WHAT WE DO" title={<>Everything connected.<br/><span>Growth focused.</span></>} copy="The right mix of services for where you are today — and where you want to go next."/><Button href="/services" secondary>View all services</Button></div><div className="services-grid">{services.map(s=><ServiceCard key={s.num} service={s}/>)}</div></div></section>
<section className="approach-section"><div className="container approach-layout"><div className="approach-art"><div className="approach-circle circle-a"/><div className="approach-circle circle-b"/><div className="approach-center"><span>6</span><span>5</span><b>9</b></div><div className="approach-label label-a"><span>01</span> Understand</div><div className="approach-label label-b"><span>02</span> Activate</div><div className="approach-label label-c"><span>03</span> Optimize</div></div><div className="approach-copy"><SectionIntro kicker="A BETTER WAY TO GROW" title={<>Less guesswork.<br/><span>More direction.</span></>} copy="We start by understanding your business, your audience, and the barriers between you and your goals. Then we build a focused plan and keep learning as we go."/><div className="check-list"><div><CheckCircle2/> Strategy grounded in business goals</div><div><CheckCircle2/> Transparent reporting and communication</div><div><CheckCircle2/> Continuous testing and improvement</div></div><Button href="/about" secondary>Get to know us</Button></div></div></section>
<section className="client-section"><div className="container"><SectionIntro kicker="PARTNERSHIP, NOT PROMISES" title={<>Built on trust.<br/><span>Proven over time.</span></>} copy="Strong partnerships start with clear expectations, honest communication, and shared goals."/><div className="client-strip"><div><span className="client-symbol">◈</span><span>YOUR BRAND</span></div><div><span className="client-symbol">✳</span><span>YOUR BRAND</span></div><div><span className="client-symbol">◉</span><span>YOUR BRAND</span></div><div><span className="client-symbol">▰</span><span>YOUR BRAND</span></div><div><span className="client-symbol">✦</span><span>YOUR BRAND</span></div></div><p className="placeholder-note">Client logo placeholders — replace with approved client brands before launch.</p><div className="quote-panel"><div className="quote-mark">“</div><div><p>“The best growth partner doesn’t just deliver activity. They help you understand what matters, why it matters, and what to do next.”</p><span>THE SIXFIVE9 APPROACH <i/> OUR COMMITMENT TO CLIENTS</span></div><div className="quote-decoration"><span>6</span><span>5</span><b>9</b></div></div><p className="placeholder-note">Brand statement, not a customer testimonial. Add verified client quotes and attribution when available.</p></div></section>
<CTASection/></>}
function CTASection(){return <section className="cta-section"><div className="container cta-inner"><div><span className="eyebrow eyebrow-light"><span className="eyebrow-dot"/> READY WHEN YOU ARE</span><h2>Your next chapter<br/>starts with a <span>conversation.</span></h2><p>Tell us where you want to go. We’ll help you explore the right next steps.</p></div><Button href="/contact#inquiry">Start a conversation</Button><div className="cta-watermark">9</div></div></section>}
function PageHero({kicker,title,highlight,copy}){return <section className="page-hero"><div className="container page-hero-inner"><span className="eyebrow eyebrow-light"><span className="eyebrow-dot"/>{kicker}</span><h1>{title}<br/><span>{highlight}</span></h1><p>{copy}</p></div><div className="page-hero-mark">9</div></section>}
function About(){return <><PageHero kicker="ABOUT SIXFIVE9" title="Growth with" highlight="intention." copy="We bring clear thinking and connected digital marketing together to help ambitious businesses take their next step."/><section className="section"><div className="container about-intro"><div><SectionIntro kicker="WHY WE EXIST" title={<>Make marketing<br/><span>mean more.</span></>}/></div><div className="about-body"><p className="large-copy">Digital marketing should do more than keep you busy. It should help you make better decisions, reach the right people, and build momentum that matters to your business.</p><p>Sixfive9 is built around a straightforward belief: growth happens when the strategy is clear, the work is connected, and progress is measured honestly. We work with SMEs and established teams across the United States, launching our market presence in Texas and building partnerships nationwide.</p><p>We believe in practical plans over jargon, thoughtful execution over empty activity, and partnerships that are transparent from day one.</p></div></div></section><section className="values-section"><div className="container"><SectionIntro kicker="WHAT GUIDES US" title={<>The principles behind<br/><span>every move.</span></>}/><div className="values-grid"><div><span>01</span><h3>Clarity first</h3><p>Understand the challenge before choosing the channel or tactic.</p></div><div><span>02</span><h3>Progress with purpose</h3><p>Connect every activity to a meaningful business objective.</p></div><div><span>03</span><h3>Open partnership</h3><p>Communicate clearly, share what we learn, and stay accountable.</p></div><div><span>04</span><h3>Always improving</h3><p>Use evidence and experimentation to make the next decision better.</p></div></div></div></section><CTASection/></>}
function ServicesPage(){return <><PageHero kicker="OUR SERVICES" title="A connected plan." highlight="Measurable progress." copy="Digital marketing services for businesses across the United States — starting in Texas and shaped around your goals, audience, and stage of growth."/><section className="section"><div className="container"><div className="service-page-intro"><SectionIntro kicker="HOW WE HELP" title={<>The right tools for<br/><span>your next stage.</span></>}/><p>Start with one challenge or build a joined-up growth program. We’ll help you prioritize what can make the biggest difference.</p></div><div className="services-grid services-grid-page">{services.map(s=><ServiceCard key={s.num} service={s}/>)}</div></div></section><section className="process-section"><div className="container"><SectionIntro kicker="OUR PROCESS" title={<>A clear path from<br/><span>insight to action.</span></>}/><div className="process-grid"><div><span>01</span><h3>Discover</h3><p>We learn about your business, customers, goals, and current performance.</p></div><div><span>02</span><h3>Prioritize</h3><p>We align on the opportunities, measures, and work that deserve attention first.</p></div><div><span>03</span><h3>Activate</h3><p>We put the plan into action with considered execution and clear ownership.</p></div><div><span>04</span><h3>Optimize</h3><p>We review results, share what we learn, and refine the plan as we go.</p></div></div></div></section><CTASection/></>}
function InquiryForm(){
  const [form,setForm]=useState({name:'',email:'',phone:'',subject:'',message:''});
  const [error,setError]=useState('');
  function update(e){setForm({...form,[e.target.name]:e.target.value});setError('')}
  function submit(e){
    e.preventDefault();
    if(!form.name.trim()||!form.email.trim()||!form.subject.trim()||!form.message.trim()){
      setError('Please complete your name, email, subject, and message.');return;
    }
    const body=[`Name: ${form.name}`,`Email: ${form.email}`,`Phone: ${form.phone||'Not provided'}`,`Subject: ${form.subject}`,'',form.message].join('\n');
    const mailto=`mailto:talk@sixfive9.com?subject=${encodeURIComponent(form.subject)}&body=${encodeURIComponent(body)}`;
    window.location.href=mailto;
  }
  return <form className="inquiry-form" onSubmit={submit}>
    <div className="form-heading"><span className="eyebrow"><span className="eyebrow-dot"/> YOUR GROWTH STARTS HERE</span><h2>Tell us a little<br/><span>about your goals.</span></h2><p>Complete the form and your email app will open with your inquiry addressed to our team.</p></div>
    <div className="form-grid">
      <label>Name <span>*</span><input name="name" value={form.name} onChange={update} placeholder="Your full name" autoComplete="name" required/></label>
      <label>Email <span>*</span><input name="email" type="email" value={form.email} onChange={update} placeholder="you@company.com" autoComplete="email" required/></label>
      <label>Phone <input name="phone" type="tel" value={form.phone} onChange={update} placeholder="Your phone number" autoComplete="tel"/></label>
      <label>Subject <span>*</span><input name="subject" value={form.subject} onChange={update} placeholder="How can we help?" required/></label>
      <label className="full-field">Message <span>*</span><textarea name="message" value={form.message} onChange={update} placeholder="Tell us about your goals, project, or questions..." rows="5" required/></label>
    </div>
    {error&&<p className="form-error" role="alert">{error}</p>}
    <button className="button form-submit" type="submit">Send inquiry <Send size={16}/></button>
    <p className="form-privacy">Your details will be used to respond to your inquiry. For direct website delivery, connect this form to a secure form endpoint or CRM before launch.</p>
  </form>
}
function Contact(){return <><PageHero kicker="CONTACT" title="Let’s make" highlight="growth happen." copy="Based in our initial Texas market and working with businesses nationwide, we’d love to hear about your goals, challenges, and growth plans."/><section className="section contact-section" id="inquiry"><div className="container contact-layout"><div className="contact-sidebar"><SectionIntro kicker="START A CONVERSATION" title={<>Good things<br/><span>start here.</span></>} copy="Tell us what success looks like for you. We’ll start with a thoughtful conversation — no pressure, no one-size-fits-all pitch."/><div className="contact-detail"><span><Mail size={19}/></span><div><small>EMAIL US</small><a href="mailto:talk@sixfive9.com">talk@sixfive9.com</a><p>We typically respond to new inquiries as soon as possible.</p></div></div><div className="contact-detail"><span><MapPin size={19}/></span><div><small>WORKING TOGETHER</small><b>Starting in Texas · Serving nationwide</b><p>Partnering remotely with ambitious businesses across the United States.</p></div></div><div className="contact-note"><Sparkles size={20}/><p><strong>Not sure what you need yet?</strong><br/>That’s okay. We can help you find the right starting point.</p></div></div><InquiryForm/></div></section></>}
function App(){const [page,setPage]=useState(getPage());React.useEffect(()=>{const onPop=()=>setPage(getPage());window.addEventListener('popstate',onPop);const onClick=(e)=>{const a=e.target.closest('a');if(!a||a.origin!==window.location.origin||a.target==='_blank'||a.hasAttribute('download'))return;const path=a.pathname;if(!['/','/about','/services','/contact'].includes(path))return;e.preventDefault();history.pushState({},'',path+a.hash);setPage(path);if(a.hash)setTimeout(()=>document.querySelector(a.hash)?.scrollIntoView({behavior:'smooth'}),40);else window.scrollTo({top:0,behavior:'smooth'});};document.addEventListener('click',onClick);return()=>{window.removeEventListener('popstate',onPop);document.removeEventListener('click',onClick)}},[]);React.useEffect(()=>{const seo={ '/':{title:'Sixfive9 | Digital Marketing Agency in Texas & USA',description:'Sixfive9 helps businesses across the United States grow through SEO, paid advertising, lead generation, social media, and digital growth strategy. Starting in Texas, serving brands nationwide.'},'/about':{title:'About Sixfive9 | US Digital Marketing Growth Partner',description:'Meet Sixfive9, a digital marketing growth partner starting in Texas and serving SMEs and enterprise brands across the United States.'},'/services':{title:'Digital Marketing Services in Texas & USA | Sixfive9',description:'Explore SEO, paid advertising, social media, website conversion optimization, analytics, and growth strategy for businesses across the United States.'},'/contact':{title:'Contact Sixfive9 | Texas & Nationwide Digital Marketing',description:'Contact Sixfive9 to discuss SEO, paid advertising, lead generation, conversion optimization, or digital growth strategy for your US business. Email talk@sixfive9.com.'}};const meta=seo[page]||seo['/'];document.title=meta.title;let description=document.querySelector('meta[name="description"]');if(!description){description=document.createElement('meta');description.name='description';document.head.appendChild(description)}description.content=meta.description;let ogTitle=document.querySelector('meta[property="og:title"]');if(ogTitle)ogTitle.content=meta.title;let ogDescription=document.querySelector('meta[property="og:description"]');if(ogDescription)ogDescription.content=meta.description;},[page]);let content=page==='/about'?<About/>:page==='/services'?<ServicesPage/>:page==='/contact'?<Contact/>:<Home/>;return <><Header page={page}/><main>{content}</main><Footer/><a className="back-top" href="#top" aria-label="Back to top" onClick={e=>{e.preventDefault();window.scrollTo({top:0,behavior:'smooth'})}}><ArrowUpRight size={18}/></a></>}

createRoot(document.getElementById('root')).render(<App/>);