/* global React */
const { useState, useEffect } = React;

// ─────────── Ornaments ───────────

const Diamond = () => (
  <svg viewBox="0 0 14 14" fill="none">
    <path d="M7 1 L13 7 L7 13 L1 7 Z" stroke="currentColor" strokeWidth="1" fill="none"/>
    <path d="M7 4 L10 7 L7 10 L4 7 Z" fill="currentColor"/>
  </svg>
);

const Divider = () => (
  <div className="divider" aria-hidden="true">
    <Diamond />
  </div>
);

const HeroRays = () => (
  <div className="hero-rays" aria-hidden="true">
    <svg viewBox="-700 -700 1400 1400">
      <defs>
        <radialGradient id="sun" cx="0" cy="0" r="500" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#f1d27a" stopOpacity="0.35"/>
          <stop offset="0.5" stopColor="#d4a64a" stopOpacity="0.1"/>
          <stop offset="1" stopColor="#0a0806" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle r="500" fill="url(#sun)"/>
      {Array.from({length: 32}).map((_, i) => {
        const a = (i / 32) * Math.PI * 2;
        const x1 = Math.cos(a) * 80, y1 = Math.sin(a) * 80;
        const x2 = Math.cos(a) * 700, y2 = Math.sin(a) * 700;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#d4a64a" strokeOpacity="0.18" strokeWidth="1"/>;
      })}
    </svg>
  </div>
);

// ─────────── Nav ───────────

const Nav = () => (
  <nav className="nav">
    <div className="container nav-inner">
      <a className="nav-logo" href="#top">
        <img src="assets/sun-city-logo.png?v=2" alt="Sun City Luxury Financial Group — Orlando, Florida Life Insurance Agency"/>
      </a>
      <div className="nav-links">
        <a href="#about">About</a>
        <a href="#products">Coverage</a>
        <a href="#agents">For Agents</a>
        <a href="#contact">Contact</a>
        <a
          href="https://calendar.app.google/GVN81GGGBVeJ7uWU8"
          target="_blank"
          rel="noopener noreferrer"
          className="btn btn--ghost"
          style={{padding:"10px 18px"}}
        >
          Book a Call
        </a>
      </div>
    </div>
  </nav>
);

// ─────────── Hero variants ───────────

const HeroLogo = () => (
  <>
    <img className="hero-logo" src="assets/sun-city-logo.png?v=2" alt="Sun City Luxury Financial Group — Orlando, Florida Life Insurance Agency"/>
    <Divider />
    <h1 className="display" style={{marginTop: 28, maxWidth: "18ch", marginLeft:"auto", marginRight:"auto"}}>
      Building Leaders.<br/>Creating Wealth.<br/>Changing Lives.
    </h1>
    <p className="subhead" style={{margin:"24px auto 0"}}>
      Orlando, Florida life insurance agency &mdash; IUL, term life, final expense, and annuities from 60+ carriers, protecting families nationwide.
    </p>
  </>
);

const HeroTypo = () => (
  <>
    <p className="eyebrow">Est. Orlando &middot; Florida</p>
    <div className="hero-wordmark" style={{marginTop: 24}}>SUN&nbsp;CITY</div>
    <div className="hero-sub-mark">&mdash;&nbsp;&nbsp;Luxury Financial Group&nbsp;&nbsp;&mdash;</div>
    <Divider />
    <p className="subhead" style={{margin:"30px auto 0", fontSize: "clamp(20px, 1.7vw, 26px)"}}>
      Building Leaders. Creating Wealth. Changing Lives.
    </p>
  </>
);

const HeroImage = () => (
  <>
    <div className="hero-bg-img" />
    <div className="hero-content">
      <img className="hero-logo" src="assets/sun-city-logo.png?v=2" alt="Sun City Luxury Financial Group — Orlando, Florida Life Insurance Agency" style={{width: "clamp(160px, 18vw, 220px)"}}/>
      <h1 className="display" style={{maxWidth: "16ch", margin: "20px auto 0"}}>
        Where Legacy Begins.
      </h1>
      <p className="subhead" style={{margin:"22px auto 0"}}>
        Orlando, Florida life insurance &mdash; IUL, term, final expense &amp; annuities. From Orlando to all 50 states.
      </p>
    </div>
  </>
);

const Hero = ({variant}) => {
  return (
    <header className={"hero hero--" + variant} id="top">
      {variant !== "image" && <HeroRays />}
      <div className="container hero-content" style={{position:"relative", zIndex: 2}}>
        {variant === "logo" && <HeroLogo />}
        {variant === "typo" && <HeroTypo />}
        {variant === "image" && <HeroImage />}

        <div className="hero-cta">
          <a
            className="btn btn--primary"
            href="https://calendar.app.google/GVN81GGGBVeJ7uWU8"
            target="_blank"
            rel="noopener noreferrer"
          >
            Book a Strategy Call
          </a>
          <a className="btn" href="#agents">Join Our Agency</a>
        </div>

        <div className="hero-meta">
          <span><span className="dot"/> Orlando, Florida</span>
          <span><span className="dot"/> Agents in 38 States</span>
          <span><span className="dot"/> 60+ Carriers</span>
        </div>
      </div>
    </header>
  );
};

// ─────────── About ───────────

const About = () => (
  <section className="about" id="about">
    <div className="container">
      <Executives />
    </div>
  </section>
);

// ─────────── Executives ───────────

const EXECUTIVES = [
  {
    name: "Charles Clark",
    title: "Executive Director",
    photo: "assets/exec-charles-clark.png",
    bio: "Mr. Clark has a background in service, ministry, business, transportation, and leadership. He brings real-life experience, wisdom, and integrity into everything he does. He is not just building a business — he is building people, building leaders, and helping families understand the importance of financial protection.",
    email: "cclark@suncityluxury.com"
  },
  {
    name: "Denise Clark",
    title: "Executive Director",
    photo: "assets/exec-denise-clark.png",
    bio: "Mrs. Clark is a wife, mother, airline pilot with over 34 years of experience, entrepreneur, and financial educator. She has a strong background in aviation and business, and brings professionalism, leadership, and integrity into everything she does. She is passionate about empowering families to build generational wealth through financial literacy, leadership, and mentorship.",
    email: "dclark@suncityluxury.com"
  },
  {
    name: "Nina Longsworth",
    title: "Senior Manager",
    photo: "assets/exec-nina-longsworth.jpg",
    bio: "Nina is a licensed independent life insurance agent and financial professional based in Orlando, Florida. She helps individuals, families, business owners, and retirees design strategies to protect what matters most and grow what they've earned. Her services include life insurance, retirement income planning, living benefits, mortgage protection, and wealth transfer strategies.",
    email: "nlongsworth@suncityluxury.com"
  },
  {
    name: "Gino Bastian",
    title: "Senior Financial Associate",
    photo: "assets/exec-gino-bastian.jpg",
    bio: "Gino Bastian is a licensed Life, Health, and Annuity Agent with a diverse professional background in marine technology, customer service, Medicare, and the pharmaceutical industry. As a certified marine technician and experienced customer service specialist, Gino is passionate about helping individuals and families make informed financial decisions while building long-term security and peace of mind through personalized insurance solutions.",
    email: "gbastian@suncityluxury.com"
  }
];

const Executives = () => (
  <div className="executives">
    <div className="section-head" style={{marginTop: 40}}>
      <Divider />
      <span className="eyebrow" style={{marginTop: 18}}>Leadership</span>
      <h2 className="display">Meet the People Behind the Promise.</h2>
      <p className="subhead">
        Four leaders who built Sun City &mdash; and who still pick up the phone when it rings.
      </p>
    </div>

    <div className="execs-grid">
      {EXECUTIVES.map((e) => (
        <article className="exec-card" key={e.name}>
          <div className="corner-tl"/><div className="corner-tr"/><div className="corner-bl"/><div className="corner-br"/>
          <div className="exec-photo">
            <img
              src={e.photo}
              alt={e.name}
              onError={(ev) => { ev.currentTarget.style.display = "none"; }}
            />
            <div className="exec-photo-fallback" aria-hidden="true">
              {e.name.split(" ").map((n) => n[0]).join("")}
            </div>
          </div>
          <div className="exec-body">
            <div className="exec-tag">{e.title}</div>
            <h3 className="exec-name">{e.name}</h3>
            <p className="exec-bio">{e.bio}</p>
            <div className="exec-contact">
              <a href={"mailto:" + e.email}><MailIcon /><span>{e.email}</span></a>
            </div>
          </div>
        </article>
      ))}
    </div>
  </div>
);

// ─────────── Products ───────────

const ShieldIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M12 2 L20 5 V12 C20 17 16.5 20.5 12 22 C7.5 20.5 4 17 4 12 V5 Z"/>
    <path d="M12 7 V17 M8 12 H16" />
  </svg>
);
const AnnuityIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M3 20 H21 M5 20 V10 L12 5 L19 10 V20 M9 20 V13 H15 V20"/>
    <circle cx="12" cy="9" r="0.8" fill="currentColor"/>
  </svg>
);
const ColumnsIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M3 21 H21 M5 21 V8 M9 21 V8 M15 21 V8 M19 21 V8 M3 8 H21 L19 4 H5 Z"/>
  </svg>
);
const HeartIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M12 20 C12 20 4 14 4 8.5 C4 6 6 4 8.5 4 C10 4 11.5 5 12 6.5 C12.5 5 14 4 15.5 4 C18 4 20 6 20 8.5 C20 14 12 20 12 20 Z"/>
  </svg>
);

const Products = () => (
  <section id="products">
    <div className="container">
      <div className="section-head">
        <Divider />
        <span className="eyebrow" style={{marginTop: 18}}>Coverage</span>
        <h2 className="display">Florida Life Insurance Coverage</h2>
        <p className="subhead">
          IUL, term life insurance, final expense, and annuities &mdash; whether you&rsquo;re building tax-advantaged
          wealth, locking in protection for the years that matter most, or making sure your family isn&rsquo;t left
          with the bill, our Orlando agents shop 60+ carriers to find the right policy.
        </p>
      </div>

      <div className="products-grid">
        <article className="product">
          <div className="product-icon"><ColumnsIcon /></div>
          <div className="product-tag">Indexed Universal Life Insurance</div>
          <h3>IUL Insurance</h3>
          <p>
            Indexed Universal Life is permanent life insurance with cash value tied to a market index &mdash;
            growth potential without the downside. Borrow against it tax-free in retirement. The wealthy&rsquo;s
            quiet weapon, finally in your hands &mdash; designed by our Orlando IUL specialists.
          </p>
          <ul className="product-list">
            <li><span>Best for</span><span>Wealth building</span></li>
            <li><span>Tax</span><span>Advantaged</span></li>
            <li><span>Cash value</span><span>Yes</span></li>
            <li><span>Term</span><span>Lifetime</span></li>
          </ul>
        </article>

        <article className="product">
          <div className="product-icon"><ShieldIcon /></div>
          <div className="product-tag">Term Life Insurance</div>
          <h3>Term Life Insurance</h3>
          <p>
            Term life insurance gives families the most coverage for the lowest premium &mdash; locked in
            for ten, twenty, or thirty years. Built to protect the seasons of life when your family depends on you most:
            the mortgage, the kids, the rebuild.
          </p>
          <ul className="product-list">
            <li><span>Best for</span><span>Income protection</span></li>
            <li><span>Premium</span><span>Lowest</span></li>
            <li><span>Cash value</span><span>No</span></li>
            <li><span>Term</span><span>10&ndash;30 years</span></li>
          </ul>
        </article>

        <article className="product">
          <div className="product-icon"><HeartIcon /></div>
          <div className="product-tag">Final Expense Insurance</div>
          <h3>Final Expense</h3>
          <p>
            Final expense whole life insurance is designed to handle funeral costs, medical bills, and outstanding
            debts &mdash; so your family grieves without a checkbook in their hand. Simple underwriting. Lifetime
            benefits. Available to seniors across Florida and 38 states.
          </p>
          <ul className="product-list">
            <li><span>Best for</span><span>Seniors 50&ndash;85</span></li>
            <li><span>Underwriting</span><span>Simplified</span></li>
            <li><span>Cash value</span><span>Yes</span></li>
            <li><span>Term</span><span>Lifetime</span></li>
          </ul>
        </article>

        <article className="product">
          <div className="product-icon"><AnnuityIcon /></div>
          <div className="product-tag">Annuity</div>
          <h3>Annuity</h3>
          <p>
            A guaranteed income stream for the years you&rsquo;ve earned the right to rest. Grow your nest egg
            tax-deferred, then turn it into a paycheck that doesn&rsquo;t stop &mdash; for life, if you choose.
          </p>
          <ul className="product-list">
            <li><span>Best for</span><span>Retirement income</span></li>
            <li><span>Tax</span><span>Deferred</span></li>
            <li><span>Guarantee</span><span>Principal protected</span></li>
            <li><span>Term</span><span>Fixed or lifetime</span></li>
          </ul>
        </article>
      </div>
    </div>
  </section>
);

// ─────────── Carriers ───────────

const Carriers = () => (
  <section className="carriers" style={{padding: 0}}>
    <div className="container" style={{padding: "60px 0"}}>
      <div className="carriers-label">Trusted Carrier Partners</div>
      <div className="carriers-list">
        <span>Transamerica</span>
        <span>F&amp;G</span>
        <span>Nationwide</span>
        <span>Mutual of Omaha</span>
        <span>Foresters</span>
        <span>Americo</span>
      </div>
      <div className="carriers-foot">&hellip; and over sixty more, so we work for you &mdash; not for any single carrier.</div>
    </div>
  </section>
);

// ─────────── Agents ───────────

const Agents = () => (
  <section className="agents" id="agents">
    <div className="container">
      <div className="section-head">
        <Divider />
        <span className="eyebrow" style={{marginTop: 18}}>For Agents</span>
        <h2 className="display">Build a Career Worthy of Your Name.</h2>
        <p className="subhead">
          We&rsquo;re hiring agents in every state. Whether you&rsquo;re newly licensed or a seasoned producer ready
          for a real platform &mdash; Sun City was built so you don&rsquo;t have to build it yourself.
        </p>
      </div>

      <div className="agents-grid">
        <div className="agents-pillars">
          <div className="pillar">
            <div className="pillar-num">I.</div>
            <div>
              <h4>Mentorship</h4>
              <p>One-on-one coaching from producers who&rsquo;ve placed seven figures of premium. We don&rsquo;t hand you a manual &mdash; we hand you a phone, sit beside you, and dial.</p>
            </div>
          </div>
          <div className="pillar">
            <div className="pillar-num">II.</div>
            <div>
              <h4>Training</h4>
              <p>Weekly live sessions on product knowledge, objection handling, and the mindset work that separates a job from a career. Self-paced courses available the moment you&rsquo;re onboarded.</p>
            </div>
          </div>
          <div className="pillar">
            <div className="pillar-num">III.</div>
            <div>
              <h4>Leads</h4>
              <p>Vetted, exclusive leads delivered straight to your CRM &mdash; so the work is selling, not chasing. Scale your book without burning your network.</p>
            </div>
          </div>
        </div>

        <div>
          <p style={{fontFamily:"var(--serif-body)", fontStyle:"italic", color:"var(--gold-bright)", fontSize: 22, lineHeight: 1.5}}>
            &ldquo;Most agencies recruit you and forget you. We&rsquo;re here to make sure your fifth year looks nothing like your first.&rdquo;
          </p>
          <p style={{marginTop: 28, color:"var(--ink-mute)", fontSize: 16}}>
            &mdash; The Sun City Leadership Team
          </p>

          <div style={{marginTop: 40, padding: "28px", border: "1px solid var(--hairline-strong)", background: "rgba(20,16,10,0.5)", position:"relative"}}>
            <div className="corner-tl"/><div className="corner-tr"/><div className="corner-bl"/><div className="corner-br"/>
            <div className="eyebrow" style={{marginBottom: 14}}>Apply to Join</div>
            <h3 style={{fontFamily:"var(--serif-display)", fontSize: 26, color:"var(--gold-bright)", margin:"0 0 16px", letterSpacing:"0.06em"}}>
              We Build Producers, Not Headcount.
            </h3>
            <p style={{color:"var(--ink)", opacity:0.8, fontSize: 17, marginBottom: 24}}>
              Open conversation, no obligation. We&rsquo;ll walk you through compensation, our lead system, and what your first 90 days look like.
            </p>
            <a className="btn btn--primary" href="#contact">Start the Conversation</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ─────────── Contact ───────────

const PhoneIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M5 4 H9 L11 9 L8.5 10.5 C9.5 13 11 14.5 13.5 15.5 L15 13 L20 15 V19 C20 19.5 19.5 20 19 20 C11 20 4 13 4 5 C4 4.5 4.5 4 5 4 Z"/>
  </svg>
);
const MailIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="3" y="6" width="18" height="13"/>
    <path d="M3 7 L12 14 L21 7"/>
  </svg>
);
const CalendarIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="3" y="5" width="18" height="16"/>
    <path d="M3 10 H21 M8 3 V7 M16 3 V7"/>
    <circle cx="8" cy="14" r="1" fill="currentColor"/>
    <circle cx="12" cy="14" r="1" fill="currentColor"/>
    <circle cx="16" cy="14" r="1" fill="currentColor"/>
  </svg>
);

const Contact = () => (
  <section className="contact" id="contact">
    <div className="container">
      <div className="section-head">
        <Divider />
        <span className="eyebrow" style={{marginTop: 18}}>Get in Touch</span>
        <h2 className="display">However You Reach &mdash; We Answer.</h2>
        <p className="subhead">
          Whether you&rsquo;re shopping coverage or considering a career change, choose the channel that suits you.
          A real human responds within one business day.
        </p>
      </div>

      <div className="contact-grid">
        <a className="contact-card" href="tel:+12107401366">
          <div className="contact-card-icon"><PhoneIcon /></div>
          <div className="contact-card-lbl">Phone</div>
          <div className="contact-card-val">(210)&nbsp;740&#8209;1366</div>
          <div className="contact-card-btn">Call Now</div>
        </a>
        <a className="contact-card" href="mailto:hello@suncityluxury.com">
          <div className="contact-card-icon"><MailIcon /></div>
          <div className="contact-card-lbl">Email</div>
          <div className="contact-card-val">hello@suncityluxury<wbr/>.com</div>
          <div className="contact-card-btn">Send a Note</div>
        </a>
        <a
          className="contact-card"
          href="https://calendar.app.google/GVN81GGGBVeJ7uWU8"
          id="book"
          target="_blank"
          rel="noopener noreferrer"
        >
          <div className="contact-card-icon"><CalendarIcon /></div>
          <div className="contact-card-lbl">Schedule</div>
          <div className="contact-card-val">Book an Appointment</div>
          <div className="contact-card-btn">Pick a Time</div>
        </a>
      </div>

      <div className="contact-cta">
        <div className="corner-tl"/><div className="corner-tr"/><div className="corner-bl"/><div className="corner-br"/>
        <h3>Ready when you are.</h3>
        <p>
          Twenty minutes on the phone with one of our advisors will tell you everything you need to know &mdash;
          whether you&rsquo;re here for a policy or a partnership.
        </p>
        <div style={{display:"flex", gap: 16, justifyContent:"center", flexWrap:"wrap"}}>
          <a
            className="btn btn--primary"
            href="https://calendar.app.google/GVN81GGGBVeJ7uWU8"
            target="_blank"
            rel="noopener noreferrer"
          >
            Book a Call
          </a>
          <a className="btn" href="tel:+12107401366">Call Us</a>
        </div>
      </div>
    </div>
  </section>
);

// ─────────── Footer ───────────

const Footer = () => (
  <footer>
    <div className="container">
      <div className="footer-inner">
        <div>
          <div className="footer-logo">
            <img src="assets/sun-city-logo.png?v=2" alt="Sun City Luxury Financial Group — Orlando, Florida Life Insurance Agency"/>
          </div>
          <p className="footer-blurb">
            Independent Orlando, Florida life insurance agency offering IUL, term life, final expense, and annuities
            from 60+ A-rated carriers. Licensed in 38 states with agents nationwide. Building Leaders. Creating
            Wealth. Changing Lives.
          </p>
        </div>
        <div className="footer-col">
          <h5>Coverage</h5>
          <a href="#products">Indexed Universal Life</a>
          <a href="#products">Term Life</a>
          <a href="#products">Final Expense</a>
        </div>
        <div className="footer-col">
          <h5>Connect</h5>
          <a href="tel:+12107401366">(210) 740-1366</a>
          <a href="mailto:hello@suncityluxury.com">hello@suncityluxury.com</a>
          <a
            href="https://calendar.app.google/GVN81GGGBVeJ7uWU8"
            target="_blank"
            rel="noopener noreferrer"
          >
            Book a Call
          </a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>&copy; 2026 Sun City Luxury Financial Group</span>
        <span>Orlando, FL &middot; All Rights Reserved</span>
      </div>
    </div>
  </footer>
);

// ─────────── App ───────────

const GOLD_PRESETS = {
  champagne: { deep: "#9a8542", base: "#d8c47c", bright: "#f3e3a8", glow: "rgba(243, 227, 168, 0.18)" },
  rich:      { deep: "#8a6418", base: "#d4a64a", bright: "#f1d27a", glow: "rgba(241, 210, 122, 0.18)" },
  amber:     { deep: "#7a3f0a", base: "#cc7a1f", bright: "#f0a347", glow: "rgba(240, 163, 71, 0.20)" }
};

const App = () => {
  const defaults = window.__TWEAK_DEFAULTS || { hero: "logo", goldTone: "rich", density: "default" };
  const [tweaks, setTweaks] = useState(defaults);

  // Listen for tweak updates from the panel
  useEffect(() => {
    const handler = (e) => {
      if (e.data && e.data.type === "__sc_tweak_update") {
        setTweaks(e.data.tweaks);
      }
    };
    window.addEventListener("message", handler);
    return () => window.removeEventListener("message", handler);
  }, []);

  // Apply gold tone to root
  useEffect(() => {
    const preset = GOLD_PRESETS[tweaks.goldTone] || GOLD_PRESETS.rich;
    const root = document.documentElement;
    root.style.setProperty("--gold-deep", preset.deep);
    root.style.setProperty("--gold", preset.base);
    root.style.setProperty("--gold-bright", preset.bright);
    root.style.setProperty("--gold-glow", preset.glow);
  }, [tweaks.goldTone]);

  // Apply density
  useEffect(() => {
    document.body.classList.remove("density--airy", "density--compact");
    if (tweaks.density === "airy") document.body.classList.add("density--airy");
    if (tweaks.density === "compact") document.body.classList.add("density--compact");
  }, [tweaks.density]);

  return (
    <>
      <Nav />
      <main>
        <Hero variant={tweaks.hero} />
        <About />
        <Products />
        <Carriers />
        <Agents />
        <Contact />
      </main>
      <Footer />
    </>
  );
};

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