const { MarketingNav, SiteFooter, Button, IconButton, Badge, Card, MobileDrawer } = window.ZaviFxDesignSystem_f15c31;

const ASSETS = '../../assets/';

const NAV = [
  { label: 'Home', page: 'home' },
  { label: 'Services', page: 'services' },
  { label: 'Work', page: 'work' },
  { label: 'Case Studies', page: 'case-study' },
  { label: 'About', page: 'about' },
  { label: 'Insights', page: 'insights' },
  { label: 'Contact', page: 'contact' },
];

/* ---------- CMS-ready content ---------- */
const SERVICES = [
  { slug: 'digital-marketing-strategy', title: 'Digital Marketing Strategy', body: 'A quarterly plan that names the channel mix, budget split and the one metric each workstream must move.', caps: ['Channel modelling', 'Budget planning', 'Measurement plan'] },
  { slug: 'seo', title: 'Search Engine Optimization', body: 'Technical fixes, information architecture and content depth so the pages that sell start ranking.', caps: ['Technical audit', 'Keyword mapping', 'Content briefs'] },
  { slug: 'wordpress', title: 'WordPress Design & Development', body: 'Fast, editable WordPress and WooCommerce builds your team can update without a developer.', caps: ['Theme build', 'WooCommerce', 'Speed budget'] },
  { slug: 'ui-ux', title: 'UI/UX Design', body: 'Research, flows and interface systems for sites, dashboards and apps — handed over as a real design system.', caps: ['User flows', 'Design system', 'Prototypes'] },
  { slug: 'branding', title: 'Graphic Design & Branding', body: 'Identity, collateral and campaign design that stays consistent from ad unit to packaging.', caps: ['Identity', 'Collateral', 'Ad creative'] },
  { slug: 'social-media', title: 'Social Media Marketing', body: 'Platform-specific content calendars and community management with reporting tied to enquiries.', caps: ['Content calendar', 'Community', 'Reporting'] },
  { slug: 'content-marketing', title: 'Content Marketing', body: 'Editorial planned around search demand and sales objections, produced on a predictable cadence.', caps: ['Editorial plan', 'Production', 'Distribution'] },
  { slug: 'performance-marketing', title: 'Performance Marketing', body: 'Search, social and marketplace campaigns instrumented down to qualified pipeline, not clicks.', caps: ['Paid search', 'Paid social', 'Creative testing'] },
  { slug: 'link-building', title: 'Link Building', body: 'Relevant, authoritative placements earned through digital PR and genuine editorial outreach.', caps: ['Digital PR', 'Outreach', 'Relevance review'] },
  { slug: 'maintenance', title: 'Website Maintenance & Optimization', body: 'Updates, backups, security and Core Web Vitals monitoring so the site keeps earning after launch.', caps: ['Updates', 'Security', 'Core Web Vitals'] },
  { slug: 'cro', title: 'Conversion Rate Optimization', body: 'Structured experiments on the pages that carry revenue, with a documented result each cycle.', caps: ['Funnel analysis', 'A/B tests', 'Landing pages'] },
  { slug: 'growth-consulting', title: 'Digital Growth Consulting', body: 'Advisory for in-house teams: roadmap, hiring, tooling and the reporting that keeps leadership aligned.', caps: ['Roadmap', 'Tooling', 'Team enablement'] },
];

const PROJECTS = [
  { slug: 'cloudblueit', name: 'CloudBlueIT Academy', industry: 'IT training · Hyderabad', img: 'portfolio/cloudblueit-home.png', services: ['WordPress development', 'UI/UX design', 'SEO'], challenge: 'A course catalogue that visitors could not navigate, and no clear path from browsing to enrolment enquiry.', solution: 'Rebuilt the site around course categories, added an enquiry-first hero, certification badges and a structured course template.', tech: ['WordPress', 'Divi', 'WooCommerce'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'codnets', name: 'Codnets', industry: 'IT services & training', img: 'portfolio/codnets-home.webp', services: ['WordPress development', 'Graphic design'], challenge: 'Two audiences — enterprise IT services and individual learners — competing for the same homepage.', solution: 'Split the narrative into service and course tracks with an accordion service list, partner strip and FAQ.', tech: ['WordPress', 'Elementor'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'beauty-salon', name: 'Beauty Salon', industry: 'Beauty & wellness', img: 'portfolio/beauty-salon.jpg', services: ['UI/UX design', 'WordPress development'], challenge: 'Bookings happened over calls only, with no online service overview.', solution: 'Editorial layout with a quick-booking panel, service tiles and testimonial section.', tech: ['WordPress', 'Elementor'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'photography-studio', name: 'Photography Studio', industry: 'Creative studio', img: 'portfolio/photography-studio.jpg', services: ['UI/UX design', 'WordPress development'], challenge: 'A portfolio-heavy brand with no way to present galleries without slowing the site down.', solution: 'Dark editorial theme, category-filtered galleries and lazy-loaded image grids.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'medical-center', name: 'Medical Center', industry: 'Healthcare', img: 'portfolio/medical-center.jpg', services: ['WordPress development', 'Content marketing'], challenge: 'Patients could not tell which specialists were available or how to book.', solution: 'Four-step booking explainer, doctor directory and a blog for patient education.', tech: ['WordPress', 'Elementor'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'construction', name: 'Construction Group', industry: 'Construction', img: 'portfolio/construction.jpg', services: ['WordPress development', 'Branding'], challenge: 'Credibility gap against larger contractors on tender shortlists.', solution: 'Project-led homepage with capability stats, machinery and case-solution sections.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'diet-coach', name: 'Diet Coach', industry: 'Health coaching', img: 'portfolio/diet-coach.jpg', services: ['UI/UX design', 'CRO'], challenge: 'Plans were explained in long paragraphs, so pricing was hard to compare.', solution: 'Benefit-led hero, three-tier pricing table and testimonial proof above the fold.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'yoga-studio', name: 'Yoga Studio', industry: 'Fitness', img: 'portfolio/yoga-studio.jpg', services: ['Branding', 'WordPress development'], challenge: 'Class types and workshop dates lived only on social media.', solution: 'Typographic hero, eight-service icon grid, workshop schedule and class pricing.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'pizza-restaurant', name: 'Pizza Restaurant', industry: 'Food & beverage', img: 'portfolio/pizza-restaurant.jpg', services: ['WordPress development', 'Graphic design'], challenge: 'Menu photography existed but the site could not merchandise it.', solution: 'Colour-blocked menu cards with prices, chef section and offer strip.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'eyewear-shop', name: 'Eyewear Store', industry: 'E-commerce', img: 'portfolio/eyewear-shop.jpg', services: ['WooCommerce', 'UI/UX design'], challenge: 'Product discovery required too many clicks on mobile.', solution: 'Bestseller tabs, category banners and a lens-education block on the product page.', tech: ['WordPress', 'WooCommerce'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'jewellery-shop', name: 'Jewellery Store', industry: 'E-commerce', img: 'portfolio/jewellery-shop.jpg', services: ['WooCommerce', 'Performance marketing'], challenge: 'High-value catalogue with no trust signals near the add-to-cart.', solution: 'New-arrival carousels, review blocks and a category browser with clear pricing.', tech: ['WordPress', 'WooCommerce'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'dental-clinic', name: 'Dental Clinic', industry: 'Healthcare', img: 'portfolio/dental-clinic.jpg', services: ['WordPress development', 'SEO'], challenge: 'Local searches were going to aggregators instead of the clinic.', solution: 'Service grid, specialist team section and an appointment panel on every scroll depth.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'coffee-brand', name: 'Coffee Brand', industry: 'D2C retail', img: 'portfolio/coffee-brand.jpg', services: ['Branding', 'WooCommerce'], challenge: 'Packaging looked premium; the storefront did not.', solution: 'Editorial product storytelling, tiered pricing cards and a contact map footer.', tech: ['WordPress', 'WooCommerce'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'vpn-saas', name: 'VPN Platform', industry: 'SaaS', img: 'portfolio/vpn-saas.jpg', services: ['UI/UX design', 'Content marketing'], challenge: 'Feature list read like a spec sheet, so plans were hard to compare.', solution: 'Feature-to-outcome sections, a comparison table and a three-tier pricing matrix.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'skincare-store', name: 'Skincare Brand', industry: 'D2C retail', img: 'portfolio/skincare-store.jpg', services: ['WooCommerce', 'Social media marketing'], challenge: 'Founder story was the strongest asset but sat below the catalogue.', solution: 'Story block above products, collection tabs and a review carousel.', tech: ['WordPress', 'WooCommerce'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'restaurant', name: 'Restaurant', industry: 'Food & beverage', img: 'portfolio/restaurant.jpg', services: ['WordPress development', 'Graphic design'], challenge: 'Reservations, menu and offers competed for the same space.', solution: 'Daily-special carousel, tabbed menu, reservation form and pricing plans.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'tattoo-studio', name: 'Tattoo Studio', industry: 'Creative studio', img: 'portfolio/tattoo-studio.jpg', services: ['UI/UX design', 'WordPress development'], challenge: 'Artist portfolios were scattered across profiles.', solution: 'Dark editorial grid per artist, appointment block and studio hours.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'gym-store', name: 'Gym & Supplement Store', industry: 'E-commerce', img: 'portfolio/gym-store.jpg', services: ['WooCommerce', 'Performance marketing'], challenge: 'Memberships and merchandise shared one confused funnel.', solution: 'Split hero paths, programme cards and a product grid with sticky filters.', tech: ['WordPress', 'WooCommerce'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
  { slug: 'wedding', name: 'Wedding Site', industry: 'Events', img: 'portfolio/wedding.jpg', services: ['UI/UX design', 'WordPress development'], challenge: 'Guests needed schedule, travel and RSVP in one place.', solution: 'Timeline layout, gallery and an RSVP form with validation.', tech: ['WordPress'], result: 'REPLACE: add the measured outcome you want published.', url: '' },
];

const PROCESS = [
  { n: '01', t: 'Discover', b: 'Business goals, offer economics and what "qualified" means for your sales team.' },
  { n: '02', t: 'Research', b: 'Analytics, funnel, competitor and keyword analysis. Findings are shared in writing.' },
  { n: '03', t: 'Strategy', b: 'A 90-day roadmap with owners, budget split and the metric each workstream moves.' },
  { n: '04', t: 'Design', b: 'Flows, wireframes and interface design built on a documented design system.' },
  { n: '05', t: 'Build & Launch', b: 'Development, QA, tracking plan and a launch checklist covering SEO and performance.' },
  { n: '06', t: 'Measure & Grow', b: 'Reporting cadence, experiment backlog and quarterly re-forecasting.' },
];

const INSIGHTS = [
  { t: 'What a technical SEO audit should actually deliver', k: 'SEO', d: 'A checklist you can hand to a developer, not a 90-page PDF.' },
  { t: 'Choosing between WordPress and headless for a marketing site', k: 'Development', d: 'Editor experience, speed budgets and the real cost of each path.' },
  { t: 'Backlinks: relevance beats volume every time', k: 'Link building', d: 'How we qualify a placement before we pitch it.' },
  { t: 'The five reports every SMB marketing owner needs', k: 'Analytics', d: 'What to look at weekly, monthly and quarterly — and what to ignore.' },
];

/* ---------- chrome ---------- */
function Logo({ variant = 'gradient', height = 26, alt = 'ZaviFx' }) {
  const src = ASSETS + (variant === 'white' ? 'logo-zavifx-white.png' : variant === 'black' ? 'logo-zavifx-black.png' : variant === 'mono' ? 'logo-zavifx-mono-zfx.png' : 'logo-zavifx-gradient.png');
  return <img src={src} alt={alt} style={{ height, width: 'auto' }} />;
}

function Header({ page, go }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <header className="zx-nav">
      <div className="zx-container zx-nav__inner" style={{ gap: 'var(--space-xl)' }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} style={{ display: 'flex', alignItems: 'center' }} aria-label="ZaviFx home">
          <Logo height={24} />
        </a>
        <nav className="zx-nav__links" aria-label="Primary" style={{ gap: 'var(--space-lg)' }}>
          {NAV.map((l) => (
            <a key={l.page} className="zx-nav__link" href={'#' + l.page}
              aria-current={page === l.page ? 'page' : undefined}
              onClick={(e) => { e.preventDefault(); go(l.page); }}>{l.label}</a>
          ))}
        </nav>
        <div className="zx-nav__actions zx-nav__actions--desktop">
          <Button size="sm" onClick={() => go('contact')}>Book a Free Consultation</Button>
        </div>
        <span className="zx-nav__burger">
          <IconButton variant="ghost" label="Open menu" onClick={() => setOpen(true)}
            icon={<svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true"><path d="M2 5h14M2 9h14M2 13h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>} />
        </span>
      </div>
      {open && (
        <div onClickCapture={(e) => {
          const a = e.target.closest('a[href^="#"]');
          if (!a) return;
          e.preventDefault();
          setOpen(false);
          go(a.getAttribute('href').slice(1));
        }}>
        <MobileDrawer open onClose={() => setOpen(false)} title="Menu"
          links={NAV.map((l) => ({ label: l.label, href: '#' + l.page }))}
          current={NAV.find((l) => l.page === page)?.label}
          primaryCta={{ label: 'Book a Free Consultation', href: '#contact' }} />
        </div>
      )}
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer className="zx-footer">
      <div className="zx-container">
        <div className="zx-footer__grid">
          <div>
            <Logo variant="white" height={26} />
            <p className="zx-footer__tag">Digital strategy, design, development and performance marketing from Hyderabad, India.</p>
            <div className="zx-footer__social">
              {['LinkedIn', 'Instagram', 'X', 'Facebook'].map((s) => (
                <a key={s} href="#" aria-label={s} style={{ width: 36, height: 36, borderRadius: 'var(--radius-pill)', border: '1px solid rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', fontSize: 12 }}>{s.slice(0, 1)}</a>
              ))}
            </div>
          </div>
          <div className="zx-footer__col">
            <span className="zx-footer__title">Services</span>
            {SERVICES.slice(0, 5).map((s) => <a key={s.slug} href="#services" onClick={(e) => { e.preventDefault(); go('services'); }}>{s.title}</a>)}
          </div>
          <div className="zx-footer__col">
            <span className="zx-footer__title">Company</span>
            <a href="#about" onClick={(e) => { e.preventDefault(); go('about'); }}>About ZaviFx</a>
            <a href="#about" onClick={(e) => { e.preventDefault(); go('about'); }}>Our process</a>
            <a href="#work" onClick={(e) => { e.preventDefault(); go('work'); }}>Work</a>
            <a href="#case-study" onClick={(e) => { e.preventDefault(); go('case-study'); }}>SEO case study</a>
          </div>
          <div className="zx-footer__col">
            <span className="zx-footer__title">Resources</span>
            <a href="#insights" onClick={(e) => { e.preventDefault(); go('insights'); }}>Insights</a>
            <a href="#legal" onClick={(e) => { e.preventDefault(); go('legal'); }}>Privacy policy</a>
            <a href="#legal" onClick={(e) => { e.preventDefault(); go('legal'); }}>Terms &amp; conditions</a>
            <a href="#404" onClick={(e) => { e.preventDefault(); go('404'); }}>404 page</a>
          </div>
          <div className="zx-footer__col">
            <span className="zx-footer__title">Contact</span>
            <a href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Book a consultation</a>
            <span style={{ color: 'rgba(255,255,255,.62)', fontSize: 'var(--type-body-sm-size)' }}>Hyderabad, India</span>
            <span style={{ color: 'rgba(255,255,255,.45)', fontSize: 'var(--type-caption-size)' }}>REPLACE: email</span>
            <span style={{ color: 'rgba(255,255,255,.45)', fontSize: 'var(--type-caption-size)' }}>REPLACE: phone</span>
          </div>
        </div>
        <div className="zx-footer__bottom">
          <span>© {new Date().getFullYear()} ZaviFx. Hyderabad, India.</span>
          <div className="zx-footer__legal">
            <a href="#legal" onClick={(e) => { e.preventDefault(); go('legal'); }}>Privacy</a>
            <a href="#legal" onClick={(e) => { e.preventDefault(); go('legal'); }}>Terms</a>
            <a href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }}>Contact</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function Section({ id, eyebrow, title, intro, children, tone = 'canvas', pad = 'var(--space-section-lg)', center = false }) {
  return (
    <section id={id} style={{ background: tone === 'sunken' ? 'var(--bg-subtle)' : 'var(--bg-page)', paddingBlock: pad, borderTop: tone === 'sunken' ? '1px solid var(--border-hairline)' : 'none' }}>
      <div className="zx-container">
        {(eyebrow || title) && (
          <header style={{ maxWidth: 760, marginBottom: 'var(--space-xxxl)', marginInline: center ? 'auto' : undefined, textAlign: center ? 'center' : 'left' }}>
            {eyebrow && <div className="zx-card__eyebrow" style={{ marginBottom: 'var(--space-sm)' }}>{eyebrow}</div>}
            {title && <h2 className="t-h1" style={{ color: 'var(--text-strong)' }}>{title}</h2>}
            {intro && <p className="t-subtitle" style={{ color: 'var(--text-tertiary)', marginTop: 'var(--space-md)' }}>{intro}</p>}
          </header>
        )}
        {children}
      </div>
    </section>
  );
}

function PageHero({ eyebrow, title, intro, children }) {
  return (
    <section style={{ paddingBlock: 'var(--space-section) var(--space-section-sm)', borderBottom: '1px solid var(--border-hairline)' }}>
      <div className="zx-container" style={{ maxWidth: 900 }}>
        <div className="zx-card__eyebrow" style={{ marginBottom: 'var(--space-sm)' }}>{eyebrow}</div>
        <h1 className="t-display" style={{ color: 'var(--text-strong)' }}>{title}</h1>
        {intro && <p className="t-subtitle" style={{ color: 'var(--text-tertiary)', marginTop: 'var(--space-md)', maxWidth: 680 }}>{intro}</p>}
        {children && <div style={{ marginTop: 'var(--space-xl)', display: 'flex', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>{children}</div>}
      </div>
    </section>
  );
}

function BrowserFrame({ src, alt, tall = false }) {
  return (
    <figure style={{ margin: 0, border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-card)', overflow: 'hidden', background: 'var(--surface-card)', boxShadow: 'var(--shadow-1)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px var(--space-sm)', borderBottom: '1px solid var(--border-hairline-soft)', background: 'var(--bg-subtle)' }}>
        {['var(--border-hairline)', 'var(--border-hairline)', 'var(--border-hairline)'].map((c, i) => <span key={i} style={{ width: 8, height: 8, borderRadius: 999, background: c }} />)}
        <span style={{ marginLeft: 'var(--space-xs)', fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{alt}</span>
      </div>
      <div style={{ maxHeight: tall ? 520 : 300, overflow: 'hidden' }}>
        <img src={src} alt={alt} loading="lazy" style={{ width: '100%', display: 'block' }} />
      </div>
    </figure>
  );
}

function CTAStrip(props) {
  return window.CTAFinale ? React.createElement(window.CTAFinale, props) : null;
}

Object.assign(window, { ASSETS, NAV, SERVICES, PROJECTS, PROCESS, INSIGHTS, Logo, Header, Footer, Section, PageHero, BrowserFrame, CTAStrip });