// landing-app.jsx — orchestrates the page; wires up Tweaks for the industry tokens.

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "industry": "Home Services",
  "companyType": "Contractor",
  "locality": "Utah",
  "ctaColor": "accent"
}/*EDITMODE-END*/;

const INDUSTRY_PRESETS = {
  'Home Services': {
    companyType: 'Contractor',
    subs: [
      { label: 'HVAC',                icon: 'thermometer' },
      { label: 'Plumbing',            icon: 'droplets' },
      { label: 'Roofing',             icon: 'home' },
      { label: 'Electrical',          icon: 'zap' },
      { label: 'Landscaping',         icon: 'trees' },
      { label: 'Pest Control',        icon: 'bug-off' },
      { label: 'Cleaning Services',   icon: 'sparkles' },
      { label: 'Garage Doors',        icon: 'door-closed' },
      { label: 'Window & Glass',      icon: 'square' },
      { label: 'Solar Installation',  icon: 'sun' },
      { label: 'Painting',            icon: 'paintbrush' },
      { label: 'Restoration',         icon: 'wrench' },
    ],
  },
  'Healthcare': {
    companyType: 'Practice',
    subs: [
      { label: 'Dental',              icon: 'smile' },
      { label: 'Dermatology',         icon: 'hand' },
      { label: 'Cosmetic Surgery',    icon: 'scissors' },
      { label: 'Orthopedics',         icon: 'bone' },
      { label: 'Veterinary',          icon: 'paw-print' },
      { label: 'Mental Health',       icon: 'brain' },
      { label: 'Chiropractic',        icon: 'activity' },
      { label: 'Physical Therapy',    icon: 'dumbbell' },
      { label: 'Pediatrics',          icon: 'baby' },
      { label: 'Med Spa',             icon: 'sparkles' },
      { label: 'Optometry',           icon: 'eye' },
      { label: 'Urgent Care',         icon: 'cross' },
    ],
  },
  'Legal': {
    companyType: 'Law Firm',
    subs: [
      { label: 'Personal Injury',     icon: 'shield' },
      { label: 'Family Law',          icon: 'heart' },
      { label: 'Criminal Defense',    icon: 'gavel' },
      { label: 'Estate Planning',     icon: 'scroll' },
      { label: 'Bankruptcy',          icon: 'banknote' },
      { label: 'Immigration',         icon: 'globe' },
      { label: 'Corporate / M&A',     icon: 'briefcase' },
      { label: 'Real Estate Law',     icon: 'home' },
      { label: 'Employment Law',      icon: 'users' },
      { label: 'IP & Patents',        icon: 'lightbulb' },
      { label: 'Tax Law',             icon: 'receipt' },
      { label: 'DUI Defense',         icon: 'car' },
    ],
  },
  'Manufacturing': {
    companyType: 'Manufacturer',
    subs: [
      { label: 'Industrial Equipment',icon: 'factory' },
      { label: 'Food & Beverage',     icon: 'utensils' },
      { label: 'Electronics',         icon: 'cpu' },
      { label: 'Automotive Parts',    icon: 'car' },
      { label: 'Aerospace',           icon: 'plane' },
      { label: 'Plastics & Polymers', icon: 'package' },
      { label: 'Metal Fabrication',   icon: 'wrench' },
      { label: 'Textile & Apparel',   icon: 'shirt' },
      { label: 'Medical Devices',     icon: 'cross' },
      { label: 'Chemical',            icon: 'flask-conical' },
      { label: 'Packaging',           icon: 'box' },
      { label: 'Construction Materials', icon: 'hard-hat' },
    ],
  },
  'Financial Services': {
    companyType: 'Firm',
    subs: [
      { label: 'Wealth Management',   icon: 'gem' },
      { label: 'CPAs & Accounting',   icon: 'calculator' },
      { label: 'Mortgage Lending',    icon: 'home' },
      { label: 'Insurance',           icon: 'shield' },
      { label: 'Credit Unions',       icon: 'landmark' },
      { label: 'Tax Preparation',     icon: 'receipt' },
      { label: 'Financial Planning',  icon: 'line-chart' },
      { label: 'Estate Planning',     icon: 'scroll' },
      { label: 'Business Banking',    icon: 'briefcase' },
      { label: 'Retirement Planning', icon: 'piggy-bank' },
      { label: 'Investment Advisors', icon: 'trending-up' },
      { label: 'Bookkeeping',         icon: 'book-open' },
    ],
  },
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const industry    = tweaks.industry;
  const companyType = tweaks.companyType;
  const locality    = tweaks.locality;
  const ctaColor    = tweaks.ctaColor;

  const preset = INDUSTRY_PRESETS[industry] || INDUSTRY_PRESETS['Home Services'];
  const subIndustries = preset.subs;

  // Re-render Lucide icons whenever industry switches (icon set may change).
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 1.75 } });
  });

  return (
    <div data-screen-label="Industry Landing Page">
      <SiteHeader industry={industry} />
      <Hero industry={industry} companyType={companyType} locality={locality} ctaColor={ctaColor} />
      <Awards />
      <Intro industry={industry} />
      <Services industry={industry} ctaColor={ctaColor} />
      <Subindustries industry={industry} subIndustries={subIndustries} />
      <WhyUpwardEngine industry={industry} />
      <CaseStudies industry={industry} companyType={companyType} />
      <FAQs industry={industry} companyType={companyType} />
      <BlogRoll industry={industry} />
      <FinalCTA industry={industry} ctaColor={ctaColor} />
      <SiteFooter />

      <TweaksPanel title="Template tweaks">
        <TweakSection label="Industry token">
          <TweakSelect label="Preset" value={industry}
            options={Object.keys(INDUSTRY_PRESETS)}
            onChange={(v) => setTweak({ industry: v, companyType: INDUSTRY_PRESETS[v].companyType })} />
          <TweakText label="[INDUSTRY]" value={industry} onChange={(v) => setTweak('industry', v)} />
          <TweakText label="[COMPANY TYPE]" value={companyType} onChange={(v) => setTweak('companyType', v)} />
          <TweakText label="Locality" value={locality} onChange={(v) => setTweak('locality', v)} />
        </TweakSection>
        <TweakSection label="Primary CTA color">
          <TweakRadio label="Color" value={ctaColor}
            options={[
              { value: 'accent',    label: 'Ember' },
              { value: 'secondary', label: 'Sky' },
              { value: 'sun',       label: 'Sun' },
            ]}
            onChange={(v) => setTweak('ctaColor', v)} />
        </TweakSection>
        <TweakSection label="Jump to section">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '2px 0' }}>
            {[
              ['#top','Hero + lead form'],
              ['#services','Services'],
              ['#industries','Sub-industries'],
              ['#approach','Why us'],
              ['#case-studies','Case studies'],
              ['#faqs','FAQs'],
              ['#blog','Blog roll'],
            ].map(([h,l]) => (
              <a key={h} href={h} style={{
                fontFamily: 'Montserrat', fontSize: 12.5, color: 'var(--ue-deep)',
                textDecoration: 'none', padding: '6px 10px', borderRadius: 6,
                background: 'rgba(33,66,139,0.06)',
              }}>{l} →</a>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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