import { useState } from 'react'
import type { FormEvent } from 'react'
import './styles.css'

type IconName = 'arrow' | 'menu' | 'close' | 'check' | 'bolt' | 'search' | 'phone' | 'shield' | 'spark' | 'message'

function Icon({ name }: { name: IconName }) {
  const common = { width: 18, height: 18, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const }
  if (name === 'arrow') return <svg {...common}><path d="M5 12h13"/><path d="m13 6 6 6-6 6"/></svg>
  if (name === 'menu') return <svg {...common}><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg>
  if (name === 'close') return <svg {...common}><path d="m6 6 12 12"/><path d="M18 6 6 18"/></svg>
  if (name === 'check') return <svg {...common}><path d="m5 12 4 4L19 6"/></svg>
  if (name === 'bolt') return <svg {...common}><path d="m13 2-9 12h7l-1 8 9-12h-7l1-8Z"/></svg>
  if (name === 'search') return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></svg>
  if (name === 'phone') return <svg {...common}><path d="M22 16.9v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07A19.5 19.5 0 0 1 5.17 12.8 19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.77.62 2.61a2 2 0 0 1-.45 2.11L8 9.71a16 16 0 0 0 6.29 6.29l1.27-1.27a2 2 0 0 1 2.11-.45c.84.29 1.71.5 2.61.62A2 2 0 0 1 22 16.9Z"/></svg>
  if (name === 'shield') return <svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-5"/></svg>
  if (name === 'spark') return <svg {...common}><path d="m12 3-1.8 5.2L5 10l5.2 1.8L12 17l1.8-5.2L19 10l-5.2-1.8L12 3Z"/><path d="m19 16-.8 2.2L16 19l2.2.8L19 22l.8-2.2L22 19l-2.2-.8L19 16Z"/></svg>
  return <svg {...common}><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z"/><path d="M8 9h8"/><path d="M8 13h5"/></svg>
}

const projects = [
  { tag: 'CONCEPT / HOME SERVICES', name: 'Northline Roofing', title: 'Protect what\nmatters.', body: 'A lead-focused concept for a local contractor, built around trust, service areas and fast quote requests.', theme: 'roof' },
  { tag: 'CONCEPT / LANDSCAPING', name: 'Green Edge', title: 'Your yard.\nYour pride.', body: 'A visual-first local service site that makes before-and-after work and estimate requests impossible to miss.', theme: 'green' },
  { tag: 'CONCEPT / AUTOMOTIVE', name: 'Blackline Auto', title: 'Drive in.\nLeave better.', body: 'A premium workshop presence with services, social proof and booking placed where customers need them.', theme: 'auto' },
]

const faqs = [
  ['How much does a website cost?', 'Starter projects begin with a defined scope and a written price. Larger sites and custom functionality are quoted before work begins, so there are no surprise hourly bills.'],
  ['How long does a site take?', 'A focused small-business website can move quickly. Typical projects take days to a few weeks depending on scope, content and how quickly feedback is returned.'],
  ['Do I need to write all the copy?', 'No. You know your business; we can turn that information into clear customer-facing copy and page structure.'],
  ['Will I own my website?', 'Yes. The goal is a website you can own, maintain and move. We do not build your business around a platform that holds it hostage.'],
  ['Can you redesign my existing website?', 'Absolutely. We can keep what works and improve the visual design, messaging, mobile experience, speed, SEO foundations and conversion paths.'],
]

function scrollToId(id: string) {
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

function App() {
  const [mobileOpen, setMobileOpen] = useState(false)
  const [faqOpen, setFaqOpen] = useState<number | null>(null)
  const [submitted, setSubmitted] = useState(false)

  function nav(id: string) {
    scrollToId(id)
    setMobileOpen(false)
  }

  function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setSubmitted(true)
  }

  return (
    <div className="site">
      <div className="topbar"><span>NEW</span> Websites built for Canadian small businesses.</div>
      <header className="nav">
        <div className="nav-inner">
          <button className="brand" onClick={() => nav('top')} aria-label="Royally Digital home"><b>R</b><span>Royally<span>Digital</span></span></button>
          <nav className={mobileOpen ? 'nav-links open' : 'nav-links'}>
            <button onClick={() => nav('services')}>Services</button>
            <button onClick={() => nav('work')}>Work</button>
            <button onClick={() => nav('process')}>Process</button>
            <button onClick={() => nav('pricing')}>Pricing</button>
            <button className="nav-cta" onClick={() => nav('contact')}>Start a project <Icon name="arrow" /></button>
          </nav>
          <button className="mobile" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Toggle navigation"><Icon name={mobileOpen ? 'close' : 'menu'} /></button>
        </div>
      </header>

      <main id="top">
        <section className="hero section-wide">
          <div className="hero-grid" />
          <div className="hero-copy-block">
            <div className="eyebrow"><i /> INDEPENDENT DIGITAL STUDIO · CANADA</div>
            <h1>Websites that work<br /><em>as hard as you do.</em></h1>
            <p>Modern websites for small businesses that want to look credible, get found and turn visitors into customers — without the agency runaround.</p>
            <div className="actions"><button className="primary" onClick={() => nav('contact')}>Get a free website review <Icon name="arrow" /></button><button className="ghost" onClick={() => nav('work')}>See the work <Icon name="arrow" /></button></div>
            <div className="proof-row"><span><b>01</b> Strategy-first</span><span><b>02</b> Mobile-first</span><span><b>03</b> SEO-ready</span><span><b>04</b> Built to convert</span></div>
          </div>
          <div className="hero-visual">
            <div className="browser-card">
              <div className="browser-top"><div><i/><i/><i/></div><small>royallydigital.ca</small></div>
              <div className="browser-screen"><small>YOUR BUSINESS / YOUR ADVANTAGE</small><h2>Make a better<br /><em>first impression.</em></h2><div className="fake-lines"><i/><i/></div><button>Get started →</button><div className="fake-cards"><i/><i/><i/></div></div>
            </div>
            <div className="stat-card"><b><Icon name="bolt" /></b><span><strong>Fast by design</strong><small>Lean pages · clean code</small></span></div>
          </div>
        </section>

        <section className="trust"><span>DESIGNED FOR</span><b>CONTRACTORS</b><b>LOCAL SERVICES</b><b>PROFESSIONALS</b><b>SHOPS</b><b>STARTUPS</b></section>

        <section className="section split" id="why">
          <div className="eyebrow">01 / THE PROBLEM</div>
          <div className="split-body"><h2>Your website shouldn't<br /><em>cost you customers.</em></h2><div><p className="lead">People decide whether to trust a business before they ever call. If your site is slow, confusing or looks ten years old, you are making that decision harder.</p><div className="issue-list"><article><small>01</small><div><b>Looks outdated</b><p>Your business has evolved. Your website hasn't.</p></div></article><article><small>02</small><div><b>Hard to find</b><p>Your website isn't doing enough for local search.</p></div></article><article><small>03</small><div><b>Doesn't convert</b><p>Visitors can't quickly see what you do or what to do next.</p></div></article></div></div></div>
        </section>

        <section className="dark section" id="services">
          <div className="eyebrow light">02 / WHAT WE DO</div>
          <div className="section-heading"><h2>Everything you need.<br /><em>Nothing you don't.</em></h2><p>We build the digital foundation your business actually needs — then leave the jargon at the door.</p></div>
          <div className="services-grid">
            {[['Website Design','A sharp, responsive website built around your customers, services and next business goal.','spark'],['Local SEO','Technical foundations and page structure designed to help local customers find and understand you.','search'],['Redesigns','Keep what works. Fix outdated design, weak messaging, mobile UX and conversion paths.','message'],['Performance','Lean implementation and optimized assets so the site feels fast everywhere.','bolt'],['Hosting & Care','Optional support, updates, backups and small changes without chasing a developer.','shield'],['AI & Automation','Connect the site to smarter lead handling, workflows and tools your business already uses.','spark']].map(([title,body,icon],i)=><article className="service" key={title}><span className="service-icon"><Icon name={icon as IconName}/></span><div><h3>{title}</h3><p>{body}</p></div><small>0{i+1}</small></article>)}
          </div>
        </section>

        <section className="section" id="work">
          <div className="eyebrow">03 / SELECTED WORK</div>
          <div className="section-heading work-heading"><h2>Good design gets <em>attention.</em><br />Good strategy gets business.</h2><p>These are original concept builds showing the standard we aim to deliver. No fake client claims — just practical examples of what a focused business website can do.</p></div>
          <div className="projects">{projects.map((p,i)=><article className={'project '+p.theme} key={p.name}><div className="project-art"><div className="mock-site"><div className="mock-nav"><b>{p.name.split(' ')[0]}</b><span>Services&nbsp;&nbsp; About&nbsp;&nbsp; Contact</span></div><div className="mock-hero"><small>{p.tag}</small><strong>{p.title}</strong><button>Get a quote →</button></div></div></div><div className="project-meta"><div><small>{p.tag}</small><h3>{p.name}</h3><p>{p.body}</p></div><button aria-label={'View '+p.name}><Icon name="arrow" /></button></div></article>)}</div>
          <div className="project-note"><span>More real client work will appear here as Royally Digital launches.</span><button onClick={() => nav('contact')}>Have a project? <Icon name="arrow" /></button></div>
        </section>

        <section className="dark section" id="process">
          <div className="eyebrow light">04 / THE PROCESS</div>
          <div className="section-heading"><h2>Simple from<br /><em>start to launch.</em></h2><p>No endless meetings. No mystery. You know what happens next.</p></div>
          <div className="steps">{[['01','Tell us about your business','A short conversation about what you do, who you serve and what the site needs to accomplish.'],['02','We plan the experience','Structure, messaging and visual direction shaped around your customers.'],['03','We build it','Design, development, responsive behavior, SEO foundations and conversion paths.'],['04','You review it','You see the site, request changes within scope, and we refine it.'],['05','We launch','Domain, hosting, analytics and the final handoff. Then your site goes to work.']].map(s=><article className="step" key={s[0]}><span>{s[0]}</span><div><h3>{s[1]}</h3><p>{s[2]}</p></div></article>)}</div>
        </section>

        <section className="section" id="pricing">
          <div className="eyebrow">05 / PRICING</div>
          <div className="section-heading pricing-heading"><h2>Clear scope.<br /><em>Clear expectations.</em></h2><p>We'd rather tell you what something costs than make you sit through a sales call to find out.</p></div>
          <div className="pricing">{[
            ['01 / PRESENCE','Launch','$799','A focused website for a business that needs a professional home online.',['Custom responsive design','Up to 5 core pages','Contact / quote form','SEO foundations','Mobile optimization']],
            ['02 / GROWTH','Business','$1,499','A stronger lead-generation site for an established small business.',['Everything in Launch','Up to 10 pages','Local SEO structure','Analytics setup','Advanced lead paths']],
            ['03 / CUSTOM','Beyond','Let’s talk','For ecommerce, booking systems, integrations, automation or custom applications.',['Custom functionality','Advanced integrations','Ecommerce / booking','Automation','Ongoing support options']]
          ].map((p,i)=><article className={'price '+(i===1?'featured':'')} key={String(p[1])}>{i===1&&<span className="popular">MOST POPULAR</span>}<small>{p[0]}</small><h3>{p[1]}</h3><div className="amount">{i<2&&'from '}<b>{p[2]}</b>{i<2&&<small> CAD</small>}</div><p>{p[3]}</p><ul>{(p[4] as string[]).map(x=><li key={x}><Icon name="check" /> {x}</li>)}</ul><button onClick={() => nav('contact')}>{i===0?'Start with Launch':i===1?'Build my business site':'Discuss a project'} <Icon name="arrow" /></button></article>)}</div>
          <div className="price-foot">Final pricing depends on scope. Every project gets a written scope before work begins.</div>
        </section>

        <section className="section faq" id="faq">
          <div className="eyebrow">06 / FAQ</div><div className="faq-layout"><h2>Questions,<br /><em>answered.</em></h2><div>{faqs.map((f,i)=><article className={'faq-item '+(faqOpen===i?'open':'')} key={f[0]}><button onClick={()=>setFaqOpen(faqOpen===i?null:i)}><span>{f[0]}</span><b>+</b></button><div><p>{f[1]}</p></div></article>)}</div></div>
        </section>

        <section className="contact section" id="contact">
          <div className="eyebrow light">07 / START A PROJECT</div><div className="contact-layout"><div><h2>Let's make your<br /><em>website work.</em></h2><p>Tell us a little about your business. We'll come back with a practical next step — not a sales pitch.</p><div className="contact-info"><span><Icon name="message" /> hello@royallydigital.ca</span><span><Icon name="phone" /> Canada · Serving small businesses</span></div></div>
            <form onSubmit={submit} className="form">{submitted ? <div className="success"><div><Icon name="check" /></div><h3>Thanks — you're on the list.</h3><p>For the live site, this form should be connected to the email or CRM Royally Digital will use for incoming leads.</p><button type="button" onClick={()=>setSubmitted(false)}>Send another</button></div> : <><label>YOUR NAME<input required placeholder="Your name" /></label><label>BUSINESS NAME<input required placeholder="Business name" /></label><label>EMAIL<input required type="email" placeholder="you@business.ca" /></label><label>WHAT DO YOU NEED?<textarea required placeholder="Tell us about your business and what you'd like the website to do." /></label><button className="primary" type="submit">Start the conversation <Icon name="arrow" /></button></>}</form>
          </div>
        </section>
      </main>

      <footer><div className="footer-top"><button className="brand inverse" onClick={()=>nav('top')}><b>R</b><span>Royally<span>Digital</span></span></button><p>Websites that work as hard as you do.</p><button className="footer-link" onClick={()=>nav('contact')}>Start a project <Icon name="arrow" /></button></div><div className="footer-bottom"><span>© 2026 Royally Digital</span><span>Built for small businesses in Canada.</span><span>Privacy · Terms</span></div></footer>
    </div>
  )
}

export default App