/* Martin Haidar — app entry, Tweaks panel + below-the-fold continuation
 *
 * Brand context (public): Martin Haidar — Lebanese Executive Pastry Chef.
 * French-trained. Runs pastry classes and pastry & bakery consultancies.
 * Philosophy: "Passionately create artistic pastry fusions."
 * Signature works referenced: Fashion Éclair, Chocolate Caramel Tornado,
 * Biskit Butter Speculoos.
 */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "alignment": "bottom-left",
  "accent": "#778DA9",
  "headlineVariant": "fusions",
  "showCorners": true
}/*EDITMODE-END*/;

const HEADLINES = {
  fusions:    { headline: "Pastry & Bakery Consultant for the *GCC*.",
                subline:  "The Baker Atelier partners with F&B brands across UAE, Saudi Arabia and Oman to build, launch and scale premium bakery concepts — from menu to kitchen to team." },
  technique:  { headline: "Where French *technique* meets Levantine soul.",
                subline:  "Pastry & bakery consultancies, R&D, and masterclasses — from concept to opening night." },
  quiet:      { headline: "Pastry as *quiet* spectacle.",
                subline:  "We compose pastry programs, train kitchens, and shape openings for hospitality brands that take dessert seriously." },
  patience:   { headline: "A studio of *patience*, butter, and detail.",
                subline:  "Bakery R&D, signature menus, and hands-on classes — built on a career that began at fifteen." },
};

/* Sticky WhatsApp lead CTA — fixed bottom-right, links to wa.me with a
 * pre-filled enquiry. Sits left of the Tweaks toggle so they don't overlap. */
const WHATSAPP_HREF = "https://wa.me/447438707834?text=" +
  encodeURIComponent("Hi, I'd like to discuss a bakery consultancy project");

function WhatsAppCTA(){
  return (
    <a
      className="ml-wa"
      href={WHATSAPP_HREF}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat with The Baker Atelier on WhatsApp"
    >
      <svg className="ml-wa-icon" viewBox="0 0 32 32" aria-hidden="true" fill="currentColor">
        <path d="M16 3C9.4 3 4 8.4 4 15c0 2.1.6 4.1 1.6 5.9L4 29l8.3-1.6c1.7.9 3.6 1.4 5.7 1.4 6.6 0 12-5.4 12-12S22.6 3 16 3Zm0 21.8c-1.8 0-3.5-.5-5-1.4l-.4-.2-4.9 1 1-4.8-.3-.4c-1-1.6-1.5-3.4-1.5-5.3C4.9 9.4 9.9 4.4 16 4.4S27.1 9.4 27.1 15 22.1 24.8 16 24.8Zm6.1-7.4c-.3-.2-2-1-2.3-1.1-.3-.1-.5-.2-.8.2-.2.3-.9 1.1-1.1 1.3-.2.2-.4.2-.7.1-.3-.2-1.4-.5-2.7-1.7-1-.9-1.7-2-1.9-2.3-.2-.3 0-.5.1-.7.1-.1.3-.4.5-.6.1-.2.2-.3.3-.6.1-.2 0-.4 0-.6-.1-.2-.8-1.9-1.1-2.6-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.3 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6-.1-.2-.3-.2-.6-.4Z"/>
      </svg>
      <span className="ml-wa-label">WhatsApp</span>
    </a>
  );
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const copy = HEADLINES[t.headlineVariant] || HEADLINES.fusions;

  return (
    <React.Fragment>
      <Hero tweaks={{
        alignment: t.alignment,
        accent: Array.isArray(t.accent) ? t.accent[0] : t.accent,
        headline: copy.headline,
        subline: copy.subline,
        showCorners: t.showCorners,
      }}/>

      <Glance/>
      <Services/>
      <Portfolio/>
      <Creations/>
      <Brands/>
      <Testimonials/>
      <Blog/>
      <Contact/>

      <WhatsAppCTA/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakRadio
          label="Alignment"
          value={t.alignment}
          options={[
            {label:"Bottom-left", value:"bottom-left"},
            {label:"Centered",    value:"center"},
          ]}
          onChange={(v)=> setTweak("alignment", v)}
        />
        <TweakSelect
          label="Headline copy"
          value={t.headlineVariant}
          options={[
            {label:"Pastry & Bakery Consultant for the GCC.", value:"fusions"},
            {label:"Where French technique meets Levantine soul.", value:"technique"},
            {label:"Pastry as quiet spectacle.", value:"quiet"},
            {label:"A studio of patience, butter, and detail.", value:"patience"},
          ]}
          onChange={(v)=> setTweak("headlineVariant", v)}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Primary"
          value={t.accent}
          options={["#778DA9","#415A77","#E0E1DD","#1B263B"]}
          onChange={(v)=> setTweak("accent", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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